A Better Way to Remove the Divi Sidebar from All WooCommerce Product Pages

by | Mar 6, 2019 | WordPress Tweaks

The popular Divi theme from Elegant Themes provides a handy option in their settings to remove the sidebar from the WooCommerce Shop Page & Category Page layouts. They also provide a nice “Divi Page Settings” box on each product page to show or hide the sidebar on that individual product page.

The Need to Remove the Sidebar on All Product Pages

However, the sidebar is on by default for every single WooCommerce product! What if you just wanted to remove the sidebar for every single product? Perhaps you’ve imported a lot of products or maybe you’d rather not have to remind your clients to manually turn it off every time they add a new product to their site.

Also, what if you’re not using the Divi Builder on your product pages and you’d like to speed up your product editing by completely disabling the Divi Builder on all of your Product post types? This presents a problem because it would also remove the “Divi Page Settings” box that allows you to hide the sidebar on that product page! 

Why Visually Hiding with CSS May Not Be the Best Option

Of course, you could use custom CSS to visually hide the sidebar and to adjust your page width. However, I think it’s a better idea to hook into your theme and stop the content from being generated in the first place. Why? Because the CSS “display: none;” property only visually hides the content. The content is still being generated by WordPress and still being loaded into your visitor’s page. So even though they can’t visually see it, it is still able to be read by search engines and some screen readers. Why are we using up our server resources to generate the sidebar and client bandwidth to download the sidebar if our only intention is to hide it?

A Simple Snippit of Code

Below is a snippit of code with a couple of functions that you can use to completely remove the sidebar from all WooCommerce product pages (as well as the shop and category pages) in the current version of Divi (Divi 3). You would need to place this in your Divi child theme’s functions.php file. Or you could use it in a plugin such as My Custom Functions, but I would generally recommend using a Divi child theme if you are able.

The first function removes the sidebar while the second adjusts the CSS to allow WooCommerce pages to go full width by removing a few classes from the body tag (similar to how we explained doing this for BuddyPress and bbPress pages). Here you go: 

A couple of notes:

  • This only hides the sidebar on WooCommerce generated pages, such as the shop page, category pages, and product pages. To hide the sidebar on pages with WooCommerce shortcodes, such as “My Account”, “Cart”, and “Checkout”, you’ll need to manually hide it using those page’s “Divi Page Settings” box.
  • The “<?php” at the top is only needed once at the top of the functions.php file. If you are adding these functions to an existing functions.php file, you won’t want to re-add this.

Enjoy and let us know how it works for you!



  1. Michael

    So what if I only want to remove it from single product pages only?

      • Martin

        Hello, thank you for this, unfortunately, this does not work on the Product Page only. It makes the Product Page full width, but the sidebar still appears (but it’s pushed to the bottom of the page).

        That said, the “is_product” check for CSS works (because the page is resized), but hiding the sidebar does not.

        Any help would be appreciated!

        Thank you.

  2. Andrew Arkwell

    Thanks! I also added some CSS so it’s not super full width on the entire window:

    .product-template-default #left-area{
    margin:0 auto;

  3. Nouben

    Worked great for me, thanks a lot !

  4. Melissa Shoemaker

    This was SOOOO helpful. I just wasted so much time until I found your site. Thank you!

  5. Evgenii

    You saved a few hours of my life.
    God bless you.

  6. Marna Towne

    This worked great for Categories, but sub categories are odd columns. I have it set for 5 col. but first row is 4, second is 3, 3rd and 4th are 2, etc.

  7. Pe Jung Labs

    Not worked for extra themes. Help me please

  8. ben

    Ka Rawe! Appreciate your work and know you’re saving people endless time and frustration.

  9. Ng Kalimba

    hey, thanks a lot for this post….it seemed like voodoo earlier…
    now i feel like am on top of the world bcz of you…

    am sure you are blessed and my wish is that you remain blessed….

  10. Gaby


    It works like a charm, however, it makes my pop ups also full width. Is there a solution for that?

  11. Theresa

    Hi can you please tell me if this can be used for multiple custom post types and the blog pages?

  12. Jonathan

    Thanks so much for sharing this. It’s the most promising solution I’ve found so far.

    Unfortunately, as of Jan 2021, it’s only causing the sidebar to get pushed to the bottom of the product area. Do you have an update for your code, that works for latest version of Divi?

    • Jonathan

      Sorry. Missed something. I was trying to only apply it to single product pages, and not the catalogue page, etc. I followed your suggestion in the comments. And that’s what made it push sidebar to under the now full-width product content. It’s as if the is_product() test is returning ‘false’ on Divi product page.



  1. How to make Single Product pages for WooCommerce full width (in Divi, or any theme) | Hooked On Code | Professional WordPress Websites for Businesses in Dallas and THE WORLD - […] UPDATE March 2019: There is a great way to achieve this via functions that hook into your theme and…

Submit a Comment

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

Notify me of followup comments via e-mail. You can also subscribe without commenting.