Use the Divi Builder Inside WooCommerce Single Product + Free Layout

Feb 18, 2019 | Free Layout, Woo | 0 comments

If you’ve ever wanted to use the Divi builder on your WooCommerce single product pages without a plugin and without touching child files this will help you get started, I’m only using CSS to accomplish this.

Here are a few use case scenarios where I could see this being a good option but there are lots of reasons to want to have more control over the design of your product pages.

  • You want your products to each have a different feature highlighted. To my knowledge WooCommerce layout injectors add the same layout to every product, but with this CSS method you can tweak each product page to look slightly different for maximum customization.
  • You’re a Divi product vendor and want to showcase your products using the builder. No-brainer, right? I’ll probably eventually use this method myself.
  • You want to be able to add more function or just want more control over the layout of each product. Maybe you want a Bloom signup form in a certain spot on your product page, or want to add Monarch via a shortcode.

Do you want just the code that makes Woo's default single product page fullwidth?

You only need to be comfortable using Divi to use my layout but it would help to also be familiar with HTML, CSS, and know how to use a browser inspect tool. Don’t forget to check my notes.

If you’ve visited my site before you may have noticed my WooCommerce posts are the only ones that don’t have a demo. I haven’t thought it imperative so far for any to have them but this one I do. You can click through the related products to see examples of other uses, they all started with this free layout and I just tweaked them further for inspiration purposes.

I haven’t styled any cart, checkout, shop pages, etc. but as you’ll probably want this all to match I have some CSS for styling all your other Woo parts here.

Use Divi Builder on WooCommerce Single Product + Starter Layout | A Girl and Her Mac

1. Download the Layout

  • Unzip and you’ll see the included .json file.

2. Disable Product Reviews

  • Turn off product reviews in WooCommerce settings (I needed to remove the default tabs which included reviews, see my notes if you want them).

 

3. Enable the Divi Builder & Upload the Layout

  • Click the purple button and upload the .json file through your product page.

 

4. Remove Sidebar

  • Set the page layout to “no sidebar” in page settings.
    • By the way if you want widgets on your page use the sidebar module, and if you put it in a single column the widgets spread across inline similar to footer widgets.

 

5. Edit Product ID

  • In the module labeled Call to Action .intro-cta you’ll want to edit the product ID to match yours to show the correct price.
    • More Woo shortcodes here.

 

6. Add My CSS

  • I’d normally put all my CSS on this page but the chunk for this layout is pretty long. Instead you can grab it from my Git and copy/paste it to wherever you put your custom CSS.
    • Tip: changing colors can be done really quickly using a search and replace plugin.

Get CSS for the layout

 

7. Make It Your Own 🙌

  • Use my modules or completely replace with your own.
    • I’ve added comments to help you see what’s what.
    • If you’re new to CSS this would still be a good learning tool as you can reverse engineer.
    • The photos you see in the free layout are not included but you can get them at Depositphotos.

css code to make product page fullwidth

The CSS can go in your child stylesheet OR appearance > customize > additional CSS OR Divi theme options > custom CSS box.

/***************************************************/
/*** THE MAIN STUFF TO MAKE WOO SINGLE FULLWIDTH ***/
/***************************************************/
.woocommerce .woocommerce-breadcrumb {
    display: none; /* hide woo breadcrumbs */
}
.single-product .clearfix {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
 .single-product .et_pb_section .clearfix, 
 .single-product #main-footer .clearfix, 
 .single-product .container.et_menu_container {
     display: block;
}
 .single-product #main-content .container {
     background: #f0f0f0; /* this color appears behind the default summary section */
     padding-top: 0;
     width: 100%; /* makes it a fullwidth page */
     max-width: 100%; 
}
.single-product #tab-description.woocommerce-Tabs-panel .et_pb_row, 
.single-product #tab-description.woocommerce-Tabs-panel .et_pb_row.et_pb_row_fullwidth, 
.single-product #tab-description.woocommerce-Tabs-panel .et_pb_specialty_fullwidth>.et_pb_row {
    width: 100% !important; /* makes content in tabs fullwidth */
    max-width: 100%;
}
 body.woocommerce.single-product #content-area div.product .woocommerce-tabs ul.tabs, 
 body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs,
 .single-product #tab-description.woocommerce-Tabs-panel h2 {
     display: none; /* hide description tab and default h2 since we're adding in manually */
}
.single-product .et_pb_section h2 {
    display: block !important; /* makes all builder h2s visible because we're hiding them above, it's not possible to be more specific above or use :not() */
}
 .woocommerce.single-product .woocommerce-tabs {
     border: 0;
}
 .single-product .woocommerce-tabs .panel {
     padding: 0 !important;
}
 .woocommerce.single-product div.product .woocommerce-tabs ul.tabs:before {
     border-bottom-color: transparent;
}
 .single-product.woocommerce div.product {
     display: flex;
     flex-direction: column;
}
 .single-product div.woocommerce-tabs.wc-tabs-wrapper {
     order: -1; /* moves our builder content to top - optional */
     margin: 0;
}
 .single-product span.onsale {
    position: relative; /* fixes position of default sale badge */
}
.woocommerce.single-product ul.products li.product .onsale { /* badge on related products */
    position: absolute;
}

 

Notes:

  • I’m not positive this method would be the best solution for WooCommerce/Divi sites with a lot of products. If you have a big store you may be better off overwriting the Woo single-product.php file via a child theme or getting a WooCommerce plugin that can inject a Divi layout into product pages, there are several out there in the Divisphere, although that method doesn’t allow for every product being customized differently like this does.
  • I’m not enabling product reviews because I needed to remove the default tabs, but it looks like you can add them in using a shortcode with this plugin. I haven’t tried it or styled it before but if you want reviews it’s an option.
  • I use a mix of custom CSS and module settings, I definitely recommend going through every module and looking at each panel. I’ve added labels using respective class names, most spacing is controlled in the rows.
  • I mix my units and use em for certain things, px for others, etc. It may seem odd but I have my reasons, change them to your preferred units if you’re comfortable doing so.
  • The fonts you choose will greatly affect the look and my font-related CSS will probably need to be tweaked. I’m using Permanent Marker font on the free layout (but I don’t necessarily recommend it lol).
  • I kept the media queries with their respective sections. I could have consolidated but I need my code chunks to make visual sense to me. You should edit it to your liking if you know how.
  • Divi requires lots of instances of !important, I can’t do anything about that.
  • I haven’t styled any cart, checkout, shop pages, etc. but as you’ll probably want this all to match I have some CSS for styling all your other Woo parts here.
  • You’ll see I added an anchor at the bottom to be able to have a spot near the add to cart section for my purchasing buttons to scroll to. I had to do this because I saw no ID I could link to in the default Woo summary section.
  • The colors I’m using:
    • #bc741c
    • #00adad
    • #00707a
    • #222222
    • #f0f0f0