Do you want to create beautiful and optimized WooCommerce checkout pages using Elementor?
You got it!
If you use Elementor, you’ll agree that it gives you a significant amount of control over the page design. Its in-line visual editing experience is unmatched.
And now you can make the most of it to create:
- Global checkouts
- Shopify-style checkouts
- One-page checkouts
…and even multi-step checkouts in a few minutes.
In this post, we’ll show you how to unleash the power of Elementor and AeroCheckout to build custom WooCommerce checkout pages and order forms that convert.
Want to watch the whole step-by-step tutorial in action? You got it! Click on the video and start watching. Grab a coffee, though! ☕️
- Choose from Pre-built Checkout Templates for Elementor
- One-Click Import a Template
- Meet the Checkout Widgets for Elementor
- Add Product(s) for Product-Specific Checkout Pages
- Build Your WooCommerce Checkout Form
- Optimize your Checkout Pages for More Conversions
Choose from Pre-built Checkout Templates for Elementor
We’ve designed six gorgeous checkout templates for Elementor.
Each of these templates is divided into one-step, two-step, and three-step formats, making it a total of 18.
These professionally-designed templates ensure that you don’t spend much time designing your checkouts from scratch.
Using the customization and flexibility available inside of Elementor, you can make these templates look the way you want them to.
Take a look at one of the templates i.e. the Minimalist:
Use it to replace your default checkout page with it. Take a look at how clean and clutter-free it looks:
One-Click Import a Template
You can import any template you like with a single click and edit them inside of Elementor.
For the purpose of this tutorial, we’ll be importing the two-step Minimalist checkout page template.
Apart from importing one of the templates – you also have the option to build your own checkout page from scratch.
For doing that, just hit the build from scratch option and a blank page will open up in Elementor.
On the left-hand panel in Elementor, you’ll see two widgets under AeroCheckout – Checkout Form and Mini Cart.
These widgets give you a headstart when you’re building your checkout page from scratch.
Let’s discuss the two widgets in detail.
Meet the Checkout Widgets for Elementor
We’ve built highly customizable widgets to let you create checkout pages from scratch.
These are highly customizable, and you can edit the typography, colors, borders and so much more to make your page look on brand. Take a look:
Let’s now explore the customizations possible in both these widgets one by one.
Widget #1: The Checkout Form
This widget lets you add a checkout form on your page. Here’s how:
To customize the widget, click on the pencil icon and a whole host of editing options will open up on the left-hand panel.
Here you go:
Under the Sections, the first thing you’ll notice is the Steps tab.
The next section is the ‘Your Information’ section. Then you have the address, followed by the payment gateways.
Customizing the Steps in case of a Multi-Step Form
If you’re using a multi-step checkout template then you can customize the steps of your checkout form.
Click on the pencil icon and go to the ‘Steps’ section.
Choose from Breadcrumbs and Tabs to display the steps, also set the heading for each of your steps.
Go to the Style tab for changing colors, typography, and more. You can change the text color, background color, count border color, and more.
Once done, hit the ‘Update’ button.
Adjusting the Field Widths
You can adjust the field width on your checkout form by hitting the ‘your information’ tab where you will find all the form fields.
Choose the width from the drop-down:
So you can choose from full, one-half, one-third and two-third.
You can see the changes that you make to the field widths. It makes for a great in-line visual editing experience.
Customizing the CTA Button
In the Payment Gateways section, you have the option to customize the CTA Button. Change the colors, width, text, typography, and more.
Click on the ‘Payment Gateways’ section on the left-side panel. Inside the Payment Gateways section, you’ll see a range of options to customize the section.
Take a look:
So you can set the button text, return to cart text, and so on from here.
Additionally, if you want to change the colors and button width, hit the Style tab from the top. And go to Buttons:
There’s also the option to make the CTA button sticky right beneath it.
Take a look at how it would look:
Making the Order Summary Collapsible
Keeping the small screen size of mobile in mind, we’ve given you the option to make the order summary collapsible.
So when the user taps on the arrow, they can see the full order summary otherwise it remains in the closed state:
To make it collapsible, go to the Sections tab from the top >> Collapsible Order Summary:
As you can notice, here you can also enable/disable the coupon field in this section and turn it collapsible too.
Widget #2: The Mini Cart
The mini cart widget lets you display a cart on your checkout page.
The simple idea behind the cart section is that people don’t have to go back to the cart page to adjust the quantity or delete an item.
They can do those edits on the checkout page itself.
Enabling Quantity Switcher & Allowing Product Deletion
When you hit the pencil icon on top of the mini cart, all the settings related to the widget will show up.
From here tap on the product drop-down and you can turn on or off the various options:
You also have the option here to allow product deletion. So when you enable it, users will be able to delete a product they don’t want from the mini cart widget itself.
Once done, hit the ‘Update’ button.
You can even enable the coupon field and make it collapsible if you like.
So once you’ve done customizing the checkout widgets, hit the ‘Update’ button to save your changes.
Add Product(s) for Product-Specific Checkout Pages
If you’re building a global checkout page, there’s no need to add products in the product section of Aero Checkout.
But in case you’re creating a dedicated checkout page to sell specific items, then you need to add those items in the products tab.
Aero lets you add the discount and specific quantity for each of the products for a dedicated checkout page.
Take a look:
You can also re-arrange the added products using a simple drag and drop to make them appear on the checkout in an order that you want.
Apart from that, when you scroll at the bottom of the page, you’ll find the product selector settings:
So you’ll see 3 options here:
- Restrict the prospect to select one option from the list (accompanied by a radio button)
- Allow them to select more than one option (accompanied by a checkbox)
- Show all the options pre-selected by default that cannot be unchecked (accompanied by pre-ticked checkboxes)
You can select from any of these options using the radio button.
Build Your WooCommerce Checkout Form
AeroCheckout provides an open canvas to design your checkout form. You can set up your checkout form by going under the ‘Fields’ tab.
Here’s how it looks:
Aero has completely 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.
Let’s look at the products field that allows you to customize the way products show up on the checkout page:
In the Advanced tab, you can choose to enable the Best Value Tag.
It can be a ‘Best Value’ tag or ‘Super Saver’, ‘Limited Edition’, or any custom tag that you want.
Here’s how you can add it:
Once done, hit the ‘Update’ button and you’re good to go.
Optimize your Checkout Pages for More Conversions
All the pre-built checkout page templates built using Elementor are already optimized.
Additionally, AeroCheckout provides you a dedicated ‘Optimization’ tab where you’ll find a bunch of options to further optimize your checkout page.
Here’s a glimpse of the ‘Optimizations’ tab:
You’ll find some interesting optimizations here:
Google Address Autocomplete
When users enter the first few characters of their address, Google suggests potential address in a drop-down.
The user just has to select one from the drop-down and the rest of the address gets filled up automatically.
Take a look:
Smart Buttons for Express Checkout
People who opt for express checkout options do not have to fill out the checkout form manually.
They simply need to select their preferred payment gateway and then login with their credentials to complete the payment.
Since their credentials are already stored with the express checkout provider, the form gets filled up automatically.
This method is 60% faster and saves them an entire minute during the checkout process.
Here’s a dedicated post that takes you through 21 interesting optimizations possible in AeroCheckout. We’d highly encourage you to read that!
The Truth About Creating Compelling Checkout Pages
Your checkout pages aren’t just pages to ask for payments from prospects. They’re the final pitstop.
Get them wrong and all the effort spent on creating pages before them will go for a toss as well.
So don’t fizzle out here.
Build beautiful WooCommerce checkout pages that look on-brand and professional. Create dedicated checkout pages for specific products to direct ad traffic.
And to do that, go ahead and use AeroCheckout. Enjoy its deep integration with Elementor.
Happy designing! Happy selling!
Have you read our post on AeroCheckout 2.o release? There’s just so much packed into this one update that you’ll love it!