The WooCommerce Cart web page is very important to any Divi web page the usage of WooCommerce(WC) for a web based retailer. However time and again the cart web page has a tendency to undergo on the subject of design as a result of designing the web page typically 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 develop into simple and relaxing!

On this educational, we will be able to be appearing you the best way to create of a bathroom Cart Web page template on your web page totally from scratch the usage of the Divi Theme Builder. We’ll display you the best way to briefly arrange a brand new template for the cart web page and design the template the usage of the proper dynamic woo modules to be had within the Divi Builder.

Let’s get began!

Sneak Peek

The Ahead of 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 educational.

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

Obtain the Cart Web page Template for FREE

This cart web page template is to be had for obtain as certainly one of our FREE Cart and Cart Page Template Sets. So be happy 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 educational, you’re going to first want to obtain it the usage of the button underneath. To realize get entry to to the obtain it is important to subscribe to our Divi Day-to-day e-mail record by means of the usage of the shape underneath. As a brand new subscriber, you’re going to obtain much more Divi goodness and a loose Divi Format pack each and every Monday! Should you’re already at the record, merely input your e-mail deal with underneath and click on obtain. You’ll now not be “resubscribed” or obtain further emails.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:prior to { border-top-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:prior to { border-top-color: clear !vital; border-left-color: #ffffff !vital; }
@media best display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to { border-top-color: #ffffff !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:prior to { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .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 !vital;}

Obtain For Loose

Sign up for the Divi E-newsletter and we will be able to e-mail you a replica of without equal Divi Touchdown Web page Format Pack, plus lots of different wonderful and loose Divi assets, guidelines and methods. Apply alongside and you’re going to be a Divi grasp very quickly. In case you are already subscribed merely kind on your e-mail deal with underneath and click on obtain to get entry to the format pack.

DOWNLOAD

You’ve effectively subscribed. Please take a look at your e-mail deal with to verify your subscription and get get entry to to loose weekly Divi format packs!

To import the template format on your web site, it is important to pass to the Divi Theme Builder and use the portability way to import the .json report to the theme builder.

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

Let’s get to the academic, we could?

Concerning the WooCommerce Cart Web page and Divi

Every time you put in WooCommerce for your Divi web page, 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.

Should you turn on the Divi Builder in this cart web page, each and every of the content material parts of the WooCommerce Cart web page will likely 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 can be 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.

The Modules which can be key to development the Cart web page or template come with:

• Submit Identify – This may occasionally show the name of the cart web page dynamically when development a cart web page template.
• Woo Understand – This module will also be set to other web page sorts (cart web page, product web page, checkout web page). It’s going to show vital notifications to the person dynamically as wanted.
• Woo Cart Merchandise – This module presentations the record of goods {that a} person lately has of their cart.
• Woo Cart Totals – This module presentations the present subtotal, transport and overall value for the goods in a person’s cart.

Different non-compulsory modules come with:

• Woo Breadcrumbs – This may occasionally show the WooCommerce Breadcrumb navigation bar.
• Woo Pass Sells – This may occasionally show any go promote merchandise connected 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 if you happen to don’t see a want to construct a customized template for the cart web page. For this educational, we’re going to construct a cart web page template the usage of the Divi Theme Builder.

Designing a WooCommerce Cart Web page Template with Divi

For this WooCommerce Cart Web page template, the objective is to create a customized frame house 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 house for this template, however you’ll be able to simply use this template by yourself web 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 on your WordPress Dashboard and navigate to Divi > Theme Builder.
2. Then click on the Upload New Template plus icon throughout the empty grey field house 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 spite of everything, click on Create Template.

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

Developing the Phase Row and Column Construction

Within the Template Format Editor, insert a brand new area of expertise segment with a one-fourth one-half 0ne-fourth column construction with two sidebars.

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

Phase Background

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

• Background Colour: #f7f3f0

Phase Sizing

Below the design tab, replace the next:

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

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

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 occasionally make it more straightforward for customers to navigate in the course of the purchasing procedure.

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

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

• Identify: Store
• Frame: depart clean
• Use Icon: YES
• Icon: see screenshot

As an alternative of including a static hyperlink URL, we will upload a dynamic hyperlink to the Store web page. Right here’s the best 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.

Below 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

Subsequent, replace the name textual content:

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

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

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

This may occasionally ensure that the blurb (or navigation hyperlink) spans the total width of the browser on pill and call in addition to create some house between the following blurb(s) we’re going to upload.

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

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

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

Customizing the Row Settings

Within the heart a part of the web page, we will be able to upload the woo realize module and woo cart merchandise. However prior to 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 call): 0px height, 0px left, 0px appropriate

Row Border

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

Designing the Dynamic Woo Understand Module for the Cart Web page

It’s all the time a good suggestion so as to add the Woo Understand module on the height of the web page in order that the notices will likely be maximum visual to customers when interacting with the cart web page. Take into account that we’re designing notices that will likely be displayed best when wanted.

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

Woo Understand Web page Kind and Background

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

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

IMPORTANT: Be certain to choose the Cart Web page because the Web page Kind in order that the woo notices will paintings correctly.

Woo Understand Identify Textual content

Below 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 Dimension: 14px
• Identify Line Peak: 1.8em

Woo Understand Button

• Use Customized Types for Button: YES
• Button Textual content Dimension: 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

Woo Understand Field Shadow

To present the woo realize 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

With a purpose to take out the default margin underneath the woo realize, pass to the complex tab and upload the next customized CSS to the Primary Part:

margin-bottom: 0 !vital;

Developing the Dynamic Cart Web page Identify

To create the dynamic web page name wanted for the cart web page, upload a put up name module beneath the woo realize module.

Submit Identify Content material

Within the put up name settings, replace the weather to turn best the name as follows:

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

Submit Identify Textual content

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

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

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 component to the cart web page template.

Below the put up name module, upload a Woo Cart Merchandise module.

The module must display dummy content material except you have already got merchandise within the cart. This may occasionally lend a hand visualize the design procedure.

Woo Cart Merchandise Frame Textual content and Hyperlinks

We will goal the product name hyperlinks, value textual content, and subtotal textual content by means of 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.

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

As you’ll be able to most certainly inform, the cart merchandise are arranged within a desk construction. We will 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 facet of each and every product as follows:

• Take away Icon Textual content Colour: #373d4b

Woo Cart Merchandise Fields

We will additionally goal the cart merchandise fields the usage of the module’s integrated fields choices. This may occasionally goal such things as the amount box bins and the coupon code box field.

Below 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)

Woo Cart Merchandise Buttons

The Woo Cart Merchandise module accommodates two buttons (the “Practice 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 to find 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 types.

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

As soon as the button types are in position, trade the button background coloration as follows:

• Button Background Colour: #373d4b

The Disable Button

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

Woo Cart Merchandise Pictures

We will additionally trade the manner of the product pictures on this module. For now, let’s trade the scale of the pictures beneath the Sizing choices as follows:

• Symbol Width: 80px

Customized Desk Format

If you need create extra horizontal house 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, pass to the complex tab, and upload the next customized CSS to the Desk:

table-layout: preliminary !vital;

Designing the Dynamic Woo Cart Totals Module

The final key component 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, pass forward and upload the cart totals module to the proper column of the segment.

Cart Totals Button

First, let’s reproduction the button types used for the Woo Understand modules (like we did prior to) and paste the button types to the cart totals module. This may occasionally give us an identical button taste for the “Continue to Checkout” button. After all, you’ll be able to simply customise the button types alternatively you favor the usage of the module’s integrated choices.

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 Dimension: 30px (desktop), 24px (pill), 18px (telephone)
• Identify Line Peak: 1.8em

Desk Border and Desk Mobile Border

The Cart Totals can have some desk types by means of default. You’ll make a selection to taste the ones with the module’s integrated desk and desk mobile choices. For this format, we’re going to take out the border types for each. To try this, replace the next:

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

Cart Totals Fields

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

Upload Extra Content material as Wanted

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

• Upload a Woo Pass Sells module to show any go promote merchandise connected to the goods added to the cart.
• Upload an Electronic mail Optin for a bargain on first purchases.
• Upload a promo showing a chit code to incentivize finishing the purchasing procedure.

For our loose demo of this format, we integrated a pleasant e-mail opt-in underneath the cart merchandise.

Ultimate Consequence

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

And this is the way it appears on pill and call gadgets.

Ultimate Ideas

The method of designing a customized WooCommerce Cart Web page template is greatly simplified and amplified with Divi’s tough theme builder and intuitive Woo Modules.  On this educational, we focused on incorporating the important thing parts that make up a cart web page. However, take note, all the different tough Divi modules and lines are at your disposal to take your cart pages to a complete new degree. Confidently, this may increasingly lend a hand spice up your Divi design abilities 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!vital} 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 put up How to Create a WooCommerce Cart Page Template with Divi gave the impression first on Elegant Themes Blog.

read more