The cart page is an essential part of any e-commerce store. The design of this page is crucial. A bad or complicated design can make your client closes the window immediately, and you will lose the money. In contrast, a clean, easy on the eye look can make a big difference.
In this tutorial, you will learn how to build a custom layout for the cart page and how to customize everything in the cart page using the Divi theme and our Wc Builder plugin.
With the WooCommerce Builder for Divi plugin, you will be able to build a stunning cart page that actually converts. Not just the cart page but also the empty cart page.
Table of Contents
Before you start
Your website must have a cart page. When you install WooCommerce, it creates that page for you. Basically, it is a normal page under your admin dashboard -> Pages. If you don’t have a cart page, go and create one.
The content of the cart page is just a simple shortcode [woocommerce_cart]. We will keep that page as it is and will not use Divi builder on it. Divi Library or the Theme Builder is the place to build the cart layout.
In this tutorial, I’ll use Divi library but feel free to use Divi’s new theme builder to create the layout. Choose the easier method for you.
Build cart layouts
The cart page may have products and may not, we will create a layout for each one of them ( if you want ).
Build a custom layout for the cart “with products” page
Now, let’s see how you can build a custom layout for the cart page if it has products.
Get started
1- Go to your admin dashboard -> Divi -> Divi Library.
2- At the very top, click “Add new,” a new layout popup will open. Here you can set the layout name and the layout type.
You can name the layout whatever you want but make sure you select “Layout” as the layout type. And then, click the “Submit” button.
3- Divi Builder will open, you can use the back-end builder or the front-end build, it’s completely up to you.
But for the cart elements to appear, you will need to use the following modules.
Cart modules
This is a list of the essential modules you need to add to your cart layout.
1- Woo Notices
This is an essential module to add to every WooCommerce layout you build using the WooCommerce Builder plugin. This module displays various messages from WooCommerce, like when a product is added to the cart, or there is no enough stock of a specific product, and so on.
You can place this module anywhere you want, but it is recommended to add it to the top of the layout, so it’s very obvious for your clients.
2- Woo Page Title
This module will display the page title. You don’t have to use this module; you can use a text module and add a custom title to your page.
3- Woo Breadcrumb
The breadcrumb module indicates the current page’s location. Usually, it’ll be something like that “Home / Current Page.” This module is not required.
4- Woo Cart Products
This module will display a table with all the products in the cart. From this table, the clients can change the item’s amount, delete it from the cart or apply a coupon code.
5- Woo Cart Totals
This module adds a table with the total price and the shipping form so the client can calculate his/her shipping fees. It also displays a “Proceed to checkout button” that takes the client to the final checkout page.
6- Woo Cart Cross-Sells
If you don’t know about cross-sells, these are the products you can recommend to your clients based on the items in their cart. It is a great module to increase sales of other products. You can read more about the cross-sells within WooCommerce here.
Apply the cart layout
After creating the layout, go to your admin dashboard -> Wc Builder -> Cart tab -> Default Cart Layout.
Select the layout you just created from the drop-down menu and save the changes.
Build a custom layout for the empty cart page
The empty cart is the same page as the regular cart, but the client didn’t add any products to it yet, or added some products a few days ago and visited the page later. In this case, WooCommerce will clear all the products from the cart automatically.
This empty cart page is a great page that WooCommerce doesn’t make any good use of, but now, you can build this page as you like and fill it with suggested products to drive more sales.
So, basically, you build another layout in Divi Library, but this layout will not have the “cart products,” “cart total,” nor “cart cross-sells” modules. You don’t need them here. You can add any other module to this layout. It is recommended to add the Shop module to display featured products or products from a specific category.
Apply the empty cart layout
After creating the layout, go to your admin dashboard -> Wc Builder -> Cart tab -> Empty Cart Layout.
Select the layout you just created from the drop-down menu and save the changes.