Remove the sidebar from WooCommerce pages on Storefront
Are you using Storefront on your shop? If yes, you noticed maybe that your shop page, and all other WooCommerce pages such as product page, category archive, etc. always have a sidebar.
By default, there’s not an option to remove it. Unless you use the Storefront extension Storefront WooCommerce Customizer.
But there’s also another way to remove it.
If you are into coding, you can unhook some Storefront actions to remove the sidebar on all WooCommerce pages, or only some of them, and with a bit of CSS you can increase the size of the main container.
Open your functions.php file in wp-content/themes/yuor-child-theme-name/ and add this code at the end of it:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| add_action( 'get_header', 'remove_storefront_sidebar' ); | |
| function remove_storefront_sidebar() { | |
| if ( is_woocommerce() ) { | |
| remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 ); | |
| } | |
| } |
Now, open your child theme’s style.css in the same location and add this code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body.woocommerce #primary { | |
| float: none; | |
| width: 100%; | |
| } |
Now, all your WooCommerce pages won’t have a sidebar.
If you wish instead to remove it only from some pages, like only on product pages, you can change the condition on line 3 in the first PHP snippet and use a different WooCommerce conditional tag.
Hi,
I am trying to remove the sidebar just on the shop page (keep it in the products and categories), therefore I have replaced is_woocommerce to is_front_page and it worked. (Thanks for the snippet!)
The problem is I can’t get the CSS work the way I want to, the sidebar was on the left and I just want the front page to be full width. Can you shed some light on this? thank you!
I just make it work by using this CSS
body.woocommerce #primary.content-area {
float: none;
width: 100%;
}
Anyways, thanks for the good work 🙂
Hi thanks for reply, but this one make category pages with 100% also.
can you share the code only for single product page?
thanks for sharing this how-to Nicola, much appreciated!
Patrick
You’re very welcome!
Hi,
Thanks, the php code worked when I used the conditional tag so that the sidebar doesn’t show on my product pages and only on the category pages. BUT, the CSS makes full width pages across the site. It would be great if you could please share the CSS so that the Category pages are not full width but shows the sidebar next to the content instead of pushed down to the bottom of the page.
Thanks!
I searched and fiddled, and this does the trick:
.single-product .content-area {
float: none;
margin-right: 0;
width: 100%;
}
Thanks for sharing your code Doris!
thanks for sharing. this works great.
Still present in cart and checkout :/
I’m not a professional so try this at your own risk. I just read the links provided and compiled it. To remove sidebar from all pages on your woocommerce / remove sidebar from checkout and cart pages:
add_action( ‘get_header’, ‘remove_storefront_sidebar’ );
function remove_storefront_sidebar() {
if ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) {
remove_action( ‘storefront_sidebar’, ‘storefront_get_sidebar’, 10 );
}
}
That aside, there’s not an empty space where the sidebar used to be, how do I make everything full-width, including the cart, checkout and account pages?
Thank you!
Hi,
You can use this CSS:
If you don’t know how to use custom CSS you can learn it here.
hello guys,
You have been talking about removing the sidebar but I have a problem the other way around. On my homepage or FrontPage there is no sidebar. But I want the sidebar to be showen here can you help
Thank you for this code, that works perfectly !
You’re welcome!
So… i searched about a dozen different articles trying to get the sidebar off of my main shop page, and none of the solutions worked.. however, i was able to piece together a couple of different things and finally came up with adding this to my ‘additional css’ area:
.woocommerce #primary {
float: none;
width: 100%;
margin: 0;
}
.woocommerce #secondary {
display: none;
}
Good, Jim, but this code will simply hide the sidebar. Search engines and bots will still see it because it’s there in the code, hidden.
This worked for me. Thanks!
I’ve done everything you right about and the sidebar was just pushed below the site content 🙁
and I wan’t it do be removed
I’ve done this and yes it perfectly got rid of the sidebar, but of course left the space where the sidebar was empty. I would prefer if the content stretched to the full width of the screen so that it doesn’t look lopsided, is there a way I can do that instead?
Hi Emily,
The CSS code in the second snippet does exactly that, did you add it to your theme?
I’m using storefront and it’s deleted the sidebar from everywhere except the cart and checkout. Is there a way to delete it from there too? I tried Ana’s solution but that didn’t work for me.
Hi Emma,
You can edit those 2 pages and set their template to Full Width. This snippet is only for the shop pages. Any other page can use the template.
Hi! sorry I’m pretty new to woocommerce. Can you tell me where I’d go to edit those pages / what I’d need to edit? Thanks so much.
They are regular WordPress pages so you can find them in Pages > All Pages. On the right, you can find a drop-down to choose the template of the page. With Storefront active, there’s an option “Full Width” in that dropdown.
Choose that.
Hi!
Your code works as expected and is one of the few that is correct on the Internet.
But I have a question. How can you customize the CSS if some pages are with a sidebar and some are without.
Thanks, Stefan
i tried this and what ana suggested November 4, 2017 at 4:33 PM
the side bars are still there 🙁
Please help, I had uploaded the child theme and added all the snippest code as above but still things didnt change, I had tried to activate the child theme, then only side bar get removed but still the white space where the sidebar existed remained blank.
Any comment please?.
I’m not good in coding.
Hi – How I would use function to remove the sidebar from all pages, apart from the shop pages – where I want to keep the sidebar?
Hello .. been trying these options above and none has worked for me,… kindly help
That snippet works fine with storefront. Thanks bro!
You’re welcome!