Designing a WooCommerce Checkout Internet web page most often involves complicated customization to the PHP template record inside the backend and a good little little bit of custom designed CSS. Alternatively with Divi’s Woo Modules, this process has develop into easy and relaxing! Whilst you edit a WC Checkout Internet web page the usage of Divi, that WC shortcode will grow to be correct right into a structured construction of dynamic Woo Checkout Modules which may also be able to be designed visually the usage of difficult built-in design possible choices. This will provide you with entire keep watch over over the design of the checkout internet web page.

In this tutorial, we will be showing you simple find out how to create a completely custom designed WooCommerce Checkout Internet web page from scratch with Divi. First, we’ll design the WooCommerce Checkout Internet web page the usage of the dynamic Woo Modules available for the checkout internet web page. Once finished, we’ll show you simple find out how to add the checkout internet web page design to a checkout internet web page template inside the Theme Builder. So, whether or not or now not you want to customize the real Checkout Internet web page or create a Checkout Internet web page Template, Divi has you lined. You’ll be in your technique to designing surprising checkout pages in no time.

Let’s get started!

Sneak Peek

The Previous than and After

Right here’s a quick take a look at Divi’s default Checkout internet web page compared to the new Checkout internet web page we’ll design in this tutorial.

And right here’s a closer take a look on the Checkout internet web page design on desktop and mobile.

You’ll moreover check out the live demo of this checkout internet web page design.

Download the Checkout Internet web page Structure for FREE

To position your hands on the Checkout internet web page template design from this tutorial, you’re going to first wish to download it the usage of the button beneath. To reach get right of entry to to the download you will need to subscribe to our Divi Daily email document by means of the usage of the form beneath. As a brand spanking new subscriber, you’re going to procure a lot more Divi goodness and a free Divi Structure pack every Monday! When you’re already on the document, simply enter your email care for beneath and click on on download. You’re going to not be “resubscribed” or download additional 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:forward of { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:forward of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:forward of { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media easiest visual display unit and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:forward of { 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:forward of { 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 tough { 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 tough, .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 E-newsletter and we will email you a replica of the ultimate Divi Landing Internet web page Structure Pack, plus quite a lot of choice superb and free Divi assets, guidelines and techniques. Practice along and also you’re going to be a Divi take hold of in no time. In the event you’re already subscribed simply sort in your email care for beneath and click on on download to get right of entry to the construction pack.

DOWNLOAD

It’s good to have successfully subscribed. Please check out your email care for to make sure your subscription and get get right of entry to to free weekly Divi construction packs!

To import the section construction in your Divi Library, navigate to the Divi Library.

Click on at the Import button.

Inside the portability popup, select the import tab and make a selection the download record from your computer.

Then click on at the import button.

Once finished, the section construction could be available inside the Divi Builder.

Download the Cart & Checkout Internet web page Template Gadgets for Divi

This Checkout Internet web page design could also be available for download as a part of our FREE cart & checkout page template sets for Divi.

Let’s get to the educational, we could?

In regards to the WooCommerce Checkout Internet web page and Divi

Each time you installed WooCommerce in your Divi internet website online, WooCommerce (WC) will generate key WC pages along side a shop internet web page, a cart internet web page, a checkout internet web page, and an account internet web page. The content material subject material of the internet web page is deployed by means of using a shortcode on the backend WordPress block editor.

When you flip at the Divi Builder on this Checkout internet web page, every of the content material subject material portions of the WooCommerce Checkout internet web page could be loaded as Divi Woo Modules that can be used to style the internet web page.

Woo Modules for Designing a Checkout Internet web page in Divi

Divi comes with quite a few modules which may also be key to together with dynamic content material subject material to a internet web page template. A couple of of those include Woo Modules specific to the Checkout internet web page.

The Modules which may also be key to building the Checkout internet web page or template include:

• Submit Determine – This may occasionally display the establish of the Checkout internet web page dynamically when building a Checkout internet web page template.
• Woo Perceive – This module can be set to different internet web page types (cart internet web page, product internet web page, checkout internet web page). It’ll display important notifications to the shopper dynamically as sought after.
• Woo Checkout Billing – This module shows the billing details form used all over the place checkout.
• Woo Checkout Supply – This module shows the shipping details form used all over the place checkout.
• Woo Checkout Information – This module shows the additional wisdom form used all over the place checkout.
• Woo Checkout Details – This module shows order details, along side the products being purchased and their prices, all over the place checkout.
• Woo Checkout Price – This module shows the associated fee sort selection and charge form details all over the place checkout.

Some other now not necessary woo module:

• Woo Breadcrumbs – This may occasionally display the WooCommerce Breadcrumb navigation bar.

Design a Checkout Internet web page or Template

As mentioned, we will merely use the Divi Woo Modules to design a custom designed WooCommerce Checkout internet web page. Alternatively, you’ll be capable of moreover make a selection to build a custom designed Checkout template as well the usage of the identical design process. For this tutorial, we’re going to build a custom designed Checkout internet web page construction for the checkout internet web page. Then we’ll show you simple find out how to use the custom designed checkout internet web page construction to create a Checkout Internet web page Template the usage of the Divi Theme Builder.

Designing a WooCommerce Checkout Internet web page Structure with Divi

For this WooCommerce Checkout Internet web page tutorial, the serve as is to create a custom designed internet web page construction for the WooCommerce Checkout Internet web page that is designated since the WooCommerce Checkout Internet web page in WooCommerce. At the end of the educational, we’ll show you simple find out how to merely save and import this checkout internet web page construction to create a brand spanking new Checkout Internet web page Template the usage of the Theme Builder.

Gettings Started: Improving the WooCommerce Checkout Internet web page

From the WordPress Dashboard, click on directly to edit the WooCommerce Checkout Internet web page. By the use of default, the internet web page will easiest come with the shortcode used to generate the checkout internet web page content material subject material.

Click on at the Use The Divi Builder button at the top of the internet web page editor.

Then click on at the Edit With The Divi Builder button to liberate the Divi Builder.

Clearing the Structure to Get began From Scratch

As prior to now mentioned, the internet web page will load with all the customizable Divi Modules (along side the vital factor Woo Modules) that make up the content material subject material of the Checkout Internet web page. You’ll use the existing construction and get began customizing the modules which may also be already there if you want. Alternatively for this tutorial, we’re going to get began from scratch.

To clear the construction, open the settings menu at the bottom of the internet web page and click on on that Clear Structure button (the garbage can icon) and select YES.

Creating a Segment, Row, and Column

Segment Background

To get started, add a background color to a brand spanking new commonplace section as follows:

• Background Color: #f7f3f0

Row and Column

Next, add a one-column row to the section

Creating the Dynamic Checkout Internet web page Determine

To create the dynamic internet web page establish sought after for the checkout internet web page, add a post establish module to the column.

Submit Determine Content material subject material

Inside the post establish settings, change the elements to show easiest the establish as follows:

• Show Determine: YES
• Show Meta: NO
• Show Featured Image: NO

Submit Determine Text

To style the post establish text, change the following underneath the design tab:

• Determine Font: DM Serif Display
• Determine Text Color: #fff
• Determine Text Size: 80px (desktop), 60px (tablet), 42px (phone)
• Determine Line Most sensible: 1.2em

Designing the Dynamic Woo Perceive Module for the Checkout Internet web page

It’s always a good idea so that you can upload the Woo Perceive module at the top of the internet web page so that the notices could be most visible to consumers when interacting with the checkout internet web page. Take into account that we’re designing notices that could be displayed easiest when sought after.

In an effort to upload the Woo Perceive Module, click on on so that you can upload a brand spanking new Woo Perceive module underneath the post establish module.

Woo Perceive Internet web page Type and Background

Next, change the Internet web page Type and Background color of the Woo Perceive as follows:

• Internet web page Type: Checkout Internet web page
• Background Color: rgba(153,158,117,0.1)

IMPORTANT: Ensure that to select the Checkout Internet web page since the Internet web page Type so that the woo notices will artwork as it should be.

Woo Perceive Determine Text

Underneath the design tab, change the establish text style as follows:

• Determine Font: Roboto
• Determine Font Weight: Medium
• Determine Text Color: #fff
• Determine Text Size: 14px
• Determine Line Most sensible: 1.8em

Then select the link tab and change the establish link text color:

• Link Text Color: #999e75

Woo Perceive Body Text

After the establish text, change the body text as follows:

• Body Font: Roboto
• Body Text Color: #fff
• Body Line Most sensible: 1.8em

Then select the link tab and change the link text:

• Link Font Weight: Bold
• Link Text Color: #999e75

Woo Perceive Field Labels

The Checkout Internet web page Notices include fields and field labels for things like a login form and a cut price code. To edit the style of the field labels for the ones fields, change the following:

1. Required Field Indicator Color: #fff
2. Field Label Font: Roboto
3. Field Label Font Weight: Bold

Woo Perceive Fields

Next, change the fields style possible choices as follows:

1. Placeholder Color: #fff
2. Fields Background Color: transparent
3. Fields Text Color: #fff
4. Fields Focus Text Color: #fff
5. Fields Padding: 12px top, 12px bottom
6. Fields Border Width: 1px
7. Fields Border Color: rgba(255,255,255,0.32)

Woo Perceive Button

1. Use Custom designed Sorts for Button: YES
2. Button Text Size: 14px
3. Button Text Color: #fff
4. Button Background Color: #999e75
5. Button Border Width: 1px
6. Button Border Color: #999e75
7. Button Border Radius: 0px
8. Button Letter Spacing: 1px
9. Button Font: Roboto
10. Button Font Weight: Bold
11. Button Font Style: TT
12. Button Padding: 12px top, 12px bottom, 24px left, 24px suitable

Woo Perceive Form

Each of the eye forms can be styled underneath the Form selection team. To provide the forms a gradual border, change the following:

1. Form Rounded Corners: 0px
2. Form Border Width: 1px
3. Form Border Color: rgba(255,255,255,0.32)

Woo Perceive Box Shadow

To provide the woo perceive bar a top border-like design, change the box-shadow possible choices as follows:

1. Box Shadow: see screenshot
2. Box Shadow Horizontal Position: 0px
3. Box Shadow Vertical Position: 3px
4. Shadow Color: #999e75

Designing the Woo Checkout Billing Module

Now that our internet web page establish and notices are in place, we’re able so that you can upload the Woo Checkout Billing content material subject material, some other key section to the checkout internet web page.

Previous than we add the billing content material subject material, create a brand spanking new row with a three-fifths two-fifths column building.

In column 1, add a Woo Checkout Billing module.

Woo Checkout Billing Determine Text

We will objective the establish text by means of customizing the establish text possible choices.

Open the Woo Checkout Billing settings modal and, underneath the design tab, change the following:

1. Determine Font: DM Serif Display
2. Determine Text Color: #fff
3. Determine Text Size: 30px (desktop), 24px (tablet), 18px (phone)
4. Determine Line Most sensible: 1.4em

Woo Checkout Billing Field and Field Labels

Very similar to the Perceive Module, this module moreover has possible choices to style the field and field labels. Since we would like all of our field and field labels to test right through the internet web page, we will reproduction the field and field label types from the Perceive module already created and paste those types to the Woo Checkout Billing module.

Proper right here’s simple find out how to do it:

• Open the settings of the Perceive Module at the top of the internet web page.
• Correct-click on the Field Labels selection team underneath the design tab.
• Make a selection “Copy Field Labels Sorts” from the right-click menu.

With the style now copied, open the additional settings menu inside the top menu bar of the Woo Checkout Billing module. Then select “Paste Field Labels Sorts” from the menu.

We will repeat the identical process to replicate over the field types as well.

Proper right here’s simple find out how to do it:

• Open the settings of the Perceive Module at the top of the internet web page.
• Correct-click on the Field selection team underneath the design tab.
• Make a selection “Copy Field Sorts” from the right-click menu.

With the style now copied, open the additional settings menu inside the top menu bar of the Woo Checkout Billing module. Then select “Paste Field Sorts” from the menu.

Woo Checkout Billing Form Perceive

The form perceive is what dynamically shows any notifications or errors that may stand up when filling out the form. To style the form perceive, open the Woo Checkout Billing settings and change the following:

• Form Perceive Background Color: #e0816b
• Form Perceive Padding: 8px top, 8px bottom
• Form Perceive Font: Roboto
• Form Perceive Text Size: 14px

Woo Checkout Billing Spacing and Border

To finish off the design, let’s give slightly padding and a mild border the module as follows:

• Padding: 16px top, 16px bottom, 16px left, 16px suitable
• Border Width: 1px
• Border Color: rgba(255,255,255,0.1)

Designing the Woo Checkout Supply and Woo Checkout Information

The next key portions we wish to create the checkout internet web page template are the Woo Checkout Supply module and the Woo Checkout Information module. The Woo Checkout Supply module shows the form sought after for buying into shipping wisdom forward of completing checkout. And the Woo Checkout Information module shows an get entry to form that allows consumers to enter any longer data forward of checkout.

Add Woo Checkout Supply Module

For this construction, transfer ahead and add a brand spanking new Woo Checkout Supply module at once underneath the Woo Checkout Billing module.

Add Woo Checkout Supply Module

Underneath the Woo Checkout Supply module, transfer ahead and add a Woo Checkout Information module.

Styling the Woo Checkout Supply and Woo Checkout Information Modules

Because of both a type of woo modules (Checkout Supply and Checkout Information) wish to are compatible the design of the Woo Checkout Billing module, we will reproduction the categories we wish over to every one.

Copying and Pasting the Determine Text Sorts

Let’s get began with the Determine Text types. Open the settings for the Woo Checkout Billing module and replica the Determine Text Sorts the usage of the right-click menu.

Then use the multi-select function to select every the Woo Checkout Supply and Woo Checkout Information Modules. Then paste the establish text types to one of the vital determined on modules.

Copying and Pasting the Field Labels Sorts

Repeat the identical process to replicate and paste the field labels types as well.

Open the settings for the Woo Checkout Billing module and replica the Field Labels Sorts the usage of the right-click menu.

Then use the multi-select function to select every the Woo Checkout Supply and Woo Checkout Information Modules. Then paste the field labels types to one of the vital determined on modules.

Copying and Pasting the Fields Sorts

Repeat the identical process to replicate and paste the fields’ types as well.

Open the settings for the Woo Checkout Billing module and replica the Fields’ Sorts the usage of the right-click menu.

Then use the multi-select function to select every the Woo Checkout Supply and Woo Checkout Information Modules. Then paste the fields types to one of the vital determined on modules.

Copying and Pasting the Padding

Repeat the identical process to replicate and paste the padding as well.

Open the settings for the Woo Checkout Billing module and replica the padding the usage of the right-click menu.

Then use the multi-select function to select every the Woo Checkout Supply and Woo Checkout Information Modules and paste the padding to one of the vital determined on modules.

Copying and Pasting the Border

Repeat the identical process to replicate and paste the border as well.

Open the settings for the Woo Checkout Billing module and replica the border the usage of the right-click menu.

Then use the multi-select function to select every the Woo Checkout Supply and Woo Checkout Information Modules and paste the border types to one of the vital determined on modules.

Designing the Woo Checkout Details Module

Now that our shipping and additional wisdom content material subject material is designed, we’re able so that you can upload the Woo Checkout Details content material subject material. This is some other key section to the checkout internet web page that shows the details of the purchase order. It accommodates the document of products, subtotals, and the whole amount of the purchase. It moreover shows any coupon discounts which may also be performed that can be removed with a link.

To the checkout details, add a brand spanking new Woo Checkout Details module to column 2 within the identical row.

Woo Checkout Details Determine Text

Inside the Woo Checkout Details settings modal, transfer to the design tab and change the Determine text as follows:

• Determine Font: DM Serif Display
• Determine Font Weight: Bold
• Determine Text Color: #fff
• Determine Text Size: 24px (desktop), 22px (tablet), 18px (phone)
• Determine Line Most sensible: 1.4em

Woo Checkout Details Column Label

To style the column labels, change the following:

• Column Label Font: Roboto
• Column Label Font Weight: Bold
• Column Label Text Color: rgba(255,255,255,0.32)

Woo Checkout Details Body Text

To style the body text that objectives the items underneath every column inside the document, change the following:

• Body Font: Roboto
• Body Text Color: #fff

Underneath the link tab, change the link text color:

• Link Text Color: #e0816b

Woo Checkout Details Table Border

For this design, we’re going to take out the table border altogether. To do this, change the following:

• Table Border Width: 0px

Woo Checkout Details Table Cellular

To style the table cells within the table, change the following:

• Table Cellular Padding: 0px left
• Table Cellular Border Style: none

This aligns the content material subject material within the table cells to the left and eliminates the table mobile border completely.

Woo Checkout Details Padding and Border

To stick the module’s design in line with the other modules, change the padding and border as follows:

• Padding: 16px top, 16px bottom, 16px left, 16px suitable
• Border Width: 1px
• Border Color: rgba(255,255,255,0.1)

Designing the Woo Checkout Price Module

Now that our checkout details content material subject material is entire, we’re able so that you can upload the Woo Checkout Price content material subject material. That’s the basic key section to the checkout internet web page. It accommodates clickable radio button toggles for quite a lot of charge possible choices along with the main checkout button. It moreover accommodates built-in form notices.

In an effort to upload the checkout charge content material subject material, add a brand spanking new Woo Checkout Price module underneath the checkout details in column 2.

Woo Checkout Price Background

Open the Woo Checkout Price settings and offers the module a transparent background:

• Background Color: transparent

Woo Checkout Price Body Text

Next, change the body text style as follows:

• Body Font: Roboto

Underneath the link tab change the link text color:

• Link Text Color: #999e75

Woo Checkout Price Radio Buttons

Next, change the style of the radio buttons as follows:

• Radio Button Text Color: #fff
• Radio Button Font: Roboto
• Radio Button Font Weight: Bold

Woo Checkout Price Tooltips

The tooltip is the text box that shows when a radio button toggle is open.

Let’s change the tooltip types as follows:

• Tooltip Background Color: transparent
• Tooltip Margin: -10px top, 17px left
• Tooltip Font: Roboto

Woo Checkout Price Form Perceive

Because the Woo Checkout Price module shares the identical Form Perceive selection, we will reproduction the existing form perceive types from the Woo Checkout Billing module and paste them to the Woo Checkout Price module.

Woo Checkout Price Button

To style the checkout button for the Woo Checkout Price module, reproduction the button types from the Woo Perceive module.

Then paste the button types to the Woo Checkout Price module.

Woo Checkout Price Padding and Border

To finish the design, add padding and border as follows:

• Padding: 16px top, 16px bottom, 16px left, 16px suitable
• Rounded Corners: 0px
• Border Width: 1px
• Border Color: rgba(255,255,255,0.1)

The Consequence

Right here’s what our checkout internet web page turns out like now!

Add Further Content material subject material as Sought after

At this degree, we’ve were given all the key portions for our checkout internet web page template. Alternatively you don’t have to prevent correct right here. You’ll add any content material subject material you want to the internet web page as sought after.

For our featured demo of this checkout internet web page template (available for download here), we built-in a suite sidebar with some custom designed navigation links.

Creating a Custom designed Template for the Checkout Internet web page

If you want to create a Checkout Internet web page Template, you’ll be capable of use the Theme Builder to create a checkout internet web page template construction very similar to we did with the Checkout internet web page template. Alternatively, since we already have a internet web page construction designed from this tutorial, we will simply add this construction to a checkout internet web page template.

Save WooCommerce Internet web page Structure to Divi Library

Previous than we will add the checkout internet web page construction to a checkout internet web page template, we will have to first save the internet web page construction to the Divi Library.

To do this, open the Divi Builder settings menu at the bottom of the checkout internet web page. Click on at the Add to Library icon, give the Structure a name, then click on on Save to Library.

Create New Checkout Internet web page Template

As quickly because the checkout internet web page construction is saved to the library, we’re able to create a brand spanking new checkout internet web page template.

Proper right here’s simple find out how to do it:

1. Transfer in your WordPress Dashboard and navigate to Divi > Theme Builder.
2. Then click on at the Add New Template plus icon inside the empty gray box space so that you can upload a brand spanking new template.
3. Inside the Template Settings modal, underneath the “Use On” tab, select Checkout underneath the WooCommerce Pages document.
4. In any case, click on on Create Template.

Add Checkout Internet web page Structure to the Checkout Template

Once the new Checkout template has been created, click on at the “Add Custom designed Body” space of the template. Inside the popup document, select Add From Library.

From the Load From Library popup, underneath the Your Saved Layouts tab, select the checkout internet web page construction you’ve gotten saved to the library.

Once finished, the Checkout template could be available inside the Theme Builder. To edit the template, click on at the edit icon on the body space of the template.

Final Consequence

Let’s check out the overall result of our checkout internet web page template.

And that is the way in which it sort of feels to be on tablet and phone gadgets.

Final Concepts

The process of designing a custom designed WooCommerce Checkout Internet web page template is considerably simplified and amplified with Divi’s difficult visual internet web page builder and intuitive Woo Modules.  In this tutorial, we focused on incorporating the vital factor portions that make up a checkout internet web page. Alternatively, consider, all of the other difficult Divi modules and features are at your disposal to take your checkout pages to a whole new level. With a bit of luck, this may occasionally help boost your Divi design abilities and, further importantly, lead to further conversions.

For added, check out simple find out how to design a WooCommerce Cart Internet web page Template in Divi or download our awesome FREE Cart & Checkout Page Template Sets for Divi.

I look forward to being attentive to from you inside the comments.

Cheers!

.inline-code{padding: 0px 4px; color: purple; 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 Checkout Page Template with Divi appeared first on Elegant Themes Blog.

WordPress Web Design

[ continue ]

read more