WooCommerce One-page Checkout: How to Create One with Elementor

Harvard Busines Review conducted a study on 7000 consumers.

They aimed to find out what makes people complete an intended purchase without falling off.

And they came back with a definitive answer – it’s ‘decision simplicity.’

The single biggest driver of sales is the ease with which people can gather all the details about a product.

A WooCommerce one-page checkout lets you do exactly that i.e., provide decision simplicity.

Instead of putting different hoops to jump through, in their way – you can direct them to a dedicated one-page checkout and close the sale with confidence.

I’ll show you how, in this post. Strap on your belt and come with me.

Enjoy watching over reading? No problem. Hit play and watch the full tutorial.

What is a WooCommerce One Page Checkout?

One-page checkout is a product-cum-checkout page.

The user can explore the product in great detail and then purchase it from the same page.

There is no back-and-forth involved; they don’t have to switch tabs or pages.

There’s no cart process in the flow.

One-page checkout is excellent for selling specific products that require a distraction-free buying environment.

You can direct traffic from your email list, Facebook ads, Instagram ads, and more such places.

What’s Wrong With The Conventional WooCommerce Checkout Flow

In a typical retail store in the offline world, a shopper first chooses what to buy and then adds it to their cart.

They then go to the checkout counter, where they often have to wait for their turn.

That’s precisely how we treat users in the online world as well.

Starting the journey on the product page, they click on ‘Add to Cart,’ then ‘View Cart,’ after which they land on the cart page.

Here, they can adjust the quantity or delete an item.

They then click on ‘Proceed to Checkout’ and finally click the ‘Place Order.’

As you can imagine, there are 3 or 4 steps in this long-drawn process, and drop-offs happen at every step on the way.

The number of people who started the journey on the product page and the number of people who finish the journey on the Thank You Page, there is a vast difference between the two.

A one-page checkout, on the other hand, reduces this gap and streamlines the purchase flow!

5 Reasons Why a One-Page Checkout Converts Better Than The Traditional Checkout Flow

Let’s look at the reasons why a one-page checkout will drive more conversions at a higher-order value for your business.

Reason #1: The purchase process is fast and easy

Since all the information related to the product, including reviews, product demonstration, video, and even the checkout form are on one page, there is no back-and-forth needed.

The user can explore the product extensively on this page, and then when they’re ready, they can fill out their details to buy.

Reason #2: People can choose between different relevant offers

For example, they can pick an offer from the following – Buy 1 at a flat discount, Buy 2 Get 1 Free, or Buy 3 Get 2 Free.

Or pick from one-shot payment and a longer, easier payment plan.

This makes people feel in control of their decision.

Reason #3: There are no distractions in the process 

Yes, there are no distractions involved- shoppers don’t see multiple products or cross-sells and upsells – all at the same time.

Instead, you can create a strategic sales funnel with order bump and one-click upsells to maximize your returns on ad spends.

Reason #4: You can capture more abandoned carts by collecting email first

Since you’ll be directing traffic from Facebook ads, Instagram influencers, Instagram ads, your email lists, and more such places to this one-page checkout… I’m sure it’s important for you to capture more carts.

You can do this by breaking your checkout into a multi-step process and making email the first field.

This will allow you to capture more emails in case of abandonment.

Reason #5: One-page checkout is perfect for mobile conversions 

50% of traffic comes from mobile. A one-page checkout can be perfectly optimized for mobile.

The users can explore the product on the page, read relevant case studies, watch videos, and when they’re ready just hit a button to land on the checkout form.

It’s even better on mobile when you don’t have to changes pages and switch tabs!

Some Interesting One Page Checkout Examples

Alright! Roll your sleeves, it’s time for some super interesting examples!

Example #1: Grant Cardone’s Embedded Checkout Form

If your funnel involves paid advertising then you know how a little optimization can make a big impact on your returns.

A one-page checkout helps you get the ROI your business needs to thrive, not just survive.

Take a look at the order form from Grant Cardone:

He uses the page to describe the product in great detail and on the right-hand-side the checkout form calls for action.

There are no redundant steps in the flow, it’s all fast and easy.

Also, notice there’s an order bump on the second step to increase the order value. He’s offering users to upgrade to a course at $37 more.

The CTA button is also optimized for more clicks.

Example #2: Wardee Harmon’s Single Product Checkout Page (Built With Aero)

Wardee is the founder of Traditional Cooking School and a pro user of Aero Checkout.

Take a look at her super high converting checkout page:

Notice what makes Wardee’s checkout page convert:

• The image showing the product in action is clear & attention-grabbing.
• The quantity adjuster at the top eliminates the need for a separate cart.
• The reasons at the right-hand side are value-loaded and help users compare that bib with the others in the market.
• Other sections like guarantee, privacy, and questions/support add the much-needed elements of credibility to the page.

WooCommerce One Page Checkout Templates

In this section, we’ll explore a couple of WooCommerce one page checkout templates that are built using AeroCheckout.

In Aero, there are three ways to build your checkout page –

• Customizer – Choose this option when you don’t want to use any third-party page builder
• Elementor – Select this if you love the flexibility of Elementor  and would love to design your checkout using it
• Custom – To build a checkout using a third party page-builder like Divi, Beaver, Oxygen, Thrive, and more.

All these templates are divided into single-step and multi-step formats.

So you can choose the one which suits your needs and import it with a single click.

Let’s look at one template from each of the Customizer and Elementor sections.

Template #1: The Closer Checkout Template

This is a one-page checkout template called Closer built using Elementor with Aero.

It looks pretty neat and the one aim of this checkout is to sell that one product.

Template #2: The Razor Checkout Template 

Let’s look at the Razor template that is built using Elementor and Aero’s checkout widgets:

Notice how clean and crisp the template is, in terms of design.

This three-step template ensures that it doesn’t overwhelm the prospects. It makes the form more approachable.

How to Set Up a Two-Step WooCommerce One Page Checkout Using Elementor

Let’s now discuss how to set up a WooCommece one-page checkout using the very flexible and versatile Elementor.

We’ll be using the very powerful Closer checkout page template.

Step 1: Select a two-step checkout template from our pre-built Elementor templates

You can browse from our collection of one-page checkout templates built using Elementor.

You can import each of these templates with a single click.

Then you can customize them in Elementor using our Checkout Form and Mini Cart widget.

In this case, we’re going to choose the very optimized Closer template. It’s sleek, looks beautiful and you can make a few customizations to make it on-brand.

Step 2: Customize the checkout template in Elementor

Here you can change a whole host of things like the typography, the border-radius, colors, fonts, thickness, and so much more using Elementor widgets.

We also recommend that you add a video to your one-page checkout.

To add an image overlay to the video, click on the video widget and select ‘Image Overlay’.

Activate it, choose an image to overlay, and update it.

Similarly, you can make changes to the heading, background colors, and more to match the overall taste and brand colors.

Step 3: Customize the Checkout Form widget built by Aero

Here you can make a host of customizations to the Checkout Form widget.

For example, you can change the color of the Steps Bar.

You can also choose from Breadcrumbs and Tabs to display your Steps Bar.

Apart from that, you can change the color of the button on hover and otherwise.

Check out this video tutorial on how to customize your checkout form.

Step 4: Build your checkout form by keeping the fields you need

In this section, we’ll use AeroCheckout’s extensive form-builder to customize the fields.

You can add, edit, and remove the form fields. Keep the ones that you need and delete the ones that you don’t.

In this case, since we’re selling a digital product, we do not need the shipping address and shipping method related fields.

So this is how our final form looks like:

The first step contains the basic information fields, the second step has the Order Summary and payment-related fields.

Further, we’ll configure the products tab.

Step 5: Add products to your one-page checkout

In this section, we look at how to add products to your WooCommerce one-page checkout.

You can add multiple products, configure discounts that are not available elsewhere on the product page, and even set quantity from here.

You may choose to sell specific variants of a product.

Finally, you can use drag-and-drop to display the added products in a specific order.

Here, since we’re selling a digital product, the two options we are offering are:

• One-shot payment plan for the course
• An easy 3-month payment plan for the same course

The 3-month payment plan is a WooCommerce Subscriptions product.

The user can choose one of the two options and they’ll be billed accordingly.

Keep in mind that when you’re offering a 3-month payment plan, it should appear slightly less lucrative as compared to a single payment.

Step 6: Choose a default option, add the ‘Best Value’ tag and description

In the ‘Products’ field, you would want to set an option as pre-selected on default.

Apart from that, you can also add a ‘Best Value’ tag or any custom tag to highlight the most popular choice of other customers.

The tag could be – ‘Money Saver’, ‘Power Bundle’, ‘Super Saver’, or anything of your choice.

Check out this video to see how easily you can set that up at the backend.

Step 7: Add an Order Bump to your one-page checkout

You can add an order bump i.e. a cross-sell offer to your one-page checkout.

This allows you to make some more dollars per transaction and hence make your ads profitable. This is how you do it:

Once done, hit the ‘Save Products’ button and move on to the next tab.

Customize the look and feel of your bump offer in the ‘Design’ tab.

Also, write a copy of your offer here:

You can also change the color of the title, padding, color of the price, description, and more under the Style sub-tab.

There you go!

Save your design and go live with your order bump.

When you meet the set conditions, the order bump will show up on the checkout page.

The Truth About Using WooCommerce One Page Checkout

One-page checkout cannot be used for every product in your store.

You must select one product to start with or a new trending item. Then pick your favorite AeroCheckout template and customize it.

Change the colors, typography, and more as per your brand’s needs. Write some persuasive copy to convert.

There you go!

Now you’re all set to direct traffic from Facebook, Instagram, and other places over to it.

There’s power in keeping things simple, clean, and distraction-free.

Go explore more about AeroCheckout here.

Additional Reading

1. Single-Page Checkout
2. One-Page Checkout vs Multi-Step Checkout