• Documentation Search

WooCommerce Builder For Divi

  1. Home
  2. Docs
  3. WooCommerce Builder For D...
  4. Build Layouts
  5. Build the cart layout

Build the cart layout

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.

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 a custom layout for the cart page
Cart Page

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.

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.

add new layouts

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.