Unless your theme is overriding the WooCommerce sidebar, removing this from the single product page is quite easy!
WooCommerce Snippet: Remove Sidebar on all the Single Product Pages
/**
* @snippet Remove Sidebar @ Single Product Page
* @how-to businessbloomer.com/woocommerce-customization
* @sourcecode https://businessbloomer.com/?p=19572
* @author Rodolfo Melogli, Business Bloomer
* @testedwith WooCommerce 3.2.6
*/
add_action( 'wp', 'bbloomer_remove_sidebar_product_pages' );
function bbloomer_remove_sidebar_product_pages() {
if ( is_product() ) {
remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
}
}
Storefront Theme – Remove WooCommerce Sidebar on the Single Product Page
/**
* @snippet Remove Sidebar @ Single Product Page for Storefront Theme
* @how-to businessbloomer.com/woocommerce-customization
* @sourcecode https://businessbloomer.com/?p=19572
* @author Rodolfo Melogli, Business Bloomer
* @testedwith WooCommerce 3.2.6
*/
add_action( 'get_header', 'bbloomer_remove_storefront_sidebar' );
function bbloomer_remove_storefront_sidebar() {
if ( is_product() ) {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
}
}
Divi Theme – Remove WooCommerce Sidebar on the Single Product Page
This will not need any coding. Divi theme already removes the WooCommerce sidebar in their function and adds back the default Divi sidebar.
To remove the sidebar from products, go to Product > Edit and from the right sidebar select “Page Layout > Full Width”:
If you also would like to remove the Divi sidebar from the archive pages, go to Divi > Theme Options > General Settings and set the “Shop Page & Category Page Layout for WooCommerce” to “Full Width”:
Hello Rodolfo,
Thanks you so much for sharing all snippets and tips.
I was looking for the way to correct the “bug” about the size of the image (and thumbnails) on storefront theme without the sidebar on left, and found this CSS code:
/* For laptop and screens higher than iPad Pro */ /* Resize the product image if the Sidebar is not displayed */ @media screen and (min-width: 1025px) { .single-product div.product .woocommerce-product-gallery { width: 39.1304347826%; float: left; margin-right: 4.347826087%; margin-bottom: 3.706325903em; position: relative; /* optional?? */ } }Alternatively I found also this piece of php code, what do you think about?
// Remove Sidebar on the Categories post, Post, Single Product pages, Shopping Cart, Order Validation and My Account pages. add_action( 'wp', 'custom_remove_sidebar_shop_page' ); function custom_remove_sidebar_shop_page() { if ( is_category() || is_single() || is_product() || is_cart() || is_checkout() || is_account_page() ) { remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 ); add_filter( 'body_class', 'custom_remove_sidebar_class_body', 10 ); } } function custom_remove_sidebar_class_body( $wp_classes ) { $wp_classes[] = 'page-template-template-fullwidth-php'; return $wp_classes; }Let me know,
Oly
Sure, if it works for you…
Hi Rodolfo;
Love all your post. Learned a lot from you. Keep it up.
I have my storefront layout set to left-sidebar. However, only on the single product page would I like to have the sidebar move to the right side. I tried anything and everything and can’t get it to work.
Any suggestions please?
Thank you
Lode
Hi Lode, you can do that with a bit of CSS, and specifically by changing the “float” value from left to right. Hope this helps!
Ciao Rodolfo, ho un problema con woo commerce: quando lo attivo nella versione inglese del sito http://www.videomuzic.eu la colonna di destra sparisce, nella versione in italiano non lo fa. Hai qualche idea? Grazie, Alex
When I activate woo commerce in the English version of the site, the entire right column (sidebar) disappears. Consequently the photos and texts of the other columns expand. this happens only for the English version, the Italian one is fine. at the moment the shop is deactivated,
any idea?
Thanks
alex
Hi Alex, no idea, sorry. It must be a plugin/theme conflict
Hi can anyone help me with my problem
I used to manage to put sidebar in my frontshop page and also in the archive. the only problem is I dont want to show the sidebar in the single product page please see image
https://ibb.co/k9qtfxB
I look for codes and snippet for this and nothing works for me.. I used avada for the theme….
please someone help me and I hope I am in the right board thank you.
I already follow the instruction put the code but nothing happens.
Maybe you can remove the sidebar from Avada settings?
Does not seem to work with Yootheme Pro?
I added the snippet plugin and the code as described but sidebar still shows. had to hide it with CSS for now. (I would rather not do it that way).
This would work for a default theme only, or themes that do not override WooCommerce – check with their support team and let me know 🙂
Hi Rodolfo,
I’m working with divi and i have already a lot of products. So, it will be so hard to go one by one changing the page layout to full width in each one.
I want to have the sidebar in the main shop and categories pages but NOT in the single product page.
So, which way do you recommend me?
Thanks
Hi Jose! Did you ask Divi support?
I regularly visit your website to learn more about WooCommerce. Today when searching in Google about any other method to remove sidebar from single product page, I stumbled upon this post, where the site owner blindly copied your code without giving your website any attribution: woosnip.com/snips/remove-sidebar-on-single-product-page/
Thank you Manas 🙂 It happens all the times, so thank you!
Small addition: when You already removed sidebar from single product page, all content is little kicked to left or right site of screen. To center it, use this CSS magic:
@media (min-width: 768px) { .single-product.left-sidebar .content-area, .single-product.right-sidebar .content-area { width:100%; float:left; } }Excellent 🙂
I try use this code to remove sidebar from my woo cart page.
function cart_remove_sidebar( $is_active_sidebar, $index ) { if( $index !== "sidebar-1" ) { return $is_active_sidebar; } if( ! is_cart() ) { return $is_active_sidebar; } return false; } add_filter( 'is_active_sidebar', 'cart_remove_sidebar', 10, 2 );In this solution I can remove sidebar only from one specific pages (cart, product, checkout etc).
Awesome 🙂
Just found this post – my solution is a css based one.
My solution allows the cart page, the single product page, and the checkout page, all to be controlled individually as required.
/* hide sidebar on cat page */ #secondary { display: none; } /* set the content width to 100% to fill page */ #primary, .content-area { width: 100%; } /* hide sidebar on cart */ .woocommerce-cart #secondary { display: none; } /* set the content width to 100% to fill cart page */ .woocommerce-cart .content-area { width: 100%; } /* hide sidebar on checkout */ .woocommerce-checkout #secondary { display: none; } /* set the content width to 100% to fill checkout page */ .woocommerce-checkout .content-area { width: 100%; }Use whichever css needed to show/hide sidebar and set the rest to fill the empty space – for whichever page it needs to be applied to… or… all three.
Roberta – thanks so much for your comment! Yes, this is good, but display:none is not a great idea as the HTML is still there, visible in the page source. Also #primary and #secondary CSS IDs are theme specific and might not work with other themes 🙂
Thank you Roberta.
This is my solution for Storefront theme, single product page without a sidebar, 100% wide:
1. Apply Storefront Theme – Remove WooCommerce Sidebar on the Single Product Page snipet.
2. Go to your_theme_directory/storefront/inc/woocommerce/sorefront-woocommerce-template-functions.php
3. Search for: function storefront_before_content (about line 16)
4. Replace with
5. Go to the Customizer, Additional CSS and add this line: .content-area-product {width:100%;}
6. Ta-da! You now have a full-layout product page, free of the vicious sidebar 🙂
#4 – Oh no, it ate my code!!! I will write it again here:
Replace
with:
Thanks for your comment Sorina 🙂 Overriding core code is not a great idea. I’m publishing your comment anyway however, so that others can learn too! Thanks a lot!
Hi
What if the theme is overriding the content layout? Is there anyway to make this snippet work.
I use the asteroid theme, which I am very happy with but need to add a woocommerce store but this theme is not really designed for that. However, woocommerce said there layout was adjusted recently to work better with all themes.
It does work better but i cant get rid of the sidebars.
kind regards
mark
Hey Mark, you’ll need to see if they are overriding default WooCommerce and “unhook” their custom functions 🙂
How does one “unhook” custom functions to get rid of the sidebars on all WooCommerce pages?
Apparently, I’m using a combination of theme/page builder (GeneratePress/Elementor) that overrides the snippet that does away with the sidebars on WooCommerce pages.
I added that snippet using the Code Snippets plugin.
I’m stumped, and I’d hate to get rid of GeneratePress/Elementor, a wonderful combination. But I may just have to try Shopfront if I can’t solve the sidebars problem.
It seems strange that WooCommerce doesn’t come with an in-box option to get rid of the sidebars. Or am I missing something?
I found the solution here:
https://docs.generatepress.com/article/sidebar-layout/#using-a-function
🙂
Hi everyone,
There are still a lot of folks like me who uses woocommerce and storefront, and so I believe this would be helpful for this article.
What you need actually is “nothing” on the sidebar to make it automatically collapse and go single product full view.
I hope this helps. You may visit my shop for its actual look.
Nice trick 🙂
thank you!!!!! i’ve been trying to resolve this for about an hour. Doh!!
It doesn’t work with me and i don’t know why
I add this in wp-content/themes/twentyseventeen/functions.php
I used another code from this website – This one work, i add remover sidebar code after this but doesn’t work
Ciao Donato 🙂 Thanks so much for your comment! Unfortunately this is custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~R
Hi!
I’m using Divi and I would like to remove sidebar from all products pages. Removing sidebar from a single product page in Divi is easy, but removing it from multiple pages seems to be next to impossible.
I’d really appreciate if you could recommend a simple solution (like adding an CSS code in Divi settings) for a code-challenged person like myself.
Thank you very much.
Thank you Misha! Have you tried asking Divi support?
Hello Misha! I know your inquiry is over a year old now, but I was having the same problem with wanting to hide the WooCommerce sidebar on all product pages in the latest version of the Divi theme. And I didn’t want to just visually hide it with a CSS rule but actually remove it from the page so that it wouldn’t be taking up unnecessary bandwidth. I finally found a solution and wrote a little snippit of code to accomplish this! Maybe this can help someone else out having the same question:
https://www.abundantdesigns.com/2019/03/06/a-better-way-to-remove-the-divi-sidebar-from-all-woocommerce-product-pages/
I’ve used this code to remove the sidebar on the product page and it doesn’t affect the category pages. But I also need some attribute pages. They were easy to create and use the same code as the categories do, but they’re showing up without the sidebar. Any idea whether the code to remove the sidebar from the product pages would affect the attribute archives? And if so, how to get around it?
I can’t find anything else that would affect it.
Hey Flo, thanks for your comment! This PHP line tells the function to run only on the single product page – just remove that as well as the closing “}” below:
if (is_product()) {this code makes the sidebar invisible, it does nothing to remove the div that the sidebar is placed in. the format ends up being wonky because the left side of the screen still has an invisible sidebar which causes everything else to be far more squished together. would not recommend this solution
Tyron, thanks for your comment! You will also need to add some CSS to manage the full widths. And if the
Hi Rodolfo,
Thanks to share your knowledge about Woocommerce.
I wonder if after all this time a solution to set no sidebar to all single products came out.
Is it still needed to be done by editing directly the DB?
Hey Raphael, thanks for your comment. There is no DB editing, it’s only a simple PHP snippet that goes in your child theme. Also, this really depends on the WP theme you use, it’s also up to them to provide the functionality 🙂
Hi!
My problem seems to be a little different..
There’s a standard way of changing the layout of a single product page in Divi: you just select either a full-width layout or one of the sidebar layouts. The problem is you can only do it for a single product page at a time. Is there a way to switch product page layout for multiple (or all) products at the same time, for instance, changing the layouts to right sidebar? I can’t possibly do it for each individual product page. It’s a nightmare!
If you have any ideas, please help.
Thank you.
Hey Misha, thanks for your comment 🙂 In this case, you should ask the Divi support – you’re paying them for this reason 🙂
Ciao Rodolfo,
questo semplice quanto efficace post mi ha risolto un problema: togliere la sidebar dai prodotti Woocommerce utilizzando il tema DIVI.
Ho però una questione ora: come faccio ad eliminare la barra laterale da tutti i prodotti? con il metodo che hai suggerito dovrei farlo uno ad uno.
Esiste, che tu sappia una configurazione di tema che possa agire a livello generale. Io non riesco a travarla.
Complimenti per gli articoli e grazie in anticipo.
Carmine
Grazie / Thank you Carmine!
Per rimuovere la sidebar da tutti i prodotti in bulk, la tua unica opzione é farlo tramite database (ti premetto che é una operazione molto pericolosa, quindi stai molto attento) / to remove the sidebar from all products, your only choice is to edit the database itself (be careful as this is a really delicate operation).
Spero sia d’aiuto / Hope it helps!
I spent hours trying to figure out how to remove these sidebars , then I found this post. Thanks heaps, problem solved….. well, almost. The sidebar is gone, but the page is not full width….. do you have a simple fix for this?
Thanks for your comment Greg! In this case, you’ll need to add some CSS as well in order to make the page full width, and this strictly depends on your theme. Sorry but I can’t help, hope you find a fix!
Now I’m thinking it has something to do with another theme I had installed and some code hiding somewhere. Your snippet removes the sidebar but the main body content stays at about 72% width. Just need to figure out why. Thanks.
Ryan, excellent, glad you figured it out. You will also need to add some CSS to make the body full width, the PHP only removes the sidebar but doesn’t change the styling. Let me know!
What does the ‘wp’ do in the code?
Hey Emily, thanks for your comment! “wp” is a default WordPress hook (https://codex.wordpress.org/Plugin_API/Action_Reference) that makes the function run at a very specific moment. In this case my goal was to make sure we’re removing the sidebar after this is added by a theme or plugin (otherwise, we would remove it and then the theme adds it back). Makes sense?
Hi, Annette here from Tennessee. Strange new issue with Divi and the newest Woo Commerce.
I activated the Woo C and it added a giant Home to my static home page and also made the page blocked as opposed to full page. All the setting are set to full page. I even removed the shop module from the home page to see if that would put the home page back to the full page look. By deactivating the Woo C the home page returned to “normal”.
What do you think is the conflict here? Love to know, just spent 3 hours looking through php and worse. Nothing helps and DIVI – no help there. Any ideas would be very appreciated. Thank you!
Hey Annette thanks for your comment! I guess the best thing to do here is contacting Elegant Themes support, as they should be able to help you (this is the benefit of using a premium theme). Let me know how it goes! 🙂
Having the same issue. I can get a 4th column, however since the sidebar is still invisibly present it shifts the 4th column to the next row. I have tried adding several css fixes. Any help is appreciated https://shopvencedora.com/?post_type=product
Hey there, thanks for your comment! You have several problems on that page – you successfully removed the sidebar but the CSS “container” for the products have a width and padding you’re not meant to have. Also, to change the number of products per row please take a look at https://docs.woocommerce.com/document/change-number-of-products-per-row/
Hello.
I’ve been trying to remote completely the sidebar on all my single pages products.
I’ve copied your code above in my functions.php and nothing.
I’m using StyleShop by elegant themes.
It’s been driving me completely crazy as im a new user. I would really like ‘step by step’ explications starting from opening public files. Please help… it’s been 5 hours I’m trying to find out
Thank you
Hey Marianna, thanks for your comment! Did you get this sorted? If not, this must be something related to your custom theme – my snippet would work with a default, non-customised one. Let me know and in case I’ll see if I can help 🙂
how to remove left sidebar on singal product page in corporatre business theme?
Hey Laila, thanks for your comment 🙂 I’m not sure about your theme, but this snippet should work with most of them. Just place this in your functions.php and see what happens!
Hi Rudolfo
I regulary get pointed from Google to your pages when dealing with WooCommerce specific questions.
Also this time, when I was looking for a code to get the side bar removed. I do use Divi theme and have activated full width, but the code isn’t working with me. The page is entrenew.ch/shop
Any idea why?
Hey Natascha thanks for your comment 🙂 This snippet removes the sidebar on the single product pages ONLY – if you want to remove it from all WooCommerce pages just use this “lighter” version:
// Remove sidebar on all Woo Pages add_action( 'wp', 'bbloomer_remove_sidebar_all_woo_pages' ); function bbloomer_remove_sidebar_all_woo_pages() { remove_action('woocommerce_sidebar','woocommerce_get_sidebar',10); }Let me know 🙂
Hi Rudolfo
Still not working. Both codes won’t remove the sidebar neither on single product page nor all WooCommerce pages 🙁
This is really odd 🙁
In case you want to have a look: https://entrenew.ch/shop/mein-konto/ or https://entrenew.ch/shop/torte-expressionismus/
Hey Natascha – that doesn’t look like the WooCommerce sidebar 🙂 In fact, I just went through Divi theme’s code and they already run the:
remove_action('woocommerce_sidebar','woocommerce_get_sidebar',10);I’m about to update this blog with the fix for Divi and – good news – you don’t need any coding for that 🙂
Cool, Rudolfo.
So it’s related to the Divi version 2.7.5?
What a relief, I just thought I must be really blind 😉
Read the updated blog now and let me know 🙂 Cheers!
Wicked!
At laaaast!!! Btw; it also applies to Cart, Checkout and My Account – but this change is made on each page.
Such a simple thing, although it’s good to be able changing it without code, it’s cumbersome to make it for each product/page.
But this is a minor disadvantage. It’s working, yay!
Many thanks Rodolfo
Glad to hear that 🙂 Hope you don’t have 1,000 products! LOL
Hello Rodolfo,
I stumbled upon your website last night and spent hours reading through the documentation and watching your videos. Thank you so much for this! This is much appreciated!
I have a quick question, when I added the code, I agree that the single product page looks more cleaner, however, now my images are extremely huge! I went into the WC settings and made the single product size smaller but that didn’t work. I then went back and checked ‘Hard Crop’ but still the image is still large and takes over almost the entire page. Any ideas or tricks that you would suggest I do?
Much appreciated!
April, thanks a lot for your feedback 🙂 I’m almost sure your CSS code is forcing images to be 100% width. You can change that to “auto” so they will be taking their natural size, or otherwise change the width to whatever you like.
If you give me your website link I will get back to you with the exact CSS. Thanks!
Hi Rodolfo,
Thanks for your response. I tried to change the css code using firebug to auto but it still doesn’t work. Also, my Related Products now changed to “You may also like” is misplaced because I also removed the additional tabs. My store isn’t open yet so it’s not public.
Hey April, thanks for following up! I would need to take a look at the CSS to give you an exact fix. Possibly, your CSS has something like:
and therefore you need something “stronger” to apply the width: auto.
Also, for the other issue, simply add this CSS to your “You may also like” heading:
Hope this helps 🙂
Hi there, Rodolfo – just come across your tutorials and your site and am SO pleased I have done. I’m watching the videos right now but I have a question for you if I may?
I used your php code in my functions.php (yes I’m using a Child theme with my Divi theme) but it did not get rid of the sidebar on the product pages. Any ideas what I should be looking for? Divi does have a section where you can switch off the sidebar on category and main shop page but it doesn’t remove the sidebar from the product pages.
Any help would be much appreciated. – Many thanks – Chris
Hey Chris, thank you so much! In regard to Divi, there is an additional step you need to do, and it’s in the settings.
Go to Divi > Theme Options > General Settings and set the “Shop Page & Category Page Layout for WooCommerce” to “Full Width”.
Screenshot: https://screencast.com/t/jJt67S5Iu
Hope this helps 🙂
Hi Rodolfo in doing this do you get a much larger real estate area for the product description? Denis
Yes, correct 🙂 In some cases I much prefer a “full-width” layout for single products, it’s much cleaner!