How To Set Up WooCommerce One Page Checkout [Updated Guide 2023]

Fascinated by the idea of using one page checkouts in your WooCommerce store?

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

That’s why WooCommerce one page checkouts are for!

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

In this post, we’ll give you the exact tips and a step-by-step guide on how to set up your WooCommerce one page checkout to enhance your store’s conversions.

What is WooCommerce One Page Checkout?

A WooCommerce one page checkout is a product-cum-checkout page that allows you to display product selection and checkout forms on a single page.

Here, 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.

Here's an example:

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.

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.

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

And many end with cart abandonment.

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

Why 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.

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.

2. 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.

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

3. Distraction-free 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.

4. Capture more abandoned carts by collecting emails first

Since you’ll be directing traffic from paid ads, influencers, your email lists, and more such places to this one-page checkout - we're 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.

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.

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!

Top 3 Best WooCommerce One Page Checkout Plugins

In this section, we have shortlisted the top 3 WooCommerce One Page checkout page builder plugins.

We have tested a lot of plugins and shortlisted these plugins after months of research.

Here, we’ll be focussing on the features, pros and cons of each plugin in this list.

1. FunnelKit Checkout

FunnelKit Checkout offers a complete checkout page solution for your WooCommerce store.

It has both free and premium templates that let you design beautiful, high-converting store checkouts as well as individual product-specific checkouts.

Plus, you can customize these templates with any page builder. FunnelKit deeply integrates with page builders like Elementor, Divi, Oxygen, and Gutenberg.

For other page builders, you can design your WooCommerce one page checkout page with shortcodes.

Furthermore, it gives you the ability to modify the fields on your checkout forms as well as optimize your checkout pages for maximum conversions.

Pros

• Checkout optimizations - Optimize your single page checkouts with express payment buttons, Google address autocomplete, auto-apply coupons, and more.
• Checkout field editor - Add, remove, edit or rearrange the fields and sections on your checkout form to provide a faster checkout experience that reduces cart abandonment.
• Built-in A/B testing - A/B test all the elements of your one page checkout by setting up multiple variations, viewing detailed insights and declaring the winning variant.

Cons

• Limited site usage - FunnelKit’s most popular plan ‘Professional’ has a limitation of being used only on two websites.

2. WooCommerce One Page Checkout

This plugin from WooCommerce makes it easier for your users to view both product selection and checkout their products on one page.

This way you have the ability to add or remove products from their cart and complete the payment process without leaving the checkout page.

It’s equipped with different templates, powerful integrations and shortcodes to design your one page checkout pages.

Plus, you can create multiple landing pages and easily embed the checkout forms on them.

Pros

• Built-in templates - The plugin includes 4 built-in templates to add product tables, product lists, pricing tables, and more.
• Curate your products - Choose products to be displayed on your checkout page by setting up featured products, related products, and more.

Cons

• Lacks checkout page design customization - This plugin just adds some customization to the default WooCommerce checkout page - you can’t design or make changes to the checkout form.
• Doesn’t allow checkout form field modification - You can’t make any modifications to the fields on your checkout form.

3. Direct Checkout for WooCommerce

This plugin simplifies your checkout process for high conversions.

The ajax add to cart functionality lets users add items from the catalog to their carts without having to load the entire page every time.

Furthermore, you can easily remove unnecessary fields on your checkout form to speed up the checkout process for higher conversions.

Pros

• Faster checkout experience - Redirects the users to directly checkout your products in one step. You can modify the items and enter information all on the same page.
• Remove unnecessary checkout form fields - Easily remove unnecessary form fields on your default WooCommerce checkout page by speeding up the shopping process.

Cons

• No pre-built checkout page templates - You don’t get any pre-built templates or the ability to create your own, on-brand checkout pages with custom branding.
• Doesn’t allow checkout page optimization - It doesn’t have any option to optimize your one page checkout pages to enhance conversions in your WooCommerce store.

Our Opinion

Out of all the best WooCommerce single page checkout plugins, none can match the versatility of the FunnelKit.

You can even customize the pre-built checkout templates or even create them from the scratch using any page builder of your choice.

Plus, you get to customize the checkout form fields, put optimizations on your checkout page, A/B test your multiple variants, view detailed analytics, and so much more.

FunnelKit is indeed the all-in-one complete plugin for your checkout page solution.

How to Set Up WooCommerce One Page Checkout?

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

Make sure to install and activate FunnelKit on your website.

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

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'.

FunnelKit has a wide variety of WooCommerce one page checkout templates to import and customize as per your own branding:

• Closer template
• Razor template
• Booster template
• Stunner template

Here, we’ll click on the Closer template.

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

You can see the full preview of the template here.

Choose the number of steps on your checkout page and hit ‘Import This Template’.

Next, enter the name of your funnel as WooCommerce One Page Checkout.

Click on Add.

Step 2: Customize your one page checkout template

Click on the ‘Edit’ button to start customizing your checkout page. 

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.

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.

Plus, if you want to add an image overlay to your 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.

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 or 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: 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 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 4: Edit your checkout form

In this section, we’ll use FunnelKit's extensive form-builder to customize the fields of your checkout form.

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

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:

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

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 can do it:

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

Once your products are added, you can 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:

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.

Bonus Tip: Don't Forget About 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:

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

When you’re done making the changes to the title, border, typography, etc., make sure to hit the ‘Update’ button.

This is what our final thank you page looks:

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

Frequently Asked Questions (FAQs) on WooCommerce One Page Checkout

Here we've answered some common questions asked by users related to one page checkout on WooCommerce store:

1. How do I enable one page checkout in WooCommerce?

FunnelKit has different one page checkout templates available that you can use and customize as per your needs. You don’t need to enable one-page checkouts - all you have to do is import the one page checkout template, customize it and you’re all set!

2. Is one page checkout better?

The usage of one page or multi-step checkout and which is better actually depends on the products you have in your online store. One-step checkout is preferred by digital product sellers and multi-step checkouts are favorites among physical item sellers.

You can always perform A/B Testing in FunnelKit to see which one works best for you.

3. Can I customize the WooCommerce checkout page?

Yes, you can easily customize your default WooCommerce checkout pages and transform them into beautiful, high-converting ones. FunnelKit has beautiful single and multi-step checkout page templates that are highly customizable and optimized for all devices.

4. What is an example of a single-page checkout in WooCommerce?

Here are two examples of single page checkout in WooCommerce:

Example #1: Grant Cardone’s One Page Checkout Form

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 this WooCommerce one page checkout flow, it’s all fast and easy.

Also, there’s an order bump on the second step to increase the order value.

Example #2: Wardee Harmon’s Single Product Checkout Page

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:

The image showing the product in action is clear & attention-grabbing. The reasons on the right-hand side are value-loaded and help users compare that bib with the others in the market.

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 FunnelKit 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 - and, that’s why WooCommerce one page checkout is for!

Explore more about FunnelKit here