WooCommerce One Page Checkout: How To Create A Single Page Checkout Using Elementor

Tavleen Kaur
May 6, 2022
WooCommerce One Page Checkout: How To Create A Single Page Checkout Using Elementor

Fascinated by the idea of one page checkouts?

Harvard Business Review conducted a study on 7000 consumers to find out what makes people complete an intended purchase.

And they came back with the answer - 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., gives all the details about the product that the customer is about to buy.

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

Here's Jake McCluskey, who saw a 57% jump in conversions when he replaced his conventional checkout flow with the WooCommerce one-page checkout.

What is a WooCommerce One Page Checkout?

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

The user can explore the product in great detail and then purchase it from the same page on your WordPress site, i.e., a simple product selection and checkout process.

Closer Checkout Template Available in the FunnelKit Funnel Builder
Closer Checkout Template Available in the FunnelKit Funnel Builder

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

There’s no cart process in the single page flow.

One-page checkout is excellent for selling specific products that require the distraction-free buying environment a single page offers. It further helps to reduce cart abandonment scenarios.

You can direct traffic from your email list, Facebook ads, and Instagram ads to your single page WooCommerce product. This would become a high converting sales funnel for that product.

What’s Wrong With The Conventional WooCommerce Checkout Process 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.

Conventional WooCommerce Checkout Flow

That’s precisely how we treat users in the online world as well. Although you don't need to do that for your WooCommerce store with the FunnelKit (formerly WooFunnels) One Page Checkout.

Starting the journey on the WooCommerce product page, users move to the cart page using the add to cart button, and then to checkout.

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 because of a poor shopping experience.

There is a vast difference between the number of people who started the journey on the product page and the number of people who finish it on the thank you page. Many end with cart abandonment.

A WooCommerce one page checkout offers faster checkout and can potentially replace your WooCommerce cart!

5 Reasons Why the WooCommerce One Page Checkout Converts Better Than The Traditional Flow

Let’s look at the reasons why a one-page checkout will increase conversion rates at a higher-order value for your business.

Reason #1: The purchase process is fast and easy

All the information related to the product, including reviews, videos, and even the checkout fields are displayed on your landing pages.

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 a one-shot payment and a longer, easier payment plan without needing to go to a shopping cart or shop page. All of the checkout fields will be on the landing pages.

People can choose between different relevant offers

This makes people feel in control of their decision and all you have to do is use an add-on for your WooCommerce store.

Reason #3: There are no distractions in the process

Yes, there are no distractions involved with WooCommerce one page checkout. Shoppers don't see a product list, pricing table, or product table - all at the same time.

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

Reason #4: You can capture more abandoned carts by collecting emails 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 cart and checkout activity.

You can do this by breaking your checkout into a multi-step process and making email the first field before they complete payment in your WooCommerce cart.

Reason #5: One-page checkout converts perfectly on mobile devices

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

WooCommerce One page checkout converts perfectly on mobile devices

The users can explore the product selection or product table 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 change pages and switch tabs!

Some Interesting WooCommerce One Page Checkout Examples

Alright! Roll your sleeves, it’s time for some super interesting examples of WooCommerce one page checkout.

Example #1: Grant Cardone’s One Page 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:

WooCommerce one page checkout example 1 - Grant Cardone’s One Page Checkout Form

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 this WooCommerce one page checkout 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 FunnelKit Checkout)

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

Take a look at her super high converting checkout page:

Allure Checkout Template by FunnelKit

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 on 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 FunnelKit.

In FunnelKit, there are multiple page builder options you can choose from to create your checkout page:

  • Elementor - Select this if you love the flexibility of Elementor and would love to design your checkout using it
  • Divi - Choose this option if you're a fan of the Divi builder tool by Elegant Themes
  • Oxygen - Select this option if you're in love with Oxygen builder
  • Gutenberg - Select this builder if enjoy creating a masterpiece with the Gutenberg page builder
  • Other (Using Shortcodes) - Build a checkout with a third-party page-builder like Beaver, Thrive, and more using shortcodes
Choose the page builder to create your WooCommerce one page checkout page

All these custom 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 two templates 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 FunnelKit.

The Closer Checkout template by FunnelKit for WooCommerce one page checkout

It looks pretty neat and the one aim of this WooCommerce one page checkout is to sell that one product without showing related products or a list of products.

Template #2: The Razor Checkout Template 

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

WooCommerce one page checkout template 2 - The Razor Checkout Template

Notice how clean and crisp the template is, in terms of design. The payment gateway is right there on the page.

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

There are many more templates by FunnelKit to create an impressive one page Checkout page for WooCommerce.

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

FunnelKit is the ultimate WordPress Funnel Builder that allows you to create beautifully converting one page checkouts.

There are many checkout plugins out there but none can match the versatility of the Funnel Builder.

It's the best WooCommerce one page checkout plugin on the horizon.

You have the option to either import one of our previously built templates or create a page from scratch using the page builder of your choice.

Also, FunnelKit integrates with a number of really popular page builders like Elementor, Divi, and Oxygen, to bring you templates that you can import and edit with ease using the builder you like.

This section answers your 'how do I make one page checkout in WooCommerce' query.

Let’s look at how to create and set up a WooCommerce one page checkout using the very flexible and versatile Elementor.

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

Step #1: Add a new funnel

Go to Funnels and click on 'Add New Funnel'.

Go to Funnels and click on Add New Funnel

You'll get directed to the templates page.

Click on Start from scratch to start building your sales funnels from scratch.

Start from scratch

Enter the name of your funnel as WooCommerce One Page Checkout.

Name your funnel

Click on Add.

Your blank sales funnel will get created.

Next, click on 'Add New Step' to create a checkout page.

Add new step

Now the Funnel Builder will show you checkout templates for your sales funnel pages.

Click on the template you want to import.

Checkout page templates

You can see the full preview of the checkout page template.

Don't forget to choose the multi-step checkout and your favorite page builder.

Once you're happy with everything, click on 'Import This Template' and name your checkout page step.

Name your checkout page

Once you have imported the template, your Checkout step will get created in the funnel.

Step #2: Customize the checkout template in Elementor

Click on the checkout page to edit it.

Click on the checkout page to edit it.

Now you'll be inside of your Checkout page step in your funnel.

You can explore the various tabs here such as Design, Products, Fields, Optimizations, and Settings.

Hit the Edit Template to make easy customizations without using any WooCommerce one page checkout shortcode or custom coding.

Hit the Edit Template to make easy customizations without using any WooComemrce one page checkout shortcode or custom coding

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

We also recommend that you add a video to your one-page checkout. It'll surely improve the checkout experience and the user will be able to understand better about your product.

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.

Here you can change a whole host of things like the typography, the border radius, colors, fonts, thickness, and so other CSS using Elementor widgets

Similarly, you can make changes to the heading, background colors, and more to match the overall taste and brand colors. You can also remove products or add variable products.

Next, make customizations to the WooCommerce one page 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 selection and checkout form.

Step #3: Edit your Checkout Form

In this section, we’ll use FunnelKit's (formerly WooFunnels) extensive form-builder to customize the fields.

You can add, edit, and remove the form fields using the WooCommerce checkout field editor.

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 what our final form looks like:

So this is what 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 #4: 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.

Add products to your One Page Checkout

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.

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 user can choose one of the two options and they’ll be billed accordingly.

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

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 #5: Add the 'Best Value' tag and descriptions

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 #6: Add an Order Bump to your WooCommerce one page checkout

You can add an order bump i.e. a cross-sell offer to your WooCommerce 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:

Click on Order Bump

After adding and naming the bump, add a product as your order bump offer.

Add a product as your order bump offer

Once your products are added, you can provide them with a discount or configure additional settings.

Provide them with a discount or configure additional settings.

Once done, hit the ‘Save Changes’ 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:

Customize your order bump offer for WooCommerce one page checkout page

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.

Don't Forget to Add the Thank You Page!

Most marketers don't realize that the thank you pages actually serve as a powerful promotional opportunity.

A thank you page is the last step on your funnel and is the perfect place to show gratitude for the order or add crucial details about it.

FunnelKit gives you different templates to set up a perfect thank you page for WooCommerce one page checkout page.

Take a look:

Thank you page templates

You can easily create and customize your thank you page just like you did with your checkout page above.

Follow our YouTube channel for such tips, tricks and optimization strategies.

Ready to deploy 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 Checkout 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.

Explore more about FunnelKit here

Author: 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 FunnelKit (formerly WooFunnels), 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.
Ready to create revenue-generating funnels in Wordpress?
Click Here

Increase your sales, starting today.

Grab Our Exclusive Bundle