Intro
The cart page is an essential part of any e-commerce store. This is the page that lists all the products in the cart with the total price and some extra suggested products (the cross-sells).
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. While a clean easy on the eye look can make a big difference.
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.
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 is the place to build the cart layout.
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 ).
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
- Go to your admin dashboard -> Divi -> Divi Library.
- 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.
- Divi Builder will open, you can use the back-end builder or the front-end build, it’s completely up to you.
Now, you have access to all Divi’s own modules and our custom modules for WooCommerce. Design your page with the sections and columns structure as you desire just like building any other Divi layout.
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 a very important module to add to every WooCommerce layout you build using the WooCommerce Builder plugin. This module displays a variety of 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 amount of the item, remove it completely from the cart or apply a coupon code.
5- Woo Cart Totals
This module adds a table with the total price of 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.
Empty cart page
The empty cart page is the same page but the client didn’t add anything to the cart 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 a good idea 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.
