How To Customize WooCommerce Checkout Page With Elementor Widgets

Want to customize the 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 AeroCheckout comes in with its drag and drop checkout widgets and built-in templates for Elementor.

So get ready to create money-making checkout pages using the very versatile page builder, Elementor, and of course, the powerful, AeroCheckout!

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

Let’s dive 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 it already, don’t you?!

So let me introduce you to the two widgets that we, engineers at WooFunnels, have built to help you create the custom checkouts of your dream.

Widget #1: The Checkout Form

The 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’ option on the left-hand panel.

To adjust the form field widths, go into ‘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.

You can not only change the colors of the button but also text, sub-text, and a lot more:

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 widgets is another drag and drop widget 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. 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, border type, width, and do a lot more from the Style section.

Six Shiny New Checkout Templates Built for Elementor

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

These templates are built using the two widgets we have explained above and serve different requirements.

For example, you can create a global checkout, one-page checkout, sales page with the embedded order form, Shopify-style checkout, and more. Every template serves a different purpose.

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

woocommerce-checkout-elementor-templates-aero

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 optimized for mobile.

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

woocommerce-checkout-elementor-optimized-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:

woocomemrce-checkout-elementor-adding-products
Add your products to build dedicated checkout.

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

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.
woocommerce-checkout-elementor-form-builder
Checkout Form Builder of Aero

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:

And there you go!

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 templates!

But you know what! This is not all.

There are several checkout page optimization options in AeroCheckout 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 AeroCheckout and seeing all the amazing results a compelling checkout can bring for you!

So what are you waiting for? Go ahead and explore Aero here.

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.

2 thoughts on “How To Customize WooCommerce Checkout Page With Elementor Widgets”

  1. Hey Rob,

    So when you go to Design – select Elementor – and choose a template to edit with Elementor. You’ll see all the Elementor widgets on the left-hand side panel.

    Under Aero sub-heading, there are two widgets – Checkout form and Mini Cart. We’re going to be rolling out more. But the two we have are quite powerful.

Leave a Comment

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

Scroll to Top