All Collections
Divi Release Tutorials
WooCommerce Cart & Checkout Customization
WooCommerce Cart & Checkout Customization

Customize The Entire WooCommerce Buying Experience, From Browsing Products Through Checkout

Goran Cajic avatar
Written by Goran Cajic
Updated over a week ago

The New Divi WooCommerce Modules

This update adds eight new modules to Divi. Each of these new modules represents a piece of the WooCommerce cart and checkout pages. When you build your cart or checkout page using Divi modules, you have full control over their appearance as well as the structure of the page. These eight new modules include:

  • Woo Cart Products – This module displays the list of products that a user currently has in their cart.

  • Woo Cart Totals – This module displays the current subtotal, shipping and total price for the products in a user’s cart.

  • Woo Cart Cross Sells – This module displays cross sells and related products on the cart page.

  • Woo Checkout Billing – This module displays the billing details form used during checkout.

  • Woo Checkout Shipping – This module displays the shipping details form used during checkout.

  • Woo Checkout Information – This module displays the additional information form used during checkout.

  • Woo Checkout Details – This module displays order details, including the products being purchased and their prices, during checkout.

  • Woo Checkout Payment – This module displays the payment type selection and payment form details during checkout.

Thanks to Divi’s Dynamic Framework and Dynamic CSS, these modules and their associated functions and assets are only loaded when you use them, so this update won’t affect your website’s performance!

Customizing Your Cart & Checkout Pages

When you enable the Divi Builder on a WooCommerce cart page or a WooCommerce checkout page, Divi automatically converts the page into a collection of new Divi modules using the eight new cart and checkout modules we added in this update.

You can fully customize their designs, move them around the page and combine them with other Divi modules to create a completely custom cart and checkout experience. Since these pages are composed of Divi modules, there are no limits to what you can do and each module is filled with a huge array of design options that allow you to customize everything about them.

Take A Look At Some Of The Amazing Designs Our Team Has Created Using These New Modules

Gone are the days of boring cart tables and bland checkout pages. Now you have complete freedom to unleash your design talent on WooCommerce. Just take a look at some of the beautiful cart and checkout pages that our design team created using this new feature.




Did this answer your question?