How To Customize WooCommerce Checkout Page With Elementor (Without a developer)

Want to have complete control over your WooCommerce checkout page design?

Elementor recently hit 5 million active installs and is the most user-friendly page builder on the planet.

When combined with AeroCheckout, its power multiplies, and it gives you a significant amount of control over your WooCommerce checkout page design.

So get ready to create a superior-looking checkout page using the very versatile Elementor.

Excited? Let’s dive in.

Want to watch the whole step-by-step tutorial in action? You got it! Click on the video and start watching.

What Do You Need to Design a WooCommerce Checkout Page with Elementor?

Up until this point, there was no way you could customize a WooCommerce checkout using Elementor.

Elementor is a versatile page builder but cannot customize checkouts. Enter AeroCheckout 2.0.

Aero now gives you what you need to create beautiful checkout pages using Elementor.

Ingredient #1: The Checkout Widgets

Elementor’s in-line visual editing experience is unmatched. It gives you what it calls widgets or design elements.

Image, video, button, icon, form, review are all plug & play highly customizable widgets.

Now with AeroCheckout, you get two more widgets to design your checkout pages:

  • Checkout Form
  • Mini Cart

Together they allow you to create gorgeous & fully-functional checkout pages from scratch.

woocommerce-checkout-elementor-widgets

 

Ingredient #2: One-Click Import Checkout Templates

Different use cases have different requirements.

You may need a global checkout page to swap with your default checkout. Or a one-page checkout to create a funnel for specific products.

Or maybe you want to create a clean Shopify-style checkout in WooCommerce.

You need templates to solve different purposes.

With Aero you get six templates divided into single-step and multi-step formats, making it 18 different versions.

woocommerce-checkout-elementor-templates
WooCommerce Checkout Templates in Elementor

These templates are one-click import. And built keeping different needs in mind to save your time.

Use it to replace your default checkout page with it.

Take a look at how clean and clutter-free it looks:

Minimalist Checkout Page built with Elementor (3-step template)

Customizing the Checkout Page using Widgets

You can customize your checkout page using the widgets in three ways:

  • Textual and visual customizations
  • Typography & colors
  • Optimizations for mobile

Adjusting the form field width

If you want to change the field width, click on the pencil icon on the checkout form and you’ll see a whole host of editing options.

 

From the drop-down, choose full, one-half, one-third, and so on.

Changing the button color & text

Go to Style tab > Payment Gateways:

 

And change button color on static and on hover.

In addition, you can make the button sticky on mobile through the toggle. 

Making the order summary collapsible for mobile 

To enable the collapsible order summary, go to Sections >> Collapsible Order Summary >> Enable:  

 

Make sure you select mobile from little icon list right next to the ‘Enable’ option.

This is how collapsible order summary appears on mobile:

 

These settings are designed to make your checkout page look just as good on mobile as it looks on desktop.

Similar options are available to customize the mini cart widget.

This widget allows you to append a mini cart on the checkout page so the users don’t have to go back to the cart page to edit.

 

You can enable or disable:

  1. The image accompanying the product
  2. Quantity switcher to let users adjust the quantity
  3. Remove option

It’s a very flexible and powerful widget and helps reduce friction on the checkout page.

Add Product(s) for Your Product-Specific Checkout

To create a global checkout you don’t have to add any products.

The preview can be generated on its own.

But when you’re selling specific products through the checkout, then you must add products.

Click on ‘+ Add Product’ to add a new product. Here’s how they’ll appear once added:

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!

Build Your WooCommerce Checkout Form

AeroCheckout’s intuitive form-builder lets you:

  • 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 have an open canvas.

Aero’s form-builder is very thoughtfully engineered.

woocommerce-checkout-elementor
Checkout Form Builder of Aero

Aero has wholly re-engineered the form builder so that you can do much more than simply rearranging a few fields.

You can add new sections, rearrange them, add fields within the section, edit, remove, and more.

In addition, you can also add a new field by choosing from 11 different input types:

 

There’s an unlimited amount of flexibility available to you when it comes to designing your checkout form.

You also have advanced options such as adding a ‘Best Value’ or ‘Super- Saving’ tag on any choice in the list.

Next Steps

We know you have been looking for ways to customize your WooCommerce checkout page.

And are committed to creating a beautiful checkout page design that offers your customers smooth purchase experience.

Then you should look no further than the very flexible Elementor and the AeroCheckout.

No, you don’t need the Pro version of Elementor.

So go ahead and explore more about AeroCheckout >>

Happy Designing! Happy Converting!

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