Divi WooCommerce Checkout: Now Customize your Checkout Pages with Divi Modules
Tavleen Kaur
January 21, 2021
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.
Contents
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.
Let’s explore a few incredibly well-built templates:
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 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!
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.
Customize this simple yet optimized layout further in Divi to match your brand, and you're all set.
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.
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.
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.
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.
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 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!
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.
You can customize the checkout form using this 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?
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.
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.
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.
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.
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.
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.
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.
Follow the step-by-step instructions here to create a Divi WooCommerce checkout page.
Once you've installed and activated the Funnel Builder, go to 'Funnels' and click on Add New.
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.
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.
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.
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.
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.
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.
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.
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.
Some of the actions that can be undertaken in this tab are as follows:
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.
This tab allows you the features that can help you optimize the returns on your page.
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.