If you’ve ever tried to remove the Divi theme WooCommerce sidebar you know how much of a pain this can be.

Why did they make it such a pain?…

I don’t know. Heck, you may have even tried the Divi theme options setting with no luck.

But no fear!…

In this post I’m going to give you a step by step process for getting rid of the sidebar.

Step 1: Set Divi Option for WooCommerce to Full Width

Go to: Divi > Theme Options > Shop Page & Category Page Layout for WooCommerce > Fullwidth

Then click the “Save Changes” button on that page.

Step 2: Unhook the Sidebar

Open up the theme (or child theme, if you’re using one) for Divi.

You can do this in either via FTP and a file editor, or by going to Appearance > Editor > functions.php.

Now add the following code to the bottom of the file.

remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar',10);

Step 3: Remove with CSS

Next open up the style.css for your theme (or child theme if you’re using a child theme).

You can open this up via FTP and a file editor, or again by going to Appearance > Editor > style.css

Add the following code to the bottom of that file.

/* Remove WooCommerce Sidebar */
body.woocommerce .entry-summary,body.woocommerce .woocommerce-product-gallery{padding-bottom:45px;}
.single-product #main-content .container:before,body.woocommerce-page #main-content .container:before{display:none;}
.single-product #left-area,body.woocommerce-page #left-area{width:100%;padding:0px !important;}

Step 4: Clear Your Cache and Refresh

The changes should now be live on your website.

So to make sure you’re seeing them you may need to clear your browser’s cache and refresh your the page.

Should that not work, you may also need to manually refresh your CSS file (style.css). To do view the source of the page and then find your style.css file in that page and click on it to open up a view source page of that file. Then refresh the style.css source page a few times until you see the code you added show up.