Divi WooCommerce Checkout: Now Customize your Checkout Pages with Divi Modules

Tavleen Kaur
January 21, 2021
Divi WooCommerce Checkout: Now Customize your Checkout Pages with Divi Modules

If you love Divi & use WooCommerce, we've got some news for you!

After we rolled out Elementor's deep integration with FunnelKit (formerly WooFunnels) Funnel Builder, there was one question that we got repeatedly asked by you:

"When will I be able to customize my WooCommerce checkout page using the easy-to-use Divi?"

The answer is now! Here's the big piece of news: FunnelKit (formerly WooFunnels) now deeply integrates with Divi by Elegant Themes.

You have access to pre-made custom Divi checkout page templates that can be imported with a single click.

There are two highly customizable Divi modules to build your checkout pages from scratch as well.

So, Divi lovers, get excited about adding checkout pages to the vastly superior visual editing experience of Divi!

Quick Heads up: We've launched a deep integration with Divi for the entire sales funnel. You can now build every page in your funnel using Divi templates!

Explore this video on how to customize your Divi WooCommerce Checkout pages:

Let's begin to customize your Divi WooCommerce Checkout pages with different templates and modules.

The Spectacular WooCommerce Checkout Page Templates for Divi

Each WooCommerce user has a different requirement for their checkout page.

You may want to create a global checkout, i.e., the simple checkout page that replaces the default or native WooCommerce checkout.

Or create a product-specific checkout page for their sales funnel.

You may want to create a sales page with an embedded Checkout form for a dedicated funnel.

Whatever your use case may be, you now have a template created by our FunnelKit (formerly WooFunnels) team for every goal at your disposal.

No one-size-fits-all, no design sense needed, no shortcodes—none of that.

Pick a Divi template you like in one-step, two-step, or three-step formats, then customize it in Divi and go live.

WooCommerce Checkout Page Templates for Divi

Let’s explore a few incredibly well-built templates:

#1: The Minimalist Checkout Template Built-in Divi for WooCommerce

The default WooCommerce checkout page looks plain and unoptimized.

To help you replace the default checkout with something clean and optimized for sales, we built the Minimalist template on Divi for WooCommerce.

As you may notice, there are form fields that are clubbed under different sections, and every section is distinguishable from the other.

This makes the page look clutter-free and very approachable to the viewer.

The Minimalist Checkout Template Built-in Divi for WooCommerce
Divi Checkout Page (Minimalist Template)

The mini cart on the right-hand side lets users see their order total, subtotal, and the list of the cart items with images.

So after importing the template, make a few customizations and upload your logo.

That's it, hit the Divi WooCommerce checkout page live and you're good!

#2: The Shopify Style Checkout Template - ShopCheckout

WooCommerce users love Shopify's default checkout page. And why not!

It looks incredibly clean and compelling.

Can you believe that over 3 million Shopify users are using this checkout as it is? Yes, and that means it's conversion optimized.

So it is understandable that our users wanted to create the same type of checkout in WooCommerce as well.

To deliver on that demand, we built the Divi WooCommerce ShopCheckout layout to help you with just that.

The Shopify Style Checkout Template - ShopCheckout
Divi Checkout Page (Shopify Template)

Customize this simple yet optimized layout further in Divi to match your brand, and you're all set.

#3: The Razor Checkout Template

Want to sell specific products through dedicated checkouts? We've built the Divi Razor template for WooCommerce to serve that goal!

Highlight the product’s unique value proposition using the image and brief explanation section at the top.

It's a clean and simple page with the product information, checkout form, and testimonials at the bottom being the only elements present.

The Razor Checkout Template

It ensures that the focus remains on the product and is not diverted anywhere else.

This template is especially good if you’re selling a specific product through ads, and you want to lead them into a funnel with one-click upsells.

#4: The Persuader Checkout Layout

Most checkout pages on the Internet tend to look overwhelming and cluttered.

The Divi Persuader checkout page layout for WooCommerce, on the other hand, is minimalist because it leaves a lot of white space.

The Persuader Checkout Layout

This checkout template shows why you should trust the business and the product right on the top, along with the progress bar.

It also clearly displays the testimonials right next to the CTA button.

So if you want your checkout page to have a good amount of breathing space but still be impactful, this one's for you!

Let's look at our next Divi WooCommerce checkout page template.

#5: The Magnetic Checkout Template

Like a magnet, this page pulls your attention towards the product and the benefits of the product listed.

The Magnetic Checkout Template

At the very top of the checkout, form is the product's image with a small description.

Right next to the checkout form, a section narrates why and how the chosen product is unique and special.

Use the section below the checkout form to highlight a message from the creator or seller; this will add a personal touch to the page and make it even more converting.

These are just some of the templates available for Divi on your WooCommerce store. There are a few more on the list.

Open FunnelKit (formerly WooFunnels) now and try them all out!

Meet the Divi WooCommerce Checkout Page Modules

Apart from giving you access to pre-built WooCommerce checkout templates, we’ve also given you the option to build your checkout pages from scratch.

You can do it using Divi modules made for FunnelKit (formerly WooFunnels) Checkouts.

Let's explore the WooCommerce modules for creating your Checkout page.

#1: The WooCommerce "Checkout Form" Divi Module

You can customize the checkout form using this module.

The Checkout Form Divi Module

Everything from changing the way steps show up in breadcrumb or tabs format, to the checkout form field widths through these settings.

Use the ‘Design’ section to beautify the said form and fields - from changing typography to the color of the margins and CTA buttons.

Under the Content bar, customize the fields on your WooCommerce Divi checkout page displayed to your customers, like:

Steps: Under this, you define how you want the steps to look like and what you want them to say, at the top of your Divi WooCommerce Checkout page. Choose the way the steps on your multi-step form are shown. Is it in tabs or breadcrumbs format?

Define how you want the steps to look like and what you want them to say at the top of your Divi Checkout page

Checkout form fields: This is where you ask for your customer’s details - from their name to their preferred delivery address. Customize the width of each field displayed from many options.

Customize the width of Checkout form fields

Call to Action buttons: The payment gateway is a default section on the checkout page. The funnel builder lets you customize the CTA for payment. You can modify its text, colors, borders, etc. from the design tab of your Divi WooCommerce checkout page.

Call to Action buttons

Collapsible Order Summary: Isn’t it amazing when you can hide and show the cart content at the click of a button? That is made possible under this tab.

Collapsible Order Summary
Pro Tip: The responsive editing allows you to show the order summary collapsible only on the mobile checkout and not the desktop.

#2: The Mini Cart Divi Module

The mini cart lets your customers get a glimpse of the product they are about to pay for.

You can customize this module on your Divi WooCommerce checkout page the way you want.

The Mini Cart Divi Module

Change the way the cart is displayed on the page for the visitors to see. It is very similar to the Checkout form in a lot of ways.

Heading

You can edit the heading of your mini cart that you wish to be displayed on the page.

Mini Cart Heading settings

Product

Here you can make quite a few modifications to the carts section.

Mini Cart Product settings

Enable product images: The product image reassures the customer of the product they’ve added to the cart. So we would suggest you have the images enabled for the mini cart.

Adjust the item(s) Quantity: The users adjust the product quantity on the checkout page itself ensure that they don’t have to go back to their cart again and again, as that can lead to cart abandonment.

Delete an item: Having the delete option be enabled in the mini cart gives full control to the user.

They can even undo an accidental deletion and won’t need to go back to the product page to add it back to the cart.

Such enablements can be accessed in the ‘Content’ tab of the settings menu.

Coupon

You can also add the coupon section here and make it collapsible if you so desire.

Mini Cart Coupon settings

The ‘Design’ tab would give you all the same options as in the Checkout form to customize and style the cart to your liking.

Add padding, margins, border width, border radius, spacings, and everything else related to design here to create the Divi WooCommerce checkout page the way you want.

How to Create & Customize the WooCommerce Checkout Page in Divi?

Follow the step-by-step instructions here to create a Divi WooCommerce checkout page.

Step 1: Add a new funnel with the Checkout page

Once you've installed and activated the Funnel Builder, go to 'Funnels' and click on Add New.

Go to 'Funnels' and click on Add New.

Name your funnel as 'Divi WooCommerce Checkout Funnel'.

Name your funnel as 'Divi WooCommerce Checkout Funnel'

Now, you'll be able to see all the templates that we discussed.

Click on the 'Checkouts' tab and select the Divi theme builder.

Then import the template you like.

Import the Minimalist checkout page template

Your funnel will get created with the checkout page on it.

We hope this answers your 'how do I make a checkout page in Divi?' query.

Step 2: Customize the Divi WooCommerce Checkout page

Click on the Checkout page name to start editing it.

Click on the Checkout page name to start editing it

Now, you'll get directed to the checkout page customization area.

Click on 'Edit Template' to customize your checkout page in Divi.

Make sure to activate and enable the Divi builder plugin.

Edit template to start customizing your checkout page

Now your WooCommerce checkout page will load in Divi.

Take advantage of the Divi shop modules to customize your checkout page.

Feel free to make the changes to different sections, buttons, headings, text modules, images, and so much more.

For the checkout form and mini cart, you get the custom designed modules from FunnelKit (formerly WooFunnels) - Use them to customize your Woocommerce checkout page design.

Follow the section below to create your checkout page the way you want.

Enjoy Full Design Control Over your Divi WooCommerce Checkout Design

FunnelKit (formerly WooFunnels) lets you have full command over the way your page looks and works.

With Divi integrated, you get several options to design your checkout page to your liking.

You can add additional modules to the page if you want.

There are several stylizing options available for you to customize the page your way.

Add Border Radius: Border radius gives a rounded edge to your selected module.

It makes the page look a little softer overall, so you should try it if that is the kind of effect you're going for.

Divi WooCommerce checkout page - Add Border Radius

Add Margins and Padding: Margin is the gap between two modules on the page, while Padding is the space between the border of a module and the text or image within.

These play a key role in creating a page and ensuring the page doesn't look too busy.

Divi WooCommerce checkout page - Add Margins and Padding

Coupon: This tab under Mini Cart Settings allows you to style the tiny box used to enter coupon codes. From changing the border of the box to the color of the text within.

Here you get to play around with 'Normal' and 'Hover' options as well.

Divi WooCommerce checkout page - Add Coupon

There are many others to customize the font and buttons on the page.

Play around to find the style that fits your business style the best.

Customizing the Divi WooCommerce Checkout Form Fields

Like we have been saying all along, you can design and structure the page in Divi with the Funnel Builder.

That means that you can add, delete, and even rearrange the fields of a checkout form.

To re-arrange the fields and sections on the page, all you need to do is drag and drop them around the page.

Checkout field editor

Some of the actions that can be undertaken in this tab are as follows:

  • Add new fields and select the field type from the given choices - Radio, HTML, Text, Checkbox, etc.
  • Add steps to change the format of the checkout page from one-step to two or three-step format.
  • You can even add a "Bestseller" tag to a product if you wish to.

And much more.

Read our blog on the WooCommerce Checkout Field Editor here.

Be sure to hit "Save Changes" once you're done.

Apart from the Fields tab, there is an Optimizations tab right next to the fields tab, from where you can enable express checkout options, Google Address Autocomplete, and other features to increase sales.

Divi WooCommerce checkout optimization

This tab allows you the features that can help you optimize the returns on your page.

Ready to Build Divi WooCommerce Checkout Pages?

Divi lets you style your WooCommerce checkout pages with great ease.

Even without any design or coding knowledge, you’d be able to put together a beautiful and cohesive WooCommerce checkout page using Divi that would get you splendid returns.

FunnelKit (formerly WooFunnels) supports the integration amazingly by giving you easy-to-understand layout options for your page.

So get yourself FunnelKit (formerly WooFunnels) Funnel Builder today, play around with Divi, and create beautiful WooCommerce checkout pages.

Author: Tavleen Kaur
Do you know after Amazon implemented the 1-click buy system, their sales shot up year-on-year hitting $88.9 Billion mark in 2014? Jeff Bezos attributed it to a friction-free & streamlined buying process. At FunnelKit (formerly WooFunnels), we're determined to give you the tools you need to do the same in your business. I am Tavleen and I help you get there faster.
Ready to create revenue-generating funnels in Wordpress?
Click Here

Increase your sales, starting today.

Grab Our Exclusive Bundle
chevron-down