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!