Using the New Divi WooCommerce Modules

Time to put those hand new Divi WooCommerce Modules to work and create some custom Cart and Checkout pages. We will be doing this as an expansion of our How to Clone Any Online Store with Divi and WooCommerce tutorials series, so definitely go check that out if you have not already done so.

But, don’t worry, if you didn’t follow it, this tutorial will work with any Divi website that has Divi 4.14 or newer installed. No excuses 😂

The update is not shiny new, but still new enough for us to do a tutorial that will show you exactly what is possible for creating custom cart and checkout pages with this update. In case you missed it, we did release a FREE Cart & Checkout Pages using the new Divi 4.14 Woo Modules, so definitely check that out for another awesome FREEBIE!

First, we’ll take a look at what modules were added, and then we will build our custom Divi Cart page, and then move to a custom Divi Checkout page.

Let’s get to it!

Video Tutorial

The New Divi WooCommerce Modules

A very exciting addition to the new Divi 4.14 Update was the inclusion of new WooCommerce modules that allow you to style both the Cart and Checkout pages. Gone are the days of the not-so-great looking Cart and Checkout pages, Divi has now given everybody the ability to have these pages better align with their branding.

Let’s take a look at what modules were added:

Cart Modules

Woo Cart Products
Displays all the products that have been added to the cart.
Woo Cart Totals
Shows the total amount due and allows you to advance to checkout.
Woo Cart Cross Sells
Allows you to Cross Sell related products on the cart page.

Checkout Modules

Woo Checkout Billing
Allows the user to endter their billing address.
Woo Checkout Shipping
Allows the user to endter their shipping address.
Woo Checkout Details
Shows the user a brief summary of the items in the cart.
Woo Checkout Information
Allows the user to add additional notes or information on the order.
Woo Checkout Payment
Displays your configured payment options.

For our full write-up on the Divi 4.14 Update, check out our post titled Divi 4.14 WooCommerce Update: New Modules for Cart & Checkout and then some.

Custom Divi WooCommerce Cart Page

Create or Edit Theme Builder Template

Create

Head to Divi > Theme Builder > Add New Template > Scroll to WooCommerce Pages > Check Cart > Click Create Template
Add Custom Body
> Build from Scratch

Edit

Head to Divi > Theme Builder > Cart > Edit Custom Body > Delete All the Sections

Add a Single Column Row

Add a New Single Column Row > Add a Text Module

Section Settings

Background Color > #f6f6f6

Text Module Settings

Text > H1 Heading with text “Cart”

Heading Text

Heading Font > Default
Heading Font Weight > Bold
Heading Text Size
> 51px

Custom Cart Page Title

Add a Single Column Row

Add a New Single Column Row

Row Settings

Background Color > #ffffff

Spacing

Padding Top/Bottom > 25px
Padding Left/Right
> 50px

Border

Rounded Corners > 5px

Box Shadow

Box Shadow > Option 1

 

Divi Custom Cart Container

Add a Woo Cart Products Module > Settings

Text

Link Text Color > #e04405

Button

Use Custom Styles for Button > YES
Button Text Color
> #253746
Button Background Color
> #ffffff
Button Border Width
> 1px
Button Border Color
> #253746

Add a Woo Cart Totals Module > Settings

Text

Link Text Color > #e04405

Button

Use Custom Styles for Button > YES
Button Text Color
> #253746
Button Background Color
> #ffffff
Button Border Width
> 1px
Button Border Color
> #253746

Add a Woo Notice Module > Settings

Page Type > Cart
Background Color > #e04405

Error Text

Error Font > Default
Error Font Weight > Ultra Bold
Error Text Color > #ffffff
Error Letter Spacing > 1px

Button

Use Custom Styles for Button > YES
Button Text Color
> #ffffff
Button Background Color
> #253746
Button Border Width
> 0px

Drag the Woo Notice Module above the Woo Cart Products Module in the Row.

Custom WooCommerce Cart page with Styled Notice Section

Add a Single Column Row

Add a New Single Column Row > Add a Text Module

Text Module Settings

Text > H2 Heading with text “OUR TOP SELLING PRODUCTS”

Heading Text > H2

Heading Font Weight > Semi-Bold
Heading 2 Text Alignment
 > Center

Add a Woo Products Module > Settings

Product View Type > Best Selling Products
Product Count
> 4

Custom WooCommerce Cart Page Best Selling Products

Custom Divi WooCommerce Checkout Page

Create or Edit Theme Builder Template

Create

Head to Divi > Theme Builder > Add New Template > Scroll to WooCommerce Pages > Check Checkout > Click Create Template
Add Custom Body
> Build from Scratch

Edit

Head to Divi > Theme Builder > Checkout > Edit Custom Body > Delete All the Sections

Add a Two-Column Row

Add a New Two-Column Row

Section Settings

Background Color > #f6f6f6

Add a Woo Checkout Billing Module > Settings

Default

Add a Woo Checkout Shipping Module > Settings

Default

Add a Woo Checkout Details Module > Settings

Text

Link Text Color > #e04405

Add a Woo Checkout Information Module > Settings

Default

Add a Woo Notice Module > Settings

Page Type > Checkout
Background Color > #e04405

Error Text

Error Font > Default
Error Font Weight > Ultra Bold
Error Text Color > #ffffff
Error Letter Spacing > 1px

Button

Use Custom Styles for Button > YES
Button Text Color
> #ffffff
Button Background Color
> #253746
Button Border Width
> 0px

Drag the Woo Notice Module below the page title Text Module in the first Row.

Custom WooCommerce Checkout Page

Basically, all you customers right now…

Conclusion

Well done team! Using the power of the new Divi 4.14 Update we were able to Create Custom Cart and Checkout Pages using the New Divi WooCommerce Modules. It is actually pretty simple as you are using the Divi Builder you already know and love. Now, if you really want to take things to the next level with Cart and Checkout page templates in the style of Shopify, Multi-step, or Single Page Cart and Checkout, definitely check out Divi BodyCommerce!

Definitely head to our Youtube Channel and subscribe to make sure you don’t miss a single thing because this is going to be valuable for you and your design agency!

Catch you folks next week!