WooCommerce: Remove Sidebar @ Single Product Page

Unless your theme is overriding the WooCommerce sidebar, removing this from the single product page is quite easy!

WooCommerce: remove the sidebar from the single product pages
WooCommerce: remove the sidebar from the single product pages

WooCommerce Snippet: Remove Sidebar on all the Single Product Pages


/**
 * @snippet       Remove Sidebar @ Single Product Page
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=19572
 * @author        Rodolfo Melogli
 * @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        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=19572
 * @author        Rodolfo Melogli
 * @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”:

Divi & WooCommerce: remove the sidebar on the single product page
Divi & WooCommerce: remove the sidebar on the single product page

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”:

Divi & WooCommerce: remove sidebar on archive pages
Divi & WooCommerce: remove sidebar on archive pages

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

66 thoughts on “WooCommerce: Remove Sidebar @ Single Product Page

  1. 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

    1. Hi Jose! Did you ask Divi support?

  2. 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/

    1. Thank you Manas πŸ™‚ It happens all the times, so thank you!

  3. 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;
    	}
    }
    
    1. Excellent πŸ™‚

  4. 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).

    1. Awesome πŸ™‚

  5. 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.

    1. 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 πŸ™‚

  6. 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 πŸ™‚

    1. #4 – Oh no, it ate my code!!! I will write it again here:
      Replace

       <div id="primary" class="content-area"> 

      with:

       <div id="primary" class="content-area-product">
    2. 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!

  7. 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

    1. Hey Mark, you’ll need to see if they are overriding default WooCommerce and “unhook” their custom functions πŸ™‚

    2. 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?

  8. 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.

    1. thank you!!!!! i’ve been trying to resolve this for about an hour. Doh!!

  9. 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

    1. 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

  10. 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.

    1. Thank you Misha! Have you tried asking Divi support?

    2. 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/

  11. 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.

    1. 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()) { 
  12. 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

    1. Tyron, thanks for your comment! You will also need to add some CSS to manage the full widths. And if the

      stays, that’s because of your custom theme, so you will need to customize the PHP/CSS to your specific case. Thank you πŸ™‚
  13. 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?

    1. 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 πŸ™‚

  14. 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.

    1. Hey Misha, thanks for your comment πŸ™‚ In this case, you should ask the Divi support – you’re paying them for this reason πŸ™‚

  15. 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

    1. 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!

  16. 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?

    1. 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!

  17. 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.

    1. 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!

  18. What does the ‘wp’ do in the code?

    1. 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?

    2. 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!

    3. 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! πŸ™‚

  19. 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 http://shopvencedora.com/?post_type=product

    1. 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/

  20. 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

    1. 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 πŸ™‚

  21. how to remove left sidebar on singal product page in corporatre business theme?

    1. 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!

  22. 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?

    1. 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 πŸ™‚

    2. 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: http://entrenew.ch/shop/mein-konto/ or http://entrenew.ch/shop/torte-expressionismus/

    3. 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 πŸ™‚

    4. Cool, Rudolfo.

      So it’s related to the Divi version 2.7.5?
      What a relief, I just thought I must be really blind πŸ˜‰

    5. Read the updated blog now and let me know πŸ™‚ Cheers!

    6. 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

    7. Glad to hear that πŸ™‚ Hope you don’t have 1,000 products! LOL

  23. 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!

    1. 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!

    2. 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.

    3. 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:

      width: 100% !important;
      

      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:

      clear: both;
      

      Hope this helps πŸ™‚

  24. 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

    1. 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: http://screencast.com/t/jJt67S5Iu

      Hope this helps πŸ™‚

  25. Hi Rodolfo in doing this do you get a much larger real estate area for the product description? Denis

    1. Yes, correct πŸ™‚ In some cases I much prefer a “full-width” layout for single products, it’s much cleaner!

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.