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:
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:
Divi WooCommerce Single Product Page Enhancements
Custom Product Gallery Module
Customized Product Variation Swatches
Sharing Module
Customer Loops will Change Your Divi and WooCommerce Game
Product Carousel
Custom Loop Layouts
Conclussion
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.
Thanks for sharing. You can also use a guided selling solution and Convert your ecommerce traffic Into Leads. WPCommerz has a plugin of Multi-step Guided Selling Process to make your Woocommerce perform better. It filters out miscellaneous items and brings out the only products the customer wants. The process is super fun and easy so the customers can do shopping comfortably. An easy way to boost sales!
Hi! Im having a weird issue with this. Divi doesn’t get the product image thumbnail dinamically…hoy couyld i fix this?