The WooCommerce Cart web page is very important to any Divi website the use of WooCommerce(WC) for a web-based retailer. However repeatedly the cart web page has a tendency to undergo relating to design as a result of designing the web page normally comes to customizing the cart web page template externally after which styling the web page template purely with exterior CSS. However with Divi’s new Woo Modules, this procedure has turn into simple and stress-free!

On this instructional, we can be appearing you the way to create of a bathroom Cart Web page template in your website totally from scratch the use of the Divi Theme Builder. We’ll display you the way to temporarily arrange a brand new template for the cart web page and design the template the use of the suitable dynamic woo modules to be had within the Divi Builder.

Let’s get began!

Sneak Peek

The Prior to and After

Here’s a fast take a look at Divi’s default cart web page in comparison to the brand new cart web page we’ll design on this instructional.

Divi WooCommerce Cart Page Template

And here’s a nearer take a look at the cart web page template.

Divi WooCommerce Cart Page Template

Divi WooCommerce Cart Page Template

Obtain the Cart Web page Template for FREE

This cart web page template is to be had for obtain as considered one of our FREE Cart and Cart Page Template Sets. So be at liberty to download it from the post that includes the ones Cart and Checkout Template units.

To put your arms at the cart web page template design from this instructional, you’re going to first want to obtain it the use of the button under. To achieve get entry to to the obtain it is very important subscribe to our Divi Day-to-day electronic mail record through the use of the shape under. As a brand new subscriber, you’re going to obtain much more Divi goodness and a loose Divi Structure pack each Monday! When you’re already at the record, merely input your electronic mail deal with under and click on obtain. You are going to now not be “resubscribed” or obtain additional emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:sooner than { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:sooner than { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@media most effective display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner than { border-top-color: #ffffff !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:sooner than { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .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 robust { 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 robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}

Download For Free

Obtain For Unfastened

Sign up for the Divi Publication and we can electronic mail you a replica of without equal Divi Touchdown Web page Structure Pack, plus lots of alternative wonderful and loose Divi assets, guidelines and tips. Apply alongside and you’re going to be a Divi grasp very quickly. In case you are already subscribed merely sort on your electronic mail deal with under and click on obtain to get entry to the format pack.

You might have effectively subscribed. Please test your electronic mail deal with to substantiate your subscription and get get entry to to loose weekly Divi format packs!

To import the template format in your site, it is very important cross to the Divi Theme Builder and use the portability solution to import the .json report to the theme builder.

Divi WooCommerce Cart Page Template

As soon as accomplished, the cart template can be to be had within the Theme Builder. To edit the template, click on the edit icon at the frame space of the template.

Divi WooCommerce Cart Page Template

Let’s get to the educational, lets?

Concerning the WooCommerce Cart Web page and Divi

Every time you put in WooCommerce in your Divi website, WooCommerce (WC) will generate key WC pages together with a store web page, a cart web page, a checkout web page, and an account web page. The content material of the web page is deployed via the usage of a shortcode at the backend WordPress block editor.

Divi WooCommerce Cart Page Template

When you turn on the Divi Builder in this cart web page, every of the content material parts of the WooCommerce Cart web page can be loaded as Divi Woo Modules that can be utilized to taste the web page.

Woo Modules for Designing a Cart Web page in Divi

Divi comes with a number of modules which are key to including dynamic content material to a web page template. A few of these come with Woo Modules particular to the cart web page.

Divi WooCommerce Cart Page Template

The Modules which are key to construction the Cart web page or template come with:

  • Put up Identify – This may increasingly show the name of the cart web page dynamically when construction a cart web page template.
  • Woo Understand – This module may also be set to other web page sorts (cart web page, product web page, checkout web page). It is going to show essential notifications to the consumer dynamically as wanted.
  • Woo Cart Merchandise – This module presentations the record of goods {that a} consumer lately has of their cart.
  • Woo Cart Totals – This module presentations the present subtotal, delivery and overall value for the goods in a consumer’s cart.

Different not obligatory modules come with:

  • Woo Breadcrumbs – This may increasingly show the WooCommerce Breadcrumb navigation bar.
  • Woo Move Sells – This may increasingly show any move promote merchandise related to pieces within the cart dynamically.

Design a Cart Web page or Template

As discussed, we will simply use the Divi Woo Modules to design a customized WooCommerce Cart web page for those who don’t see a want to construct a customized template for the cart web page. For this instructional, we’re going to construct a cart web page template the use of the Divi Theme Builder.

Designing a WooCommerce Cart Web page Template with Divi

For this WooCommerce Cart Web page template, the purpose is to create a customized frame space for a template this is assigned to the WooCommerce Cart Web page in Divi. We aren’t going to be creating a custom header or footer space for this template, however you’ll be able to simply use this template by yourself site with your personal header and footer.

Making a Customized Template for the Cart Web page

To get began, let’s do the next:

  1. Pass in your WordPress Dashboard and navigate to Divi > Theme Builder.
  2. Then click on the Upload New Template plus icon within the empty grey field space so as to add a brand new template.
  3. Within the Template Settings modal, beneath the “Use On” tab, make a choice Cart beneath the WooCommerce Pages record.
  4. In the end, click on Create Template.

Divi WooCommerce Cart Page Template

As soon as the brand new Cart template has been created, click on the “Upload Customized Frame” space of the template. Throughout the popup record, make a choice Construct Customized Frame.

Divi WooCommerce Cart Page Template

Developing the Phase Row and Column Construction

Within the Template Structure Editor, insert a brand new strong point segment with a one-fourth one-half 0ne-fourth column construction with two sidebars.

Divi WooCommerce Cart Page Template

Subsequent, upload a one-column row in the midst of the segment.

Divi WooCommerce Cart Page Template

Phase Background

Open the segment settings and upload a background coloration as follows:

  • Background Colour: #f7f3f0

Divi WooCommerce Cart Page Template

Phase Sizing

Underneath the design tab, replace the next:

  • Gutter Width: 2
  • Interior Width: 100%
  • Interior Max Width: none
  • Min Peak: 100vh

Divi WooCommerce Cart Page Template

Phase Spacing

Subsequent upload some spacing to the segment and columns as follows:

  • Padding: 0px height, 40px left, 40px appropriate
  • Column 1 Padding: 90px height
  • Column 3 Padding: 84px

Divi WooCommerce Cart Page Template

Developing the Customized Navigation Hyperlinks

For this format, we’re going to create a couple of customized navigation hyperlinks to the important thing pages that make up a shop – the Store, the Cart, and the Checkout. This may increasingly make it more uncomplicated for customers to navigate during the purchasing procedure.

Within the left column, upload a brand new blurb module. This can be used as a hyperlink to the store web page in your site.

Divi WooCommerce Cart Page Template

Within the Blurb Settings modal, replace the content material as follows:

  • Identify: Store
  • Frame: go away clean
  • Use Icon: YES
  • Icon: see screenshot

Divi WooCommerce Cart Page Template

As an alternative of including a static hyperlink URL, we will upload a dynamic hyperlink to the Store web page. Right here’s the way to do it.

  1. Hover over the Module Hyperlink URL enter field and click on the “use dynamic content material” icon.
  2. Within the dropdown, make a choice Web page Hyperlink from the record.
  3. Within the Web page Hyperlink modal, make a choice the Store web page from the dropdown record.
  4. Then save adjustments.

Divi WooCommerce Cart Page Template

Underneath the design tab, replace the icon taste as follows:

  • Icon Colour: rgba(55,61,75,0.3)
  • Symbol/Icon Placement: Left
  • Symbol/Icon Width: 16px

Divi WooCommerce Cart Page Template

Subsequent, replace the name textual content:

  • Identify Font: Roboto
  • Identify Font Weight: Medium
  • Identify Textual content Colour: rgba(55,61,75,0.3)

Divi WooCommerce Cart Page Template

For a of completion, replace the scale and spacing as follows:

  • Content material Width: 100%
  • Margin: 10px backside
  • Symbol/Icon Animation: No Animation

This may increasingly be sure the blurb (or navigation hyperlink) spans the total width of the browser on pill and contact in addition to create some area between the following blurb(s) we’re going to upload.

Divi WooCommerce Cart Page Template

To create our subsequent two hyperlinks, replica the prevailing blurb module we simply designed two instances in order that there are a complete of 3 hyperlinks.

Divi WooCommerce Cart Page Template

The second one hyperlink would be the Cart Hyperlink which is the web page we’re lately growing. To make it stand out, open the settings for the second one blurb and replace the icon and textual content coloration:

  • Icon Colour: #373d4b
  • Identify Textual content Colour: #373d4b

Divi WooCommerce Cart Page Template

Now all this is left to do is replace the Identify textual content and the module Hyperlink URLs in order that they every have their respective dynamic web page hyperlink URLs.

Customizing the Row Settings

Within the heart a part of the web page, we can upload the woo understand module and woo cart merchandise. However sooner than we upload the ones, we want to optimize the row settings.

Row Padding

Open the row settings and replace the next:

  • Padding (desktop): 72px height, 6% left, 6% appropriate
  • Padding: (pill and contact): 0px height, 0px left, 0px appropriate

Divi WooCommerce Cart Page Template

Row Border

  • Border Width: 1px
  • Border Colour: rgba(55,61,75,0.14)
  • Best Border Width: 0px
  • Backside Border Width: 0px

Divi WooCommerce Cart Page Template

Designing the Dynamic Woo Understand Module for the Cart Web page

It’s at all times a good suggestion so as to add the Woo Understand module on the height of the web page in order that the notices can be maximum visual to customers when interacting with the cart web page. Remember the fact that we’re designing notices that can be displayed most effective when wanted.

So as to add the Woo Understand Module, click on so as to add a brand new Woo Understand module within the one-column row.

Divi WooCommerce Cart Page Template

Woo Understand Web page Sort and Background

Subsequent, replace the Web page Sort and Background coloration of the Woo Understand as follows:

  • Web page Sort: Cart Web page
  • Background Colour: rgba(153,158,117,0.1)

IMPORTANT: Make sure that to choose the Cart Web page because the Web page Sort in order that the woo notices will paintings correctly.

Divi WooCommerce Cart Page Template

Woo Understand Identify Textual content

Underneath the design tab, replace the name textual content taste as follows:

  • Identify Font: Roboto
  • Identify Font Weight: Medium
  • Identify Textual content Colour: #373d4b
  • Identify Textual content Measurement: 14px
  • Identify Line Peak: 1.8em

Divi WooCommerce Cart Page Template

Woo Understand Button

  • Use Customized Types for Button: YES
  • Button Textual content Measurement: 14px
  • Button Textual content Colour: #fff
  • Button Background Colour: #999e75
  • Button Border Width: 0px
  • Button Border Radius: 0px
  • Button Letter Spacing: 1px
  • Button Font: Roboto
  • Button Font Weight: Daring
  • Button Font Taste: TT
  • Button Padding: 0.8em height, 0.8em backside, 1em left, 1em appropriate

Divi WooCommerce Cart Page Template

Woo Understand Field Shadow

To present the woo understand bar a height border-like design, replace the box-shadow choices as follows:

  • Field Shadow: see screenshot
  • Field Shadow Vertical Place: 0px
  • Field Shadow Blur Energy: 0px
  • Field Shadow Unfold Energy: 0px
  • Shadow Colour: #999e75

Divi WooCommerce Cart Page Template

In an effort to take out the default margin under the woo understand, cross to the complex tab and upload the next customized CSS to the Major Component:

margin-bottom: 0 !essential;

Divi WooCommerce Cart Page Template

Developing the Dynamic Cart Web page Identify

To create the dynamic web page name wanted for the cart web page, upload a submit name module beneath the woo understand module.

Divi WooCommerce Cart Page Template

Put up Identify Content material

Within the submit name settings, replace the weather to turn most effective the name as follows:

  • Display Identify: YES
  • Display Meta: NO
  • Display Featured Symbol: NO

Divi WooCommerce Cart Page Template

Put up Identify Textual content

To taste the submit name textual content, replace the next beneath the design tab:

  • Identify Font: DM Serif Show
  • Identify Textual content Colour: #373d4b
  • Identify Textual content Measurement: 80px (desktop), 60px (pill), 42px (telephone)
  • Identify Line Peak: 1.2em

Divi WooCommerce Cart Page Template

Designing the Dynamic Woo Cart Merchandise

Now that our web page name is in position, we’re in a position so as to add the Woo Cart Merchandise, any other key part to the cart web page template.

Underneath the submit name module, upload a Woo Cart Merchandise module.

Divi WooCommerce Cart Page Template

The module will have to display dummy content material until you have already got merchandise within the cart. This may increasingly assist visualize the design procedure.

Woo Cart Merchandise Frame Textual content and Hyperlinks

We will be able to goal the product name hyperlinks, value textual content, and subtotal textual content through customizing the frame textual content choices within the Woo Cart Merchandise settings.

Open the Woo Cart Merchandise settings modal and, beneath the design tab, replace the next:

  • Frame Font: Roboto
  • Hyperlink Textual content Colour: #373d4b

Observe: The hyperlink textual content will goal the product name hyperlinks beneath the Product column.

Divi WooCommerce Cart Page Template

Woo Cart Merchandise Desk, Desk Mobile, and Take away Icon

As you’ll be able to most probably inform, the cart merchandise are arranged inside of a desk construction. We will be able to goal the manner of the desk and desk cells with the module’s integrated choices.

For this situation, replace the next:

  • Cave in Desk Gutters and Borders: YES
  • Desk Mobile Padding: 0px

Then replace the colour of the take away icon (the “x”) at the left aspect of every product as follows:

  • Take away Icon Textual content Colour: #373d4b

Divi WooCommerce Cart Page Template

Woo Cart Merchandise Fields

We will be able to additionally goal the cart merchandise fields the use of the module’s integrated fields choices. This may increasingly goal such things as the volume box containers and the coupon code box field.

Underneath the fields choices, replace the next:

  • Box Background Colour: clear
  • Box Padding: 10px height, 10px backside
  • Box Rounded Corners: 0px
  • Box Border Width: 1px
  • Box Border Colour: rgba(0,0,0,0.16)

Divi WooCommerce Cart Page Template

Woo Cart Merchandise Buttons

The Woo Cart Merchandise module comprises two buttons (the “Observe Coupon” button and the “Replace Cart” button) that may be custom designed with the module’s integrated button choices.

Since we already styled a button within the Woo Understand module, open the Woo Understand module settings and in finding the button possibility toggle. Then right-click at the button toggle or click on the “3 dot” icon to open the extra settings menu. There, make a choice reproduction button kinds.

Divi WooCommerce Cart Page Template

With the button kinds now copied, open the Woo Cart Merchandise module settings and open the extra settings menu at the button possibility staff and make a choice Paste Button Types. This may increasingly reproduction the kinds of the button from the woo understand module to this one.

Divi WooCommerce Cart Page Template

As soon as the button kinds are in position, exchange the button background coloration as follows:

  • Button Background Colour: #373d4b

Divi WooCommerce Cart Page Template

The Disable Button

The “Replace Cart” button has a disabled state each time it isn’t wanted. We will be able to customise the manner of the disabled button as smartly. For now, simply reproduction the present button kinds and paste them to the disabled button kinds the use of the right-click menu settings.

Woo Cart Merchandise Photographs

We will be able to additionally exchange the manner of the product photographs on this module. For now, let’s exchange the scale of the photographs beneath the Sizing choices as follows:

  • Symbol Width: 80px

Divi WooCommerce Cart Page Template

Customized Desk Structure

If you need create extra horizontal area for the product data within the desk, you’ll be able to override WooCommerce default fastened desk format to preliminary (or auto). To try this, cross to the complex tab, and upload the next customized CSS to the Desk:

table-layout: preliminary !essential;

Divi WooCommerce Cart Page Template

Designing the Dynamic Woo Cart Totals Module

The final key part we want to entire the cart web page template is the Woo Cart Totals modules. This module presentations the dynamic cart totals content material in addition to a “Continue to Checkout” button. For this format, cross forward and upload the cart totals module to the proper column of the segment.

Divi WooCommerce Cart Page Template

Cart Totals Button

First, let’s reproduction the button kinds used for the Woo Understand modules (like we did sooner than) and paste the button kinds to the cart totals module. This may increasingly give us an identical button taste for the “Continue to Checkout” button. In fact, you’ll be able to simply customise the button kinds then again you prefer the use of the module’s integrated choices.

Divi WooCommerce Cart Page Template

Cart Totals Textual content

To taste the name textual content of the cart totals module, open the cart totals module and, beneath the design tab, replace the next:

  • Identify Font: DM Serif Show
  • Identify Textual content Measurement: 30px (desktop), 24px (pill), 18px (telephone)
  • Identify Line Peak: 1.8em

Divi WooCommerce Cart Page Template

Desk Border and Desk Mobile Border

The Cart Totals may have some desk kinds through default. You’ll be able to select to taste the ones with the module’s integrated desk and desk cellular choices. For this format, we’re going to take out the border kinds for each. To try this, replace the next:

  • Desk Border Taste: None
  • Desk Mobile Border Taste: None

Divi WooCommerce Cart Page Template

Cart Totals Fields

To present the cart totals module the similar box kinds used within the Woo Cart Merchandise, reproduction the sector kinds from the Woo Cart Merchandise module and paste them to the Cart Totals module.

Divi WooCommerce Cart Page Template

Upload Extra Content material as Wanted

At this level, we’ve got the entire key parts for our cart web page template. However you don’t have to prevent right here. You’ll be able to upload any content material you need to the web page as wanted. Listed here are a couple of concepts:

  • Upload a Woo Move Sells module to show any move promote merchandise related to the goods added to the cart.
  • Upload an E mail Optin for a bargain on first purchases.
  • Upload a promo exhibiting a chit code to incentivize finishing the purchasing procedure.

For our loose demo of this format, we incorporated a pleasant electronic mail opt-in under the cart merchandise.

Divi WooCommerce Cart Page Template

Ultimate End result

Let’s take a look at the overall results of our cart web page template.

Divi WooCommerce Cart Page Template

And here’s the way it appears to be like on pill and contact units.

Divi WooCommerce Cart Page Template

Ultimate Ideas

The method of designing a customized WooCommerce Cart Web page template is vastly simplified and amplified with Divi’s tough theme builder and intuitive Woo Modules.  On this instructional, we targeting incorporating the important thing parts that make up a cart web page. However, be mindful, all the different tough Divi modules and lines are at your disposal to take your cart pages to a complete new stage. With a bit of luck, this may occasionally assist spice up your Divi design talents and, extra importantly, result in extra conversions.

I stay up for listening to from you within the feedback.

Cheers!

.inline-code{padding: 0px 4px; coloration: purple; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!essential} 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);show:block;margin: 0 auto;}

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

WordPress Web Design

[ continue ]