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!
So what if I only want to remove it from single product pages only?
Great question! I imagine you use the is_product() function instead of is_woocommerce() in the mytheme_body_classes() function and wrap that same test into the mytheme_remove_divi_sidebar(). I haven’t tested it yet but what if you tried this?
https://gist.github.com/robertstaddon/6933759c49d5c8842144d3adaf6320d2
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.
Thanks! I also added some CSS so it’s not super full width on the entire window:
.product-template-default #left-area{
max-width:1200px;
margin:0 auto;
}
Worked great for me, thanks a lot !
This was SOOOO helpful. I just wasted so much time until I found your site. Thank you!
Dude,
You saved a few hours of my life.
God bless you.
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.
Not worked for extra themes. Help me please
Ka Rawe! Appreciate your work and know you’re saving people endless time and frustration.
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….
Hi,
It works like a charm, however, it makes my pop ups also full width. Is there a solution for that?
Hi can you please tell me if this can be used for multiple custom post types and the blog pages?
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?
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.