Get Started

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

Editorial Team
December 11, 2024
How To Set Up WooCommerce One Page Checkout [Updated Guide 2024]

Do you want to use WooCommerce one-page checkouts in your online store?

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

Otherwise, shoppers abandon their carts if they cannot easily purchase their products.

7 of 10 online shoppers leave the website without purchasing anything in their shopping carts. Of them, 18% abandon the store because of a too long or complicated checkout process. [Source: Baymard Institute]

That’s where WooCommerce one-page checkouts work well!

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

In this post, we’ll walk you through the step-by-step guide to setting up your WooCommerce one-page checkout and tips to enhance your store’s conversions.

Watch this quick tutorial to set up one-page checkout in your WooCommerce store:

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

We have something special for you if you want to enhance conversions in your store. Click on the button below to get started.

What is WooCommerce One Page Checkout?

A WooCommerce one-page checkout is a sales 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 purchase it from the same page on your WordPress site.

A single-page checkout offers a simple product selection and checkout process that helps fit everything on one screen and requires less time to complete the purchase.

Here’s a WooCommerce one-page checkout example:

Closer woocommerce one page Checkout Template Available in the FunnelKit Funnel Builder
Closer Checkout Template Available in the FunnelKit Funnel Builder

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

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 and Facebook 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 wait for their turn.

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

If we look at the default WooCommerce process, shoppers start their journey on the product page, add items to their carts, move to the cart page and head to the checkout page.

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 those who finished it on the thank you page.

And many end with cart abandonment.

Plus, the default WooCommerce checkout page isn’t fit to convert shoppers into becoming paying customers.

Default woocommerce checkout page

As you can see, the default checkout page in WooCommerce looks too long and quite dull.

But with a custom WooCommerce one-page checkout, you can serve your shoppers well and encourage them to purchase your products.

One-page checkouts help you offer faster checkout and potentially replace your cart page!

Why WooCommerce One Page Checkout Converts Better than the Traditional Flow?

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

1. Quick and easy purchase process

Your landing pages display all the information related to the product, including user testimonials, videos, and even the checkout fields.

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. Better display of checkout add-ons and relevant offers

By displaying relevant checkout add-ons as product recommendations and attractive offers, you can encourage shoppers’ impulse to purchase.

These offers can be - Buy 1 at a flat discount, Buy 2 Get 1 free, or Buy 3 Get 2 free.

Pick from one-shot payments or longer, easier payment plans without going 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 on woocommerce one page checkout

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

3. Distraction-free process

There are no distractions involved with WooCommerce's one-page checkout. Shoppers don't see a product archive list, pricing table, cart page, links, or any other distractions.

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

4. Email collection prioritization for abandonment cart recovery

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 you need 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. Mobile-optimized checkout

Over 55% of traffic comes from mobile devices. 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 ready, just hit a button to land on the checkout form.

It's even better on a mobile when you don't have to change pages and switch tabs!

Top 3 Best WooCommerce One Page Checkout Plugins

In this section, we’ve shortlisted the top 3 best WooCommerce one-page checkout plugins.

We have tested many plugins and shortlisted them after months of research. Thus, we can rank them based on ease of use, functionality, and value for money.

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

1. FunnelKit Checkout

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

It has free and premium templates that let you design beautiful, high-converting store checkouts and individual product-specific checkouts, such as Shopify checkoutsmulti-step checkouts, and more.

Plus, you can customize your WooCommerce one-page checkout templates with any page builder.

Best WooCommerce One Page Checkout Plugins #1 - FunnelKit Funnel Builder

FunnelKit deeply integrates with page builders like Elementor, Divi, Oxygen, and Gutenberg. You can design your WordPress sales funnels, including checkout pages, with other page builders using custom shortcodes.

Furthermore, it's the most advanced WooCommerce checkout manager plugin, allowing you to modify the fields on your checkout forms and optimize your checkout pages for maximum conversions.

FunnelKit offers its users free (lite) and premium versions.

Pros

  • Checkout optimizations - Optimize your single-page checkouts with express payment buttons such as Apple Pay and Google Pay, 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 speed up the process and reduce cart abandonment.
  • Built-in A/B testingA/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 ‘Professional’ plan is limited to only two websites.

FunnelKit has an excellent one-page checkout and layouts for WooCommerce that match all your use cases.

2. WooCommerce One Page Checkout

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

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

Best WooCommerce One Page Checkout Plugins #2

It has 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 templatesThe plugin includes 4 built-in templates for adding product tables, product lists, pricing tables, and more.
  • Curate your productsSet up featured products, related products, and more to display on your checkout page.

Cons

  • Lacks checkout page design customizationThis plugin adds a little customization to the default WooCommerce page, but you can’t design or change the checkout form.
  • Doesn’t allow checkout form field modificationYou can’t modify the fields on your checkout form.

This plugin doesn’t provide any free version. Its premium version costs $79 annually.

3. Direct Checkout for WooCommerce

The Direct Checkout for WooCommerce plugin simplifies your checkout process for high conversions.

The Ajax add-to-cart functionality lets users add items from the catalogue to their carts without loading the entire page every time.

Best WooCommerce One Page Checkout Plugins #3 - Direct Checkout for WooCommerce

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

Pros

  • Faster checkout experience—This redirects users to your products directly in one step. You can modify the items and enter information on the same page.
  • Remove unnecessary checkout form fields—Speed up the shopping process by easily removing unnecessary form fields on your default WooCommerce checkout page.

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 customize the pre-built checkout templates or create them from scratch using any page builder.

Plus, you can customize the checkout form fields, optimize your checkout page, A/B test your multiple variants, view detailed analytics, and more.

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

How to Set Up WooCommerce One-Page Checkout? (Step-by-Step Process)

This section answers your ‘how do I make one page checkout in WooCommerce?’ query. We'll use the FunnelKit - the best WooCommerce one page checkout plugin in WordPress.

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.

Let’s look at creating and setting up a WooCommerce one page checkout with the FunnelKit Funnel Builder.

Step 1: Add a new funnel

Go to FunnelKit ⇨ Funnels and click on ‘Add 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.

Here, we’ll click on the ‘Start from Blank’ template.

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

  • Elementor - Select this if you love the flexibility of Elementor and would love to design your checkout using it
  • Bricks - Select this option if you want to design your checkout page with the modern and performance-focused Bricks builder.
  • 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 the Oxygen page builder
  • Gutenberg - Select this builder if you enjoy creating a masterpiece with the Gutenberg page builder
  • Other - Build a checkout with a third-party page-builder like Beaver, Thrive, and more using shortcodes
FunnelKit templates

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

You can also choose the steps you want to add to your funnel.

Name your funnel - WooCommerce One Page Checkout

Clicking on ‘Done’ will add a blank sales funnel to your workspace.

Step 2: Add the WooCommerce one page checkout step

Click ‘Add New Step’ to add the checkout step to your workspace.

Add the new step to your checkout funnel

Select the ‘Checkout Pages’, and you’ll see all the checkout page templates.

Here, we’ll select the ‘Closer Template’.

WooCommerce checkout templates available in FunnelKit

You can see the full preview of the template here.

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

Name your one page checkout step

Click on ‘Add’ to import this WooCommerce one-page checkout template.

Step 3: Customize your one page checkout template

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

Click on the checkout page to edit it.

Now, you'll be inside the checkout page step in your funnel. Explore the various tabs here, such as Design, Products, Fields, Optimizations, and Settings.

Hit ‘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 WooCommerce one page checkout shortcode or custom coding

Using Elementor widgets, you can change the brand logo, typography, border radius, colors, fonts, thickness, and other CSS elements here.

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 your product better.

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

Here you can customize the typography, the border radius, colors, fonts, thickness, and other CSS using Elementor widgets

Similarly, you can change 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.

Customize the WooCommerce one page checkout form widget

You can also change the button's color on hover and otherwise.

Check out this video tutorial on how to customize your selection and checkout form:

Step 4: Edit the checkout form fields

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 built-in WooCommerce checkout field editor.

Since we’re selling a digital product, we do not need the shipping address and shipping method-related fields.

Return to the Design tab and scroll down for the checkout form fields.

Edit your WooCommerce one page checkout form

So this is what our final form looks like:

WooCommerce one page checkout form steps 1 and 2

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

Step 5: Add the ‘Best Value’ tag and description

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

Click on Products field on your woocommerce checkout to add the best value tag and description

In addition, you can add a ‘Best Value’ tag or any custom tag to highlight other customers' most popular choices.

The tag could be - ‘Money Saver’, ‘Power Bundle’, ‘Super Saver’, or anything you choose.

Add the best value tag to products on the checkout page in woocommerce

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

Step 6: Add products to your one page checkout

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

You can add multiple products, configure discounts 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.

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.

Remember that when you’re offering a 3-month payment plan, it should appear slightly less lucrative than a single payment.

Step 7: 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 more dollars per transaction, making your ads profitable. This is how you can do it.

Add the order bump and name it:

Add the Order Bump and enter its name

After adding and naming the bump, choose the order bump skin you want.

Choose the order bump skin that will be visible on your woocommerce one page checkout

After importing the skin, 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 from the Products section.

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 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 are a powerful promotional opportunity.

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

FunnelKit gives you different templates to set up a perfect custom thank you page for a 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.

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

This is what our final thank you page looks:

Thank you page preview

Join our Facebook group or follow our YouTube channel to learn more about tips, tricks and optimization strategies.

Best WooCommerce One Page Checkout Templates that Skyrockets the Conversions

FunnelKit offers a variety of checkout templates for one-page and multi-step checkout pages. Explore our ever-growing templates for landing pages, lead generation pages, upsells, and more.

Here are some of the best WooCommerce one page checkout templates available in the FunnelKit Funnel Builder:

  • WooCommerce one page checkout template #1 - Closer

The closer template works perfectly for single product checkout. It has all the elements, including the product’s details, an embedded product demonstration video, benefits and testimonials.

WooCommerce one page checkout template 1 - Closer
  • One page checkout template for WooCommerce #2 - Razor

FunnelKit’s Razor template for WooCommerce one page checkout is a classic. It has a blue header that can be customized per product on the checkout page.

WooCommerce one page checkout template 2 - Razor

If you scroll down, you’ll see the complete checkout form followed by the user reviews that further reinforce the trust in the product.

  • WooCommerce one page checkout template #3 - Booster 

The Booster template available in FunnelKit is quite special. It works on the PAS framework by discussing the problem and agitation and providing the solution.

This one page checkout template is quite effective for single products.

WooCommerce one page checkout template 3 - Booster
  • One page checkout template #4 - Stunner

The Stunner template has been beautifully designed to showcase your product’s information. It displays its benefits, social proof, checkout form and the product's creator to show their credibility.

WooCommerce one page checkout template 4 - Stunner

These were some of the best WooCommerce one page checkout templates available in FunnelKit. You can even design your own custom templates with the page builder of your choice or import one from your device.

👉 Learn how to customize your WooCommerce checkout page - find out 20 proven tips to set up a high-converting checkout page in your store.

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

Optimization Strategies and Effective Tips for WooCommerce One-Page Checkout

The WooCommerce one-page checkout approach significantly boosts conversion rates when optimized correctly.

Here are key strategies and tips:

1. Simplify the checkout form

Ask for essential information to reduce friction. FunnelKit Funnel Builder lets you modify the checkout form fields with a simple drag-and-drop.

You can combine fields like first and last names to reduce perceived complexity.

Additionally, you can offer express checkout options like Google Pay and Apple Pay for faster buying.

2. Optimize for mobile view

Ensure your one page checkout is fully responsive to mobile devices.

FunnelKit Funnel Builder lets you optimize your checkout page for different devices when customizing it with different page builders.

Use large, tappable buttons and simplify navigation for mobile users to avoid distractions.

3. Leverage trust signals

Display trust badges, customer testimonials, and secure payment logos.

Our experts recommend adding SSL encryption to your website, which should show a padlock icon in the web browser.

Add clear return policies, terms and conditions, and customer support options.

4. Enable multiple payment options

Offering diverse payment gateways like Stripe ensures customers can choose their preferred payment method, helping reduce cart abandonment.

Incorporate express checkout, credit cards, buy now, pay later, and local payment methods such as SEPAiDEALP24Bancontact, etc.

5. A/B test page elements

Testing different variations of your checkout page helps identify what resonates with your audience and optimizes the conversion rate.

FunnelKit Funnel Builder allows you to A/B test different elements:

  • Button text, size, and color
  • Form layout
  • Trust signals like security badges or customer reviews

Monitor conversions for a significant period before declaring a winning variant.

6. Offer upsells and cross-sells

Upselling and cross-selling help maximize the value of each transaction by encouraging customers to add complementary or higher-value items to their cart.

FunnelKit Funnel Builder lets you offer order bumps on the checkout page, and one-click upsells after the checkout.

You can customize these offers, configure discounts, and even add rules to show the right offer to the right user at the right time.

7. Skip the default cart page

Redirecting users to the checkout page helps simplify the purchase process and minimises friction.

Use FunnelKit Cart to bring a beautiful, dynamic side cart that replaces your default WooCommerce cart page.

It lets you view and modify cart items. You can also add product upsells inside the cart or set up smart rewards to encourage users to shop more.

8. Monitor and analyze performance

Regularly evaluate the checkout process to identify issues and optimize for better results.

FunnelKit Funnel Builder lets you access to detailed analytics to track visitors, views, revenues, average order value, and more.

You can even integrate it with Google Analytics or set up pixel-tracking events on Facebook, TikTok, Snapchat and Pinterest.

Frequently Asked Questions (FAQs)

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

1. How do I create a custom checkout page in WooCommerce?

You can create a custom checkout page in WooCommerce with FunnelKit. FunnelKit has different one-page checkout templates available that you can use and customize according to 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 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. Can you give me some WooCommerce one page checkout examples?

Here are two examples of single page checkout in WooCommerce:

WooCommerce one page checkout 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:

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, there’s an order bump on the second step to increase the order value.

WooCommerce one page checkout 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:

WooCommerce one page checkout example by Wardee Harmon

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.

5. What is the best WooCommerce one page checkout?

The best WooCommerce one page checkout is the FunnelKit Funnel Builder plugin. It's a complete WooCommerce checkout solution that allows customizations and optimizations for shoppers to buy their products with a single click. Read all about it in this post.

Ready to Deploy WooCommerce One Page Checkout in Your Store?

One page checkout is a game changer, but it's crucial to use it strategically.

Start by selecting a high-potential product, such as a trending or top-performing item, and pair it with a stunning FunnelKit checkout template.

Customize the design - colors, typography, and layout - to align perfectly with your brand.

Don't forget the copy! Craft persuasive and engaging content that resonates best with your users and motivates them to complete their purchase.

You must select one product to start with or a new trending item. Then, pick your favourite FunnelKit Checkout template and customize it.

Once everything is ready, promote your one-page checkout on platforms like Facebook, Instagram, and email campaigns to drive targeted traffic.

Keeping the process simple, distraction-free, and focused will enhance the shopping experience and maximize conversions.

Start today and see the difference WooCommerce one-page checkout can make for your business!

Author: Editorial Team
The Editorial Team at FunnelKit (formerly WooFunnels) is a passionate group of writers and copy editors. We create well-researched posts on topics such as WordPress automation, sales funnels, online course creation, and more. We aim to deliver content that is interesting and actionable.
chevron-down