Select Page

How to make Single Product pages for WooCommerce full width (in Divi, or any theme)

Jun 15, 2018 | Wordpress Tricks, WordPress Troubleshooting

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) —

[cc lang=”css”] /*** 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;
}
}
[/cc]

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.

UPDATE March 2019: There is a great way to achieve this via functions that hook into your theme and actually prevent the sidebar from being generated at all. This method is arguably better than just using CSS to hide the sidebar, but it does require enough knowledge of code and editing theme files (ideally a child theme!) to implement. Here’s the article on removing the Divi sidebar from WooCommerce pages using hooks.

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.

Special Mention: We are so pumped to be listed as one of DFW’s Restaurant Website Design Companies through Design Rush!

9 Comments

  1. Alex

    thank you, that has helped a lot!

    Reply
  2. FenceTown

    Thanks – that was an easy fix.

    Reply
  3. Kirb Ratilla

    It works perfectly with the latest Divi 🙂 Thanks.

    Reply
  4. Robert Staddon

    Thank you for this article, Torre! Nice work.

    I just came up with an alternate solution that takes a different approach. Instead of visually hiding the Divi sidebar with CSS, it actually hooks into WordPress to completely remove it from the page. An advantage of this approach is that it doesn’t waste WordPress resources to create and download the sidebar just to have it be visually hidden to the user. Here’s the snippit of code if you’d like to check it out: https://www.abundantdesigns.com/2019/03/06/a-better-way-to-remove-the-divi-sidebar-from-all-woocommerce-product-pages/

    Reply
    • Torre Capistran

      Robert, love it! Thank you so much, this will be a ton of help for people who can handle child themes & adding functions to their functions.php file. I’ll post an update to the article with a link to your article too.

      Reply
  5. Yus

    I edited one product at a time – and I have almost 100 items at my shop. It saves me a lot to time!! 🙂

    Thanks a lot!

    Reply
  6. Jivka

    Hi, thank you for the code it works well. I have used the one for adding margins on the full-screen page

    Just on the mobile, the content is still stuck to the edges. would you share a fix for it?

    Reply

Submit a Comment

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

how-to-choose-a-wordpress-theme-thumbnail

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-thumbnail

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-next-level-plugins-cover

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.