How To Create WooCommerce Checkout Page With Elementor Widgets

Want to add a beautifully designed WooCommerce Checkout to your sales funnel?

And want to customize that WooCommerce checkout page design using Elementor?

Elementor gives you an insane amount of control over the WooCommerce product pages.

You can choose from a wide range of WooCommerce widgets such as product rating, add to cart widget, product images, product stock, and many more to create compelling product pages.

But when it comes to customizing your checkout page - Elementor doesn't have options for that. 

That's where FunnelKit (formerly WooFunnels)' Checkout comes in with its drag and drop checkout widgets and built-in templates for Elementor.

So get ready to create conversion-friendly checkout pages using the very versatile page builder, Elementor, and of course, the powerful, FunnelKit (formerly WooFunnels) Funnel Builder Checkout!

And no, you don't need Elementor Pro for any of this - the free version is good enough!

Before we begin, here's a video to customize your WooCommerce Checkout page with Elementor Widgets.

Let's dive right in.

The New Elementor Widgets for Customizing WooCommerce Checkout

As I said, Elementor gives you a whole host of options to customize the WooCommerce product page, but it also lets you customize the shop page.

However, when it comes to the checkout page - you can't customize it using Elementor.

Elementor is a users' favorite when it comes to page builders, and I'm sure you'd love to have your store's checkout page be customized using the tool as well.

You want to learn more about how to build a perfect WooCommerce elementor checkout page, don't you?!

Does Elementor work with WooCommerce?

Absolutely, yes!

Let me introduce you to the two widgets that we, engineers at FunnelKit (formerly WooFunnels), have built to help you create the custom checkouts of your dream.

Widget #1: The Checkout Form

The Elementor checkout form widgets allow you to drag and drop the checkout form anywhere you like on the screen.

This form is fully customizable. Take a look:

You can change borders, colors, field width, and so much more using the Style options on the left-hand panel.

To adjust the form field widths, go to the 'Your Information' or 'Shipping Address' section and you'll find the options to adjust the form field widths.

To change the CTA button text and colors, go to the Payment Gateways section.

Feel free to change the colors of the button but also text, sub-text, and a lot more in the payment methods section.

There's also the option to make the order summary collapsible for mobile devices.

So, it will expand only when it is tapped/clicked on by the user.

Widget #2: The Mini Cart

The mini cart widget is another drag and drop elementor widget that is built to let you display a mini cart on the checkout page.

The shoppers can see the list of all the items they've added to their cart on your eCommerce store and the respective quantities against each.

What's more? The buyer can even adjust the quantity of the product from here - add or delete an item and even recover accidentally deleted items.

This gives your users complete control over their entire purchase experience on the elementor checkout page.

Plus, you can make changes to headings, products, coupon code section, and more.

Take a look:

So the shoppers have the option to make adjustments to their order even at the final step, which obviously means that there's no need to go back to the cart page to make the required changes.

Apart from making all the functional adjustments to the mini cart, you can also change the colors and typography, border type, width, and do a lot more from the Style section.

FunnelKit (formerly WooFunnels) Checkout Templates Built for Elementor

Apart from the drag & drop widgets, you can even choose from various pre-built Elementor templates to create your checkout page.

These templates are built using the two widgets we have explained above and served different requirements such as creating your:

• Global checkout
• One page checkout
• Sales page with embedded order form
• Shopify-style checkout page, and more

All these templates are highly customizable and solve your use case.

Also, each one of these elementor checkout templates is divided into one-step, two-step, and three-step formats.

This means you can pick a template that you like, import it with a single click and use it to serve your purpose.

You'll save a lot of time in the process. Not only that, you don't even need to learn how to design, or even hire a designer to help you put together a page that looks slick and also converts.

Relieved? I am sure!

The best part is that every template is mobile friendly.

For example, this is the Minimalist template with collapsible order summary turned on for mobile:

With these new widgets and the pre-built checkout templates, the WooCommerce checkout page designed using Elementor is fully customizable.

Just style your checkout page and make it look the way you want.

The list of possibilities is now endless.

Adding Product(s) for Product-Specific Checkout Page

Another great feature that Elementor lacks in its current avatar is the ability to let you build product-specific checkout pages.

If you really want to have the option to sell specific products using a checkout page, look no further.

Aero allows you to add WooCommerce product(s) and sell just those through a particular checkout.

Of course, if you're creating a global checkout, you don't have to select products.

Here's how the product selection method works:

As you can notice, you can set additional discounts, specify the quantity, remove an accidentally added product.

Not just that, you can use drag & drop to change the order in which the products show up on the checkout page.

You can also design the page to sell one or more of the shown products.

Customizing the WooCommerce Checkout Form

I just showed you some of the amazing powers that the elementor checkout form widget has for styling the checkout page.

And while you can customize just about anything from the widget's settings in Elementor, you cannot add, edit, remove or re-order the form fields.

As an eCommerce store owner, I am pretty sure you want that ability as well.

You may want to re-order the form fields within the shipping/billing section, or completely eliminate them entirely when not needed.

It could be the case if you're selling only digital products.

You can even add custom fields to your checkout form.

Whatever your special case may be, Aero's thoughtfully engineered checkout form builder is here to serve your needs.

Here are a few of its highlights:

• Add new checkout form fields - Choose from HTML, radio, text, checkbox & more.
• Edit existing fields - You can change the form field name, label, and placeholder text.
• Re-order the form fields - Place email at the top or re-arrange address-related fields such as pin code before the rest.

You can add new sections and rearrange them. Then within these sections you can add, remove, or edit the fields among many other options.

To add a new step to your checkout form, hit the plus icon next to 'Step 1'.

To add a new field, hit the option in the right-hand panel. Here's a list of field types you can choose from:

How to Edit Woocommerce Checkout Page with Elementor?

This section holds the answer to your 'how do I create a WooCommerce checkout page?' query.

FunnelKit (formerly WooFunnels) Funnel Builder is the easy WooCommerce checkout page customization plugin you have been looking for.

Not only does it let you create and customize your WooCommerce checkout pages, but it allows you to set up all the sales funnel pages like opt-in pages, sales pages, upsell offers, and thank you pages.

Follow the step by step instructions to customize the WooCommerce checkout page with Elementor.

Step 1: Install and activate the Funnel Builder

Get a copy of the FunnelKit (formerly WooFunnels) Funnel Builder.

Please note that the Funnel Builder also has a Lite (free) version but we will be using the Pro version to take advantage of all the features and customizations.

Once you have purchased it, go to your FunnelKit (formerly WooFunnels) account and download its zip files:

• Funnel Builder
• Funnel Builder Pro

Install and activate both the plugins by uploading them to your WordPress website.

Now, copy the license code from your account.

Paste the license in the settings section to activate it.

That's it!

You're now ready to use the Funnel Builder.

Step 2: Add a new funnel

Go to Funnels.

Add a new funnel and name it

Click on 'Add' when done.

Next, go to the Checkout tab and import the template.

Please note that apart from Elementor, FunnelKit (formerly WooFunnels) integrates with various page builders such as Divi, Oxygen, Gutenberg, Customizer, and others using WooCommerce Checkout shortcodes.

Here, we will be importing the two-step Minimalist template for our WooCommerce elementor checkout page.

That's it, your funnel will get created with the checkout page.

Step 3: Customize your WooCommerce checkout page

Click on the page to start editing your WooCommerce checkout with Elementor.

You'll get inside the Checkout customization area.

Click on Edit Template under Design to start customizing your checkout page.

This page will load in Elementor.

You can now customize this page with the Elementor widgets as discussed above.

Edit all the text parts in the content tab and customize the design portion by styling the fonts, letter spacings, alignment, colors, border color, radius, margins, etc. on your Woo Checkout page.

Plus, you have a lot of widgets to try to enhance the user experience and boost conversions.

Click on Update when done.

This is how you can add and customize the checkout page with Elementor using the FunnelKit (formerly WooFunnels) Funnel Builder.

Ready to Create Your WooCommerce Checkout Page with Elementor?

Just to quickly recap we looked at what customizations you can do on a WooCommerce checkout page using Elementor.

We went over the amazing widgets you need to make your checkout page look exactly how you want. And of course, the pre-built elementor checkout templates!

But you know what! This is not all.

There are several checkout page optimization options in FunnelKit (formerly WooFunnels) that we didn't cover here.

You can enable express checkout, Google address autocomplete, multi-step field preview, and more.

Elementor widgets and templates are just one part of the equation - it's the other useful features that complete it.

Now, I am sure you're excited about implementing FunnelKit (formerly WooFunnels) Checkout and seeing all the amazing results a compelling elementor checkout page can bring for you!

So what are you waiting for?

Go ahead and explore FunnelKit (formerly WooFunnels) Funnel Builder here >>