How to Create a WooCommerce One Page Checkout (2026)

A WooCommerce one page checkout puts product selection, customer details, and payment on a single screen. It reduces redirects and page loads that drive abandonment and works either globally across your store or on targeted product landing pages.

The default checkout leaves revenue on the table. It spreads across four page loads and three redirects, and ships with roughly 23 to 24 form fields, while a good checkout does the same job in 12 to 14.

Cart abandonment averages around 70% across eCommerce, and about 18% of that abandonment is specifically due to a checkout process that felt too long or too complicated. [Source: Baymard Institute]

Collapsing that into one screen is one of the highest-leverage checkout changes most stores can make.

In this article, we'll cover what a single-page checkout actually is, how it stacks up against multi-step, and how to build your own one page checkout easily.

Click here to head straight to the step-by-step process

🎥 Watch this quick tutorial to get started:

What is One Page Checkout?

A one page checkout is a single-page layout that combines product selection, customer details, billing, shipping and payment into one screen.

It replaces the default Products → Cart → Checkout → Order flow with a compressed Product Selection → Checkout Form → Payment on one page.

Here, shoppers can easily add or adjust products and pay without even loading a new page.

Every page load in that default sequence is a place where a distracted buyer leaves.

A one-page checkout removes those distractions and frees up the space beside your buy button for the things that actually close a sale, such as testimonials, trust symbols, and a visible guarantee.

Method 1: How to Build a WooCommerce One Page Checkout With Elementor and FunnelKit

To build a WooCommerce one page checkout without writing any code, we will use FunnelKit Funnel Builder.

FunnelKit is a WordPress funnel builder that lets you replace the default WooCommerce checkout flow with a high-converting custom checkout page, including both multi-step and one-page layouts.

You can create your one-page checkout in a few minutes. All you have to do is import a template and customize it with Elementor or any page builder of your choice.

It offers a free version that includes one-step templates and thank you pages. The Pro plan lets you add features such as A/B testing, order bumps, one-click upsells, detailed analytics, and more.

Follow the step-by-step instructions below.

Step 1: Create a new funnel and import a checkout template

Go to FunnelKit ⇨ Funnels and click on the ‘Create New Funnel’ button.

You’ll see a variety of ready-made one-page checkout templates. Choose one that fits your brand, or start from scratch.

Choose the page builder among Elementor, Bricks, Divi, Oxygen, and Gutenberg Block Editor. If you want to create it with another builder (e.g., Beaver Builder, Thrive, or other), use shortcodes.

As an example, we’ll create this funnel from scratch. Give it a clear name, such as WooCommerce One Page Checkout.

You can also choose which steps to include in the funnel, such as:

• WooCommerce Checkout Page
• Thank You or Order Confirmation Page

Once done, click ‘Done’ to create your funnel.

You now have a blank funnel set up in the workspace, ready to design your high-converting 1-page checkout!

Click on your checkout page to start customizing it.

It’ll open up the checkout page templates. As an example, we’ve selected the ‘Closer’ template.

Select the number of steps you want for your checkout, then click the 'Import This Template' button.

Your checkout page with this template will get imported.

Step 2: Add your products

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

Go to the Products tab and click on the ‘Add Product’ button.

Enter the name of the product you want to offer on your 1-page checkout.

Click on 'Add' when done.

Add multiple products so shoppers can select, configure discounts, and even set quantities 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, here are the two options you can offer:

• One-shot payment plan for the course
• 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 subscription product. You can use WooCommerce or Sublium Subscriptions.

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

Step 3: Customize the checkout layout

Go back to the Design tab.

Hit ‘Edit Elementor Template’ to make easy customizations without using any WooCommerce checkout shortcodes or custom coding.

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

We recommend adding a video to your one-page checkout. It’ll surely improve the checkout experience and help users better understand your product.

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.

Similarly, you can change the heading, background colors, and other elements to match the overall aesthetic and brand colors.

Next, make customizations to the checkout form widget in Elementor.

Choose the step type (breadcrumbs or tabs) to add a progress bar to your single-page checkout.

You can also change the checkout button’s color, add icons or prices to it, and customize it the way you want.

Learn how to customize your checkout page in WooCommerce to ensure its design aligns perfectly with your brand identity.

Step 4: Edit the checkout form fields

Now let’s edit the fields on your one-page checkout form with the built-in drag-and-drop checkout field editor.

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

Use the drag-and-drop checkout form builder to:

• Add custom fields (text, dropdowns, checkboxes, file uploads, etc.)
• Edit existing fields
• Remove unnecessary fields
• Rearrange fields and sections

If this funnel is for a digital product, you can remove shipping-related fields.

This is what our final form looks like:

The first step contains the basic information fields, including product selection, and the second step contains the order summary and payment-related fields.

To add the ‘Best Value’ tag or description to a product, explore the advanced customization options to make it more appealing to shoppers.

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

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.

Click on ‘Update’ when done.

This is how your one page checkout looks:

Step 5: Add an order bump to increase order value

You can add an order bump, i.e., a cross-sell offer, to make more dollars per transaction and your ads profitable.

First, add the order bump and name it.

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

After importing the skin, add a product as your order bump offer.

Once your products are added, you can apply a discount or configure additional settings in the Products section.

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 title color, padding, price and description colors, and more under the Style sub-tab.

And don't forget your thank-you pages, because these are the last step in your funnel and the perfect place to express gratitude or add crucial order details.

There you go! Save your design and go live.

This is how you can set up a WooCommerce one-page checkout that’s beginner-friendly and requires no code.

Open the page in an incognito window and place a real order with a live payment method. Check that totals update without a page reload when the option changes, that the coupon field applies, and that the confirmation page loads.

Then do the whole thing again on a real phone, not an emulator, and confirm that nothing scrolls sideways.

Method 2: Use the Official Extension (Shortcode)

If you prefer the first-party option, the official WooCommerce One Page Checkout extension lets you turn any page, post, or product into a checkout.

It is a paid extension sold on the WooCommerce marketplace, and it works in two ways: enabled directly on a product or placed anywhere with a shortcode.

Option A: Enable it on a product

After you install and activate the extension, a new One Page Checkout checkbox appears next to Virtual and Downloadable options when you edit a product. Check that box to enable it for that product.

So now you go to this product page; adding this item to your cart scrolls down to the checkout form, which loads directly here.

You can increase the quantity on the same page instead of redirecting to a separate checkout.

Option B: Use the shortcode

For full control over placement, add the [woocommerce_one_page_checkout] shortcode to any page, post, or custom post type. You then pass attributes to control which products show and how they are laid out.

The two attributes you will use most are:

• product_ids sets which products appear, using their comma-separated product IDs.
• template sets the layout, such as a single product, a product list, a product table, or a pricing table.

A basic example that displays a single product as a one-page checkout looks like this:

[woocommerce_one_page_checkout product_ids="47" template="product-single"]

To show several products in a selectable table, you would list multiple IDs and switch the template:

[woocommerce_one_page_checkout product_ids="47,137,161" template="product-table"]

Embed the shortcode inside a page builder, drop it into Elementor's Shortcode widget, Gutenberg's Shortcode block, or Divi's Code module.

Once the shortcode is in place, the product selection and checkout form appear together on that page, and shoppers can adjust their order and pay without leaving the page.

You can adjust extension-wide options, such as the auto-scroll behavior, under WooCommerce > Settings > One Page Checkout.

The main limitation of the shortcode route in either plugin is that you have little control over individual form fields and the overall page design compared with a page builder.

Best WooCommerce One Page Checkout Plugins Compared

There are several ways to add a single-page checkout, ranging from first-party extensions to dedicated optimization plugins.

Here is how the most popular options compare.

Ratings come from different platforms with very different review volumes, so read them as a signal rather than a like-for-like score. The table is ordered by how directly each plugin addresses this specific job, not by rating.

1. FunnelKit Funnel Builder

FunnelKit is a complete WordPress funnel builder with single-step and multi-step checkout templates, a drag-and-drop custom field editor, express pay buttons for Apple Pay and Google Pay, address autocomplete, and A/B testing on Pro.

It perfectly suits stores that want to rebuild the checkout rather than relocate it.

2. WooCommerce One Page Checkout

It has four selection templates and a simple shortcode, no checkout field editing, and limited styling.

Worth noting that one reviewer on WooCommerce's own listing describes moving to FunnelKit for the functionality they needed, which is a fair summary of this extension's ceiling.

3. One Page Quick Checkout

One Page Quick Checkout lets you place a basic one page checkout on any page using a shortcode.

It covers product selection aligned with the checkout form, AJAX-updated totals, and a working purchase flow, without the polish or feature depth of premium alternatives.

4. Fluid Checkout

It combines popup checkout, direct checkout, one-page checkout, and quick view.

Instead of embedding checkout on product or landing pages, it rebuilds the default WooCommerce checkout into a streamlined, mobile-optimized one-page experience.

5. Direct Checkout for WooCommerce

You can easily remove unnecessary fields from your checkout form to speed up the process and increase conversions.

Its Ajax add-to-cart functionality allows users to add catalog items to their carts without reloading the entire page.

Which one should you pick?

• If you want order bumps, upsells, A/B testing, and abandoned cart recovery in one stack, FunnelKit covers all four.
• If you only need products and a checkout form on the same page, the official WooCommerce extension does that with a single shortcode and almost no configuration. It is the shortest path, and for many stores, it is enough.
• If you want a basic checkout with the least setup, Fluid Checkout rebuilds the checkout you already have. The free version is production-grade, and you can be live in an afternoon without touching a page builder.
• If you are already building in Elementor, Divi, or Bricks, use a funnel builder so your checkout lives within the same design workflow as the landing page. Stitching a shortcode checkout onto a builder-designed offer page usually looks like what it is.

If you just want to skip the cart page

Not every store needs product selection and a checkout form on one screen. Sometimes the cart page is the only thing in the way, and removing it is enough.

A sliding cart does it with more control. The cart opens as a side panel on Add to Cart; shoppers can adjust quantities or apply a coupon without a page load, and the panel takes them straight to checkout.

FunnelKit's Sliding Cart works this way, and so do several free alternatives in the WordPress repository.

One-Page Checkout vs. Multi-Step: Which Converts Better?

The honest answer to one-page checkout vs multi-step depends on your products, and this is how you should test it.

• One-page checkout tends to work best for fast-moving products and impulse purchases. Keeping everything in one view reduces drop-offs for low-consideration buys.
• Multi-step checkout can perform better for high-ticket or complex purchases, where splitting details into smaller steps reduces overwhelm and builds commitment gradually.

In split tests we’ve run across stores, the pattern broke down roughly by price point.

For impulse purchases, single-page layouts produced faster conversions and fewer drop-offs, while for higher-ticket items, the multi-step format spaced out commitment and performed better.

Results vary by store, traffic source, and product, so treat these as directional and run your own A/B test before committing. See the labeled results below.

The takeaway isn’t always to use one page. You should match the layout to your product type, then validate with a real A/B test on your own traffic.

5 Best Practices to Boost Your One Page Checkout Conversions

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

Here are key strategies and tips:

1. Keep the form as short as possible

Keep only essential information to minimize friction.

For digital products, there should not be any shipping address fields. For physical products, combine the first and last names into a single field and make use of optional collapsible fields.

Additionally, enable express checkout options, such as Google Pay and Apple Pay, to let digital wallet users skip the form entirely.

2. Enable guest checkout

Forcing account creation is one of the oldest causes of abandonment.

Let first-timers buy without an account; you can still invite them to create one on the thank-you page.

3. Optimize for mobile

More than half of your traffic is coming from phones. Use large, tappable buttons and simplify navigation to minimize distractions for mobile users.

Use high-contrast buttons and legible font sizes, and clearly label all WooCommerce one-checkout form fields.

Test your checkout page on multiple screen sizes before going live.

Ensure the product selection area, form fields, and payment button all render cleanly without horizontal scrolling.

4. Show real trust signals

Put secure-payment badges, an SSL indicator, accepted-card icons, and a review or two next to the payment field.

First-time buyers need a reason to trust the form before they enter a card number.

5. A/B test single-step vs multi-step layouts

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

A/B test different elements, such as button text, size, and color, as well as checkout form layouts and trust signals like security badges or customer reviews.

6. Offer multiple payment options

Offering diverse payment gateways ensures customers can choose their preferred payment method to complete their purchases, helping reduce cart abandonment.

Connect Stripe, Square, or PayPal to your WooCommerce store in minutes with gateway plugins.

Add express checkout, credit cards, buy now, pay later (BNPL), and local payment methods such as SEPA, iDEAL, P24, Bancontact, etc., to provide convenience for your shoppers.

7. Capture emails early and recover abandoned carts

Even with a perfectly optimized checkout, some users will still drop off before completing their purchase. That’s where abandoned cart recovery comes in.

By capturing email or phone details early in the checkout flow, you can automatically follow up with customers who didn’t finish their order.

• Trigger automated reminder emails or SMS within 1 to 3 hours of abandonment.

• Include dynamic cart links that take customers back to their checkout with items pre-filled.

• Offer time-sensitive discount coupons or free shipping to incentivize the purchase.

• Use multi-channel recovery (email, push notifications and SMS) for higher success rates.

Just head to the automations tab to set up simple abandoned-cart recovery campaigns for free. 

If you want to integrate with full email marketing capabilities with no limitations, get FunnelKit Automations.

Best One Page Checkout Templates to Skyrocket Conversions

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 includes all the elements: the product’s details, an embedded product demonstration video, benefits, and testimonials.

• One page checkout template #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.

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

• WooCommerce one page checkout template #3 - Booster 

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

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

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

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.

Frequently Asked Questions (FAQs)

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

Start Reducing Drop-Offs With a WooCommerce One Page Checkout!

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

We covered what a WooCommerce one page checkout is and how it compares to a multi-step flow.

We then walked through setup methods using a no-code builder and the official extension shortcode; compared leading plugins; and shared optimization tips to boost conversions.

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 with colors, typography, and layout to align perfectly with your brand.

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

Once everything is ready, promote your WooCommerce 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 one-page checkout can make in your WooCommerce business!

Related Blogs

Editorial Team

August 17, 2026

WooCommerce Global Checkout: How to Set One Up (Step-by-Step)

A WooCommerce global checkout handles every order you take, which makes it the busiest page in your store and, in most stores, the only one nobody has touched. Supermarkets worked...

Editorial Team

August 14, 2026

How to Customize the WooCommerce Checkout Page (Block & Classic)

Customize the WooCommerce checkout page the wrong way and you’ll spend an hour editing a page that never changes on the front end. Open Pages → Checkout. If you see...

Editorial Team

August 13, 2026

How to Create a WordPress Order Form (No-Code Setup)

Most people assume setting up WordPress order forms means setting up a WooCommerce store. But it doesn't. These order forms have one job, i.e., to give their customers a page...