COMPLEXITY

Easy

TIME

30 Minutes

ASSUMPTIONS

  • Basic knowledge on Divi and WooCommerce.
  • Divi and WooCommerce are already installed and configured.
  • You have some products with assigned categories in WooCommerce.

 

VERSIONS

Divi 4.9.4
WooCommerce 5.2.2

In this tutorial we are going to show you how to turn your boring Divi WooCommerce Single Product Pages into a conversion machine for your eCommerce projects. We will utilize a bunch of design features found right in any stock Divi and WooCommerce site that you can tweak to fit your brand and your message. The goal here is to show you as many tools as possible to get your creative juices flowing, so don’t worry if what we are building today is a little less Da Vinci and a little more Picasso.

Now feel free to follow along with the video, or skip to the text instructions at the bottom.

Preview:

Custom Divi WooCommerce Single Product Page

Video Tutorial

Text Instructions

If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll down and you will see everything as it relates to the steps found in the video tutorial.

Step 1) Add New Divi WooCommerce Single Product Page Template in Theme Builder and Create Product Details Row

Head over to Divi > Theme Builder > Add New Template > Products > All Products > Create Template

All Products > Add Custom Body > Build Custom Body > Build From Scratch > Start Building

Add Two Column Row

Add Woo Images Module in Column 1, no changes or styling needed here

Add Woo Title Module to Column 2

Woo Title Module

Design Tab

Title Text

Title Font: Poppins
Title Font Weight: Bold
Title Text Color: Black
Title Text Size: 36px (Desktop) 28px (Mobile)

Add Woo Price Module to Column 2

Woo Price Module

Design Tab

Price Text

Price Font: Roboto
Price Font Weight: Bold
Price Text Color: #0fe5a8

Add Woo Description Module to Column 2

Woo Description Module

Design Tab

Text

Text Font: Roboto
Text Font Weight: Light
Text Size: 18px

Add Woo Add to Cart Module to Column 2

Woo Add to Cart Module

Design Tab

Text

Text Font: Roboto
Text Font Weight: Light
Text Size: 18px

Button

Use Custom Styles for Button: YES
Button Text Color: #ffffff
Button Background: #0fe5a8
Button Border Width: 0px
Button Font Style: Uppercase
Button Padding Top: 10px
Button Padding Bottom: 10px

Add Woo Rating Module to Column 2

Woo Rating Module

Design Tab

Star Rating

Star Rating Color: #ffd700
Star Rating Size: 18px

Text

Text Color: Black

Add Woo Meta Module to Column 2

Woo Meta Module

Content Tab

Elements

Show SKU: Off
Show Tags: Off

Design Tab

Text

Meta Font Style: Uppercase
Link Text Color: #5430ce

Add Text Module to Column 2

Text Module

Content Tab

Text

Body: “Get FREE SHIPPING on orders over $100!”

Background

Color: #5430ce

Design Tab

Text

Text Font: Poppins
Text Font Weight: Bold
Text Font Style: Uppercase
Title Text Color: White
Title Text Size: 18px
Alignment: Centered

Spacing

Padding: 15px 15px 15px 15px

Add Blurb Module to Column 2

Blurb Module 1

Content Tab

Text

Title: “100% guarantee”
Body: “Don’t like it? Get a full refund.”

Image & Icon

Use Icon: YES
Icon: House

Design Tab

Image & Icon

Icon Color: #0fe5a8
Icon Placement: Left

Title Text

Title Font: Poppins
Title Font Weight: Bold
Title Text Color: Black

Add Blurb Module to Column 2

Blurb Module 2

Content Tab

Text

Title: “Secure Checkout”
Body: “We encrypt all transactions.”

Image & Icon

Use Icon: YES
Icon: Credit card

Design Tab

Image & Icon

Icon Color: #0fe5a8
Icon Placement: Left

Title Text

Title Font: Poppins
Title Font Weight: Bold
Title Text Color: Black

Step 2) Add Custom WooCommerce Cart Notices Row

Add Single Column Row and move it above the product details row

Add Woo Cart Notice Module

Woo Cart Notices Module

Content Tab

Background

Color: #5430ce

Design Tab

Text

Text Font: Roboto
Text Font Weight: Light
Text Size: 21px

Button

Use Custom Styles for Button: YES
Button Text Color: #ffffff
Button Background: #0fe5a8
Button Border Width: 0px
Button Font Style: Uppercase
Button Padding Top: 10px
Button Padding Bottom: 10px

Step 3) Add Custom WooCommerce Breadcrumbs Row

Add Single Column Row and move it to the top of the page

Add Woo Breadcrumb Module

Row Settings

Content Tab

Background

Color: Black

Design Tab

Sizing

Width: 100%
Max-Width: 2560px

Spacing

Margin: 0px (top) 0px (bottom)

Woo Breadcrumb Module

Design Tab

Text

Text Font: Roboto
Text Font Weight: Light
Text Color: White
Text Size: 16px

Spacing

Padding: 10px (top) 10px (bottom) 10% (left)

Step 4) Add Product Review Section

Add a New Section

Add Single Column Row

Add Woo Reviews Module

Section Settings

Content Tab

Background

Color: #f9f9f9
Image: Dot Pattern

Row Settings

Content Tab

Background

Color: White

Design Tab

Box Shadow

Box Shadow: Option 2

Woo Reviews Module

Content Tab

Elements

Show Author Avatar: YES (Desktop) NO (Mobile)

Design Tab

Image

Image Rounded Corners: 50px

Review Count Text

Review Count Font: Poppins
Review Count Font Weight: Semi-Bold
Review Count Font Style: Uppercase
Review Count Text Alignment: Centered
Review Count Text Color: Black
Review Count Text Size: 34px (Desktop) 21px (Mobile)

Form Title Text

Form Title Font: Poppins
Form Title Font Weight: Semi-Bold
Form Title Text Size: 21px

Meta Text

Meta Font: Poppins
Meta Font Weight: Regular
Meta Text Color: #5430ce
Meta Text Size: 18px

Comment Text

Comment Font: Roboto
Comment Font Weight: Light
Text Size: 16px

Star Rating

Star Rating Color: #ffd700
Star Rating Size: 18px

Button

Use Custom Styles for Button: YES
Button Text Color: #ffffff
Button Background: #0fe5a8
Button Border Width: 0px
Button Font Style: Uppercase
Button Padding Top: 10px
Button Padding Bottom: 10px

Spacing

Padding: 5% 0px 5% 5%

Add Image Module

Image Module 1

Content Tab

Image

Image: DE Logo Image

Design Tab

Sizing

Max-Width: 150px

Animation

Animation Style: Roll

Advanced Tab

Position

Position: Absolute
Location: Top Left
Vertical Offset: -75px
Horizontal Offset: -75px

Add Image Module

Image Module 2

Content Tab

Image

Image: DE Logo Image

Design Tab

Sizing

Max-Width: 150px

Animation

Animation Style: Roll

Advanced Tab

Position

Position: Absolute
Location: Bottom Right
Vertical Offset: -75px
Horizontal Offset: -75px

Step 5) Add WooCommerce Related Products Row

Add a New Section

Add Single Column Row

Add Woo Related Product Module

Woo Related Product Module

Design Tab

Overlay

Overlay Icon Color: #5430ce
Overlay Icon: Magnifying Glass

Star Rating

Star Rating Color: #ffd700
Star Rating Size: 18px

Title Text

Title Font: Poppins
Title Font Weight: Semi-Bold
Title Text Alignment: Centered
Title Text Size: 34px

Product Title Text

Product Title Font: Poppins
Product Title Text Alignment: Centered
Product Title Text Size: 26px (Desktop) 21px (Mobile)

Price Text

Price Font: Roboto
Price Font Weight: Heavy
Price Text Alignment: Centered
Price Text Size: 21px

Add Button Module

Button Module

Content Tab

Text

Button: “Shop All”

Link

Button Link URL: /store/ (Or whatever URL you are using for your store)

Design Tab

Alignment

Button Alignment: Centered

Button

Use Custom Styles for Button: YES
Button Text Color: #ffffff
Button Background: #5430ce
Button Border Width: 0px
Button Font Style: Uppercase
Button Padding Top: 10px
Button Padding Bottom: 10px

Box Shadow

Box Shadow: Option 3

PRO-TIP: If you are not sure how to import this layout, please check out this article on How to Import Divi Builder Layouts.

Divi WooCommerce Single Product Page the BodyCommerce Way

Now let’s take a look at that amazing Divi WooCommerce Single Product Page we just built and spice it up with some of the powerful features built right into BodyCommerce.

Preview:

Custom Divi WooCommerce Single Product Page with BodyCommerce

Divi WooCommerce Single Product Page Enhancements

Single Product Page with BodyCommerce
BodyCommerce has a diverse suite of modules and modifications to the core Divi WooCommerce features that can enhance your eCommerce projects all in one plugin.

Custom Product Gallery Module

The BodyCommerce Product Gallery module extends the boring WooCommerce and Divi offering with multiple new gallery modes. The one used in this image is the Vertical Slider, but you also have options for Horizontal Slider, Single Slider, and Expandable galleries.

Customized Product Variation Swatches

This is one of the big guns in the BodyCommerce arsenal of features. It allows you to get rid of the combo box drop-downs for variations and replace them with colors, labels, or even images. This is amazing for showcasing things like different materials, textures, or anything that is better conveyed visually.

Sharing Module

More than ever it is important to give your customers a way to easily share your products on various social media platforms. This BodyCommerce module makes it super easy to share your WooCommerce products on 7 platforms.

Customer Loops will Change Your Divi and WooCommerce Game

Single Product Page with BodyCommerce

Product Carousel

This module is a great way to show off your custom loops not only because they look great, but also because this module works great for users browsing your site on mobile devices. In this example, we are only showing one product, but you can customize how many shows, how many shifts each time you swipe or click, and it even gives you a host of autoplay features.

Custom Loop Layouts

The power of being able to create your own Custom Loops can not be overstated and creating your own loops for Divi and WooCommerce is super simple using BodyCommerce. It gives you granular control of what your product cards look like. You can make horizontal loops like this example, or if you are more into vertical loops, you can do that also. The possibilities are only limited by your imagination.

Conclussion

The Divi WooCommerce Single Product Page is where your products need to convey why they are the perfect purchase for any occasion! You can do some pretty great things using the tools already in Divi and WooCommerce as we saw at the beginning of this tutorial, but so much is left on the table if you’re not using a tool like BodyCommerce. It really is one of the best investments you can make in the online presence of your business.

Custom Divi WooCommerce My Account pages are only one of the hundreds of customizations you can do in Divi WooCommerce stores with the power of BodyCommerce.