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 AeroCheckout, 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: AeroCheckout now deeply integrates with Divi by Elegant Themes.

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

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

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

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.

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 for every goal at your disposal.

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

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

Divi-Templates

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.

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.

Divi WooCommerce 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 live!

#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 our users wanted to create the same type of checkout in WooCommerce, and we’ve built the ShopCheckout layout to help you with just that.

 

Divi WooCommerce 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 Razor template 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.

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 Persuader checkout page layout, on the other hand, is minimalist because it leaves a lot of white space.

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!

#5: The Magnetic Checkout Template

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

At the very top of the checkout form, the product image is shown with a small description explaining it to the customers.

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. There are a few more on the list.

Open AeroCheckout now and try them all out!

Meet the All-New Divi WooCommerce Checkout 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 AeroCheckout.

Let’s explore the modules.

#1: The Checkout Form Divi Module

You can customize the checkout form using this module.

Divi-checkout-form-settings

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. All can be done under this tab from changing typography to the color of the margins and CTA buttons.

Under the Content bar, customize the fields 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 page. You can choose if the steps on your multi-step form are shown in tabs or breadcrumbs format.

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.

Divi-field-widths

Call to Action buttons: Payment gateway is a default section on the checkout page. Aero lets you customize the way the CTA for payment is shown and what it says. You can modify its text, colors, borders, etc.. from the design tab.

Divi-CTA button- text

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.Divi-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.

mini-cart-settings

You can 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.

Product

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

Divi-minicart-product

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 ensures 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.

Divi-minicart-coupon

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.

Enjoy Full Design Control Over your WooCommerce Checkout Design

AeroCheckout 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.

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.

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-coupon-button-design

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 WooCommerce Checkout Form Fields

Like we have been saying all along, you can design and structure the page; however, you desire with AeroCheckout.

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-form-sections-and-fields

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,, 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.

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.

checkout-form-optimisations

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 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.

AeroCheckout supports the integration amazingly by giving you easy to understand layout options for your page.

So get yourself AeroCheckout today to play around with Divi and create beautiful pages.

If you’re already a user of AeroCheckout, you simply need to upgrade yourself to our latest version and make sure Divi is activated on your site.
The latest version comes out on Monday, 19th October.

Get to designing checkout pages with great returns on AeroCheckout and Divi now!

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Tavleen Kaur

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 BuildWooFunnels, 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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top