When using Divi theme with WooCommerce, making the INSTALLED pages (like Shop, Cart, Checkout, and Account) full-width is easy – it’s just a simple configuration on the actual Edit Page screen for each page. Navigate to edit each page and on the right side of your screen under Divi Page Settings, select Fullwidth for the Page Layout setting (and don’t forget to Update the page).

If you’re trying to make the product pages (for individual products) fullwidth or remove the sidebar from single product pages, it requires some CSS code. Here’s the code we used after modifying from a more general post from Elegant Themes (found here) —

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*** Take out the divider line between content and sidebar for Single WooCommerce Product Pages ***/
.single-product #main-content .container:before {background: none;}

/*** Hide Sidebar for Single WooCommerce Product Pages ***/
.single-product #sidebar, .single-product #sidebar-secondary {display:none;}

/*** Expand the content area to fullwidth for Single WooCommerce Product Pages ***/
@media (min-width: 981px){
.single-product #left-area, .single-product #primary {
width: 100%;
padding: 23px 0px 0px !important;
float: none !important;
}
}

There are two selectors for the second and third rules to accommodate for different syntax in different themes. Hopefully this will work whether you’re using Divi or another theme to make your WooCommerce single product pages fullwidth.

Also thanks to Irving Cares for providing an example for this post. If you want to support a wonderful organization helping their local community, consider donating to Irving Cares.

How To Choose A WordPress Theme For Your Website

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier. This is a 5 page guide with an approximately 4 minute read.

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm 5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

Where To Host Your WordPress Website and Why It Matters

In this guide we discuss what makes 'good hosting' including security, speed, and support. We tell you who we use and why, and give you a coupon! YAY COUPONS! This is a 45 page guide with an approximately 3 minute read.

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm 5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

8 WordPress Plugins That Can Take Your Website To The Next Level

For our business clients, we install some specialized WordPress plugins. Get our list of the 8 next level plugins we love and the use case for each. 

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm

5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

Pin It on Pinterest

Share This