Site icon Hip-Hop Website Design and Development

How to Create a WooCommerce Cart Page Template with Divi

Pixeldust WordPress Developer

The WooCommerce Cart page is essential to any Divi site using WooCommerce(WC) for an online store. But many times the cart page tends to suffer when it comes to design because designing the page usually involves customizing the cart page template externally and then styling the page template purely with external CSS. But with Divi’s new Woo Modules, this process has become easy and enjoyable!

In this tutorial, we will be showing you how to create a WC Cart Page template for your site completely from scratch using the Divi Theme Builder. We’ll show you how to quickly set up a new template for the cart page and design the template using the appropriate dynamic woo modules available in the Divi Builder.

Let’s get started!

Sneak Peek

The Before and After

Here is a quick look at Divi’s default cart page compared to the new cart page we’ll design in this tutorial.

And here is a closer look at the cart page template.

Download the Cart Page Template for FREE

This cart page template is available for download as one of our FREE Cart and Cart Page Template Sets. So feel free to download it from the post featuring those Cart and Checkout Template sets.

To lay your hands on the cart page template design from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files
.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the template layout to your website, you will need to go to the Divi Theme Builder and use the portability option to import the .json file to the theme builder.

Once done, the cart template will be available in the Theme Builder. To edit the template, click the edit icon on the body area of the template.

Let’s get to the tutorial, shall we?

About the WooCommerce Cart Page and Divi

Whenever you install WooCommerce on your Divi site, WooCommerce (WC) will generate key WC pages including a shop page, a cart page, a checkout page, and an account page. The content of the page is deployed through the use of a shortcode on the backend WordPress block editor.

If you activate the Divi Builder on this cart page, each of the content elements of the WooCommerce Cart page will be loaded as Divi Woo Modules that can be used to style the page.

Woo Modules for Designing a Cart Page in Divi

Divi comes with a variety of modules that are key to adding dynamic content to a page template. Some of these include Woo Modules specific to the cart page.

The Modules that are key to building the Cart page or template include:

Other optional modules include:

Design a Cart Page or Template

As mentioned, we can easily use the Divi Woo Modules to design a custom WooCommerce Cart page if you don’t see a need to build a custom template for the cart page. For this tutorial, we are going to build a cart page template using the Divi Theme Builder.

Designing a WooCommerce Cart Page Template with Divi

For this WooCommerce Cart Page template, the goal is to create a custom body area for a template that is assigned to the WooCommerce Cart Page in Divi. We aren’t going to be creating a custom header or footer area for this template, but you can easily use this template on your own website with your own header and footer.

Creating a Custom Template for the Cart Page

To get started, let’s do the following:

  1. Go to your WordPress Dashboard and navigate to Divi > Theme Builder.
  2. Then click the Add New Template plus icon inside the empty gray box area to add a new template.
  3. In the Template Settings modal, under the “Use On” tab, select Cart under the WooCommerce Pages list.
  4. Finally, click Create Template.

Once the new Cart template has been created, click the “Add Custom Body” area of the template. Inside the popup list, select Build Custom Body.

Creating the Section Row and Column Structure

In the Template Layout Editor, insert a new specialty section with a one-fourth one-half 0ne-fourth column structure with two sidebars.

Next, add a one-column row in the middle of the section.

Section Background

Open the section settings and add a background color as follows:

Section Sizing

Under the design tab, update the following:

Section Spacing

Next add some spacing to the section and columns as follows:

Creating the Custom Navigation Links

For this layout, we are going to create a few custom navigation links to the key pages that make up a store – the Shop, the Cart, and the Checkout. This will make it easier for users to navigate through the buying process.

In the left column, add a new blurb module. This will be used as a link to the shop page on your website.

In the Blurb Settings modal, update the content as follows:

Instead of adding a static link URL, we can add a dynamic link to the Shop page. Here’s how to do it.

  1. Hover over the Module Link URL input box and click the “use dynamic content” icon.
  2. In the dropdown, select Page Link from the list.
  3. In the Page Link modal, select the Shop page from the dropdown list.
  4. Then save changes.

Under the design tab, update the icon style as follows:

Next, update the title text:

For a final touch, update the size and spacing as follows:

This will make sure the blurb (or navigation link) spans the full width of the browser on tablet and phone as well as create some space between the next blurb(s) we are going to add.

To create our next two links, duplicate the existing blurb module we just designed two times so that there are a total of three links.

The second link will be the Cart Link which is the page we are currently creating. To make it stand out, open the settings for the second blurb and update the icon and text color:

Now all that is left to do is update the Title text and the module Link URLs so that they each have their respective dynamic page link URLs.

Customizing the Row Settings

In the middle part of the page, we will add the woo notice module and woo cart products. But before we add those, we need to optimize the row settings.

Row Padding

Open the row settings and update the following:

Row Border

Designing the Dynamic Woo Notice Module for the Cart Page

It is always a good idea to add the Woo Notice module at the top of the page so that the notices will be most visible to users when interacting with the cart page. Keep in mind that we are designing notices that will be displayed only when needed.

To add the Woo Notice Module, click to add a new Woo Notice module inside the one-column row.

Woo Notice Page Type and Background

Next, update the Page Type and Background color of the Woo Notice as follows:

IMPORTANT: Make sure to select the Cart Page as the Page Type so that the woo notices will work properly.

Woo Notice Title Text

Under the design tab, update the title text style as follows:

Woo Notice Button

Woo Notice Box Shadow

To give the woo notice bar a top border-like design, update the box-shadow options as follows:

In order to take out the default margin below the woo notice, go to the advanced tab and add the following custom CSS to the Main Element:

margin-bottom: 0 !important;

Creating the Dynamic Cart Page Title

To create the dynamic page title needed for the cart page, add a post title module under the woo notice module.

Post Title Content

In the post title settings, update the elements to show only the title as follows:

Post Title Text

To style the post title text, update the following under the design tab:

Designing the Dynamic Woo Cart Products

Now that our page title is in place, we are ready to add the Woo Cart Products, another key element to the cart page template.

Under the post title module, add a Woo Cart Products module.

The module should show dummy content unless you already have products in the cart. This will help visualize the design process.

Woo Cart Products Body Text and Links

We can target the product title links, price text, and subtotal text by customizing the body text options in the Woo Cart Products settings.

Open the Woo Cart Products settings modal and, under the design tab, update the following:

Note: The link text will target the product title links under the Product column.

Woo Cart Products Table, Table Cell, and Remove Icon

As you can probably tell, the cart products are organized inside a table structure. We can target the style of the table and table cells with the module’s built-in options.

For this example, update the following:

Then update the color of the remove icon (the “x”) on the left side of each product as follows:

Woo Cart Products Fields

We can also target the cart products fields using the module’s built-in fields options. This will target things like the quantity field boxes and the coupon code field box.

Under the fields options, update the following:

Woo Cart Products Buttons

The Woo Cart Products module contains two buttons (the “Apply Coupon” button and the “Update Cart” button) that can be customized with the module’s built-in button options.

Since we already styled a button in the Woo Notice module, open the Woo Notice module settings and find the button option toggle. Then right-click on the button toggle or click the “three dot” icon to open the more settings menu. There, select copy button styles.

With the button styles now copied, open the Woo Cart Products module settings and open the more settings menu on the button option group and select Paste Button Styles. This will copy the styles of the button from the woo notice module to this one.

Once the button styles are in place, change the button background color as follows:

The Disable Button

The “Update Cart” button has a disabled state whenever it is not needed. We can customize the style of the disabled button as well. For now, just copy the current button styles and paste them to the disabled button styles using the right-click menu settings.

Woo Cart Products Images

We can also change the style of the product images in this module. For now, let’s change the size of the images under the Sizing options as follows:

Custom Table Layout

If you want create more horizontal space for the product information in the table, you can override WooCommerce default fixed table layout to initial (or auto). To do this, go to the advanced tab, and add the following custom CSS to the Table:

table-layout: initial !important;

Designing the Dynamic Woo Cart Totals Module

The last key element we need to complete the cart page template is the Woo Cart Totals modules. This module displays the dynamic cart totals content as well as a “Proceed to Checkout” button. For this layout, go ahead and add the cart totals module to the right column of the section.

Cart Totals Button

First, let’s copy the button styles used for the Woo Notice modules (like we did before) and paste the button styles to the cart totals module. This will give us a matching button style for the “Proceed to Checkout” button. Of course, you can easily customize the button styles however you like using the module’s built-in options.

Cart Totals Text

To style the title text of the cart totals module, open the cart totals module and, under the design tab, update the following:

Table Border and Table Cell Border

The Cart Totals will have some table styles by default. You can choose to style those with the module’s built-in table and table cell options. For this layout, we are going to take out the border styles for both. To do this, update the following:

Cart Totals Fields

To give the cart totals module the same field styles used in the Woo Cart Products, copy the field styles from the Woo Cart Products module and paste them to the Cart Totals module.

Add More Content as Needed

At this point, we have all the key elements for our cart page template. But you don’t have to stop here. You can add any content you want to the page as needed. Here are a few ideas:

For our free demo of this layout, we included a nice email opt-in below the cart products.

Final Result

Let’s check out the final result of our cart page template.

And here is how it looks on tablet and phone devices.

Final Thoughts

The process of designing a custom WooCommerce Cart Page template is drastically simplified and amplified with Divi’s powerful theme builder and intuitive Woo Modules.  In this tutorial, we concentrated on incorporating the key elements that make up a cart page. But, keep in mind, all of the other powerful Divi modules and features are at your disposal to take your cart pages to a whole new level. Hopefully, this will help boost your Divi design skills and, more importantly, lead to more conversions.

I look forward to hearing from you in the comments.

Cheers!

.inline-code{padding: 0px 4px; color: crimson; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!important} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);display:block;margin: 0 auto;}

The post How to Create a WooCommerce Cart Page Template with Divi appeared first on Elegant Themes Blog.