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        Get CustomizeWoo.com FREE
 * @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        Get CustomizeWoo.com FREE
 * @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 custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Custom Add to Cart URLs – The Ultimate Guide
    In WooCommerce you can add a product to the cart via a custom link. You just need to use the “add-to-cart” URL parameter followed by the product ID. This tutorial will show you how to create custom URLs to add simple, variable and grouped products to the cart – as well as defining the add […]
  • WooCommerce Visual Hook Guide: Single Product Page
    Here’s a visual hook guide for the WooCommerce Single Product Page. This is part of my “Visual Hook Guide Series“, through which you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can copy/paste). If you like this guide and it’s helpful to you, let me know in the comments! […]
  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: How to Fix the “Cart is Empty” Issue
    For some reason, sometimes you add products to cart but the cart page stays empty (even if you can clearly see the cart widget has products in it for example). But don’t worry – it may just be a simple cache issue (and if you don’t know what cache is that’s no problem either) or […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent 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. Follow @rmelogli

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

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

    1. Sure, if it works for you…

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

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

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

    1. Hi Alex, no idea, sorry. It must be a plugin/theme conflict

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

    1. I already follow the instruction put the code but nothing happens.

      1. Maybe you can remove the sidebar from Avada settings?

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

    1. This would work for a default theme only, or themes that do not override WooCommerce – check with their support team and let me know ๐Ÿ™‚

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

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

  8. 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 ๐Ÿ™‚

  9. 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 ๐Ÿ™‚

  10. 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 ๐Ÿ™‚

      1. Thank you Roberta.

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

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

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

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

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

  16. 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()) { 
  17. 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 ๐Ÿ™‚
  18. 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 ๐Ÿ™‚

  19. 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 ๐Ÿ™‚

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

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

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

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

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

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

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

    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/

  25. 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 ๐Ÿ™‚

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

  27. 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 ๐Ÿ™‚

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

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

          1. Cool, Rudolfo.

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

            1. Read the updated blog now and let me know ๐Ÿ™‚ Cheers!

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

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

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

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

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

  29. 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: https://screencast.com/t/jJt67S5Iu

      Hope this helps ๐Ÿ™‚

  30. 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? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

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