Customizing your WooCommerce Cart, Checkout, and My Account page can significantly enhance the shopping experience and reflect your brand's unique style.
Using Divi's Theme Builder, you can easily design and personalize the Cart, Checkout, and My Account page to match the rest of your website, improving both aesthetics and functionality.
This article will walk you through the steps to use the Theme Builder to customize your WooCommerce Cart, Checkout, and My Account page, ensuring a seamless and engaging shopping experience for your customers.
Create and Assign a template to the WooCommerce pages
Go to your WordPress Dashboard → Divi → Theme Builder
Click on the Add New Template icon
Choose Build New Template option to start from scratch or Add From Library to load an existing template from your local Divi Library or from Divi Cloud
Under WooCommerce Pages, choose the
Cart option - to create and assign a template for the WooCommerce Cart Page
Checkout option - to create and assign a template for the WooCommerce Checkout Page
My Account option - to create and assign a template for the WooCommerce My Account Page
Click on the Create Template button
Build the layout of the page template
Click on the Add Custom Body option
Choose the Build Custom Body option to start from scratch or Add From Library to load an existing template from your local Divi Library or from Divi Cloud
Build the desired layout
WooCommerce Modules List
For the Cart Page
For the Checkout Page
For the My Account Page
While there is no dedicated module for the My Account page, editing the page with the Visual Builder will use the Text module to display all the relevant details of the WooCommerce My Account page.
On top of that, you can use another module that will help you design and customize the My Account Page the way you need.
Pro Tip
You are not bound to use only the above module; you can also add other Divi modules, for example, the Post Title module, or another module that helps you customize the Cart and Checkout page the way you need.
Save the page template layout
Click on the Ellipsis icon
to expand the Visual Builder toolbarClick on the Save button
Click on the X icon (top right corner) to close the Visual Builder
Click on the Save Changes button
