In one of Divi 5’s latest updates, we’ve released the native Cart and Checkout Woo Modules that allow you to build custom checkout pages for your Divi site.
In this post, we’ll explore the features, benefits, and setup process for these modules, providing a better understanding of how they work. Let’s get started!
What Are The Woo Cart & Checkout Modules?
The Woo Cart and Checkout modules are native components of Divi 5, which is an upgrade from the legacy Divi 4 modules in previous versions of the Divi 5 Public Alpha phase. These modules allow Divi users to transform WooCommerce’s default cart and checkout templates into fully customizable, visually rich experiences within the Visual Builder or Theme Builder.
Subscribe To Our Youtube Channel
Unlike traditional Woo setups that often rely on rigid templates or third-party plugins, these modules integrate seamlessly with Divi’s ecosystem. This means you can design every element of your cart and checkout pages using Divi’s drag-and-drop interface.
Woo Cart Modules
The Woo Cart Modules in Divi 5 allow you to customize every aspect of your cart page. Here are the three main modules in this latest release:
Woo Cart Products Module
The Woo Cart Products Module displays all items in a customer’s cart, including product images, titles, quantities, and prices. Integrated with Divi 5’s Visual Builder, it offers customizable layouts with adjustable styling for images and text, allowing you to match your brand.
Responsive controls ensure a seamless display across devices, while built-in features like quantity adjustments and remove-item links simplify cart management, creating a user-friendly and cohesive shopping experience.
Woo Cart Totals Module
The Woo Cart Totals Module shows the cart’s subtotal, shipping, taxes, and final total. It updates costs in real time, supports WooCommerce coupons, and integrates with shipping plugins for accurate pricing. Customize fonts, colors, and layout with Divi’s tools for a clear, branded look that drives checkouts.
Woo Cross-Sells Module
The Woo Cross-Sells module showcases related or upsell products on the cart page, encouraging customers to add more items to their order. It offers customizable displays with adjustable styling for images, text, and buttons, allowing you to align with your brand. Responsive controls ensure a seamless appearance across devices, while Woo integration dynamically pulls recommendations, with a polished look.
Woo Checkout Modules
The Woo Checkout modules allow you to style your Woo Checkout page as you want, with five new modules:
Woo Checkout Billing Module
The Woo Checkout Billing module displays the billing details form during checkout, capturing customer information. It allows customization of form fields, fonts, and colors to match your brand.
Woo Checkout Shipping Module
The Woo Checkout Shipping module displays a shipping details form, enabling customers to input or confirm their delivery address or select an alternative shipping address. The module provides styling flexibility for form elements, such as fields and labels, enabling you to control the visual appearance of the module.
Woo Checkout Information Module
This module controls the additional information form, allowing customers to add order notes during checkout. As with the other Woo Checkout modules, you can control how the form is styled, from text, field labels, spacing, and the fields themselves, for a cohesive look.
Woo Checkout Details Module
The Woo Checkout Details module displays a summary of the order during checkout, listing purchased products, quantities, and prices. It offers customizable layouts and styling for all of the details, including text, titles, column labels, tables, and spacing.
Woo Checkout Payment Module
This module displays payment type selection and form details during checkout, supporting gateways such as Stripe, PayPal, and Woo Payments, among others. You can style radio buttons, tooltips, the form notice, all text, and more, for a branded appearance.
How To Set Up And Use The Woo Cart And Checkout Modules
Using the Cart and Checkout modules is easy. We’ll guide you through the process of adding them, providing a clearer understanding of how to utilize them. Start by navigating to Divi > Theme Builder.
Click the + Add New Template button to create a new template.
Create A Cart Template
When the Template Settings modal appears, scroll to WooCommerce Pages and select Cart. Next, click Create Template.
Next, click Add Custom Body.
Add a new row to add a title for the Cart page, then click to add a single-column row. When the Insert Module Or Row modal appears, scroll to locate the Woo Modules option.
Once clicked, you’ll see a list of all 25 Woo Modules.
Add The Woo Cart Products Module
Select the Woo Cart Products module to add it to the page.
In the Content tab, you can choose which elements to show, including Product Image, Coupon Code, Update Cart Button, and the Remove Item Icon. As with any Divi module, you can style the module’s Background and set an Admin Label.
In the Design tab, you’ll have full control over the module’s design. You can style the module’s Table Header, Text, Fields, Remove Icon, Buttons, and more, using the flexibility of the Visual Builder.
Add The Woo Cart Totals Module
Next, find and add the Woo Cart Totals module to the page.
When the module’s settings appear, click the Design tab to style the module. There, you can style all Text, Column Labels, all aspects of the Table (table, rows, and fields), and the Checkout button.
Add The Woo Cross Sells Module
If you’d like to promote other products on your Cart page, add the Woo Cross-Upsells module.
In the Design tab, you can style the Text, Title Text, Pricing info, and adjust spacing as needed. While you can’t directly edit the images, you can use Divi AI to add borders, border radius, and more, giving you more options from the standard settings.
Once you’ve created your template, be sure to click the Save button in the top right corner of the Visual Builder.
The Visual Builder will close, directing you back to the Theme Builder. Click Save Changes to save your Cart template.
Create A Checkout Template
To create a Checkout template, click + Add New Template.
Scroll down to locate the WooCommerce Pages section and tick the Checkout box. Click Create Template, then Add Custom Body to launch the Visual Builder.
Add a single-column row and add a Heading module for the page. Next, click to add a two-column row.
Add The Woo Checkout Billing Module
Click Woo Modules. When the modules appear, select the Woo Checkout Billing module to add it to the left column.
In the Design tab, you can choose the module’s Layout (Fullwidth or 2 Column), Text, Fields, and Form Notice, using Divi’s expansive design settings.
Add The Woo Checkout Details Module
In the second column, locate the Woo Checkout Details module and add it to the page.
In the Design tab, you have full control over all aspects of the module, including all Text, Column Labels, and the Table. You can adjust the Vertical and Horizontal Gutters, give the Table a background color, and more.
Add The Woo Checkout Shipping Module
In the first column, click to add a new module under the Woo Checkout Billing module. Select the Woo Checkout Shipping module from the available options.
In the module’s Design tab, you can style the Title, Field Labels, and the Fields using the Visual Builder.
Add The Woo Checkout Payment Module
In the second column, click to add the Woo Checkout Payment module to the page.
In the module’s Design tab, you can style all of the text, including the Body, Tooltip, and Form Notice. There are also design settings for the Radio Buttons and the Order Button. You can also add Borders, a Box Shadow, and adjust Spacing for the module’s container.
Add The Woo Checkout Information Module
The last module we’ll add is the Woo Checkout Information module. Click into the first column to add it to the page.
In the module’s Content tab, you can choose whether to show or hide the Title.
In the Design tab, style the module’s Fields, Title Text, Placeholders, Field Labels, and more using Divi 5’s design settings.
Once you’re satisfied with the design of your page, remember to save it in the Visual Builder and in the Theme Builder.
As you can see, Divi makes it easy to create and style Cart and Checkout pages in just a few minutes, while giving your site a polished, branded look. If you’d like to see these modules in action, fill out the form below to download them. From there, import the JSON file into the Theme Builder.
Build A Better Checkout Experience With Divi 5 Today
The Woo Cart and Checkout modules in Divi 5 allow users to build more effective pages for the checkout experience. By transforming default WooCommerce templates into fully customizable templates, these modules will enable you to create on-brand WooCommerce pages. From dynamic product displays to seamless payment flows, they simplify the shopping experience while boosting engagement.
Are you ready to elevate your online store? Download the latest Divi 5 release, experiment with these new modules, and share your thoughts with us in the comments below or on our social media channels. Your feedback helps us identify potential bugs and refine features, which is even more important as we approach a full release.
Leave A Reply