WooCommerce One Page Checkout: Benefits and How to Set It Up

WooCommerce one page checkout icon

A WooCommerce one page checkout puts product selection, the order summary and the payment form on a single page, so a customer can choose what they want and pay without moving through separate cart and checkout pages. It suits stores selling a focused range of products, campaign landing pages and repeat purchases and it is most effective when the form itself is kept short and clear. Checkout design is one of the areas where WooCommerce development for B2B retailers and brands has a direct effect on revenue, because every extra page or field gives a ready buyer another reason to stop.

Abandonment is a well documented problem across ecommerce. Baymard Institute’s cart abandonment research puts the average documented online shopping cart abandonment rate at 70.22% and 17% of the US shoppers it surveyed said they had abandoned an order because of a too long or complicated checkout process. Many abandonments come from people who were only browsing, but checkout friction is one of the causes a store can fix through design.

The main benefits of a one page checkout are summarised below. The rest of this guide covers when it is the right choice, how to set one up and how to measure whether it is working.

  • Fewer page loads between deciding to buy and completing payment.
  • The whole commitment is visible at once, so there is no uncertainty about further steps.
  • Customers can change quantities or remove items without leaving the payment form.
  • Campaign and landing pages can sell directly, with the pitch and the purchase in one place.
  • A simpler flow on mobile, where moving between pages is slower and more error-prone.

Each of these benefits depends on good execution. A single page crowded with unnecessary fields can perform worse than a well-designed multi-step flow, which is why the detail of the form matters as much as the layout.

What a One Page Checkout Means in WooCommerce

In WooCommerce, a one page checkout usually means combining product selection, the cart and the checkout form on the same page. The standard WooCommerce checkout page already collects billing, delivery and payment details on one screen, so the change is in removing the separate product and cart pages that sit before it.

A typical store journey runs from a product page to the cart, then to checkout and finally to an order confirmation page. Since WooCommerce 8.3 in November 2023, new stores use the Cart and Checkout blocks by default, according to WooCommerce’s guide to customising the Cart and Checkout pages. That block-based checkout is already designed to be compact, but it still sits behind a separate cart step.

The official WooCommerce One Page Checkout extension removes that step for the pages you choose. It displays product selection and checkout forms together on a single product page, post or page, so customers can add or remove products and complete payment without leaving the page or waiting for a new one to load.

The Benefits of a Single Page Checkout

The main benefit of a single page checkout is a shorter path to purchase with fewer interruptions. Each page load is a point where a slow connection, a distraction or a moment of doubt can end the session and removing those transitions keeps the customer focused on finishing the order.

Visibility is the second benefit. When billing, delivery and payment fields sit on one page with the order summary alongside them, the customer can see exactly what is being asked of them before they start. There is no hidden step waiting further on and quantities or discount codes can be changed without losing details already entered.

The third benefit is commercial flexibility. Because the One Page Checkout shortcode can be placed on any page, a store can build a landing page for a promotion, an event or a single product with sales copy above the order form. For B2B suppliers selling consumables, training places or subscription products, that turns a campaign page into a page that takes orders.

Baymard’s research adds an important caveat. Its article on minimising checkout form fields found that the number of form fields affects checkout usability far more than the number of steps and that most websites need only 8 form fields while the average checkout in 2024 contained 11.3. Collapsing four pages into one will not help much if the resulting page asks for information the order does not need.

✓ Do
  • Ask only for fields the order needs
  • Show the order summary beside the form
  • Default billing address to delivery address
  • Offer express payment options early
✕ Don’t
  • Show every field regardless of relevance
  • Hide the order total until the final click
  • Make customers type the same address twice
  • Force account creation before payment

Forced account creation deserves particular attention. In the same Baymard survey, once shoppers who were only browsing are set aside, 18% of US respondents who abandoned an order said the website wanted them to create an account, so guest checkout should be available wherever the business model allows it.

When a One Page Checkout Is Not the Right Fit

A one page checkout is not the right fit for stores where customers need to browse, filter and compare a large catalogue before deciding. WooCommerce itself describes the extension as designed around curated, focused buying pages rather than large-scale catalogue browsing.

Stores with complex products also need care. Configurable items, trade accounts with negotiated pricing and orders that need approval or quotes rarely suit a single compressed form and forcing them into one can make the page harder to use rather than easier. In those cases, a well-structured checkout block with a clear cart page often performs better.

Extension compatibility is the other consideration. The One Page Checkout documentation notes that because it uses a custom template for product selection, it reduces compatibility with many other extensions, so any store relying on product add-ons, custom fields or specialist shipping plugins should test the combination on a staging website before going live.

How to Set Up a One Page Checkout in WooCommerce

There are three practical routes to a one page checkout in WooCommerce, which are streamlining the core Checkout block, installing the One Page Checkout extension or building a custom checkout. The right choice depends on your catalogue, the extensions you rely on and how much control you need over the design.

Streamlining the core checkout is the lightest option. The Checkout block lets you hide the Company, Address Line 2 and Phone fields, show an Express Checkout block when a gateway that supports Apple Pay or Google Pay is active and offer local pickup. It keeps the separate cart page, but for many stores a short, well-configured checkout delivers most of the benefit with no additional plugins.

The One Page Checkout extension is the most direct route. According to the One Page Checkout documentation, it can be enabled per product with a checkbox in the Product data panel, added through a graphical interface in the Classic Editor, or inserted manually as a shortcode, which is the only method available in the block editor. The shortcode accepts product IDs, category IDs and a template attribute.

[woocommerce_one_page_checkout product_ids="30,45,12" template="product-table"]

The built-in templates are Product List, Product Table, Single Product and Pricing Table and only the Single Product template shows the dropdowns needed to choose a variation of a variable product. The standard WooCommerce Cart and Checkout pages must still exist, because the checkout page handles the order confirmation and receipt and some gateways rely on it.

Custom development is the third route and it suits stores with configurable products, trade pricing or strict design requirements. Our approach is to custom build as much functionality as possible alongside a clean codebase, because stores weighed down by plugins tend to suffer conflicts and performance issues. If you are assessing outside help for this kind of build, our guide to choosing a WooCommerce agency covers what to look for.

Designing a One Page Checkout for Mobile

Mobile checkout design icon

A one page checkout works well on mobile when it follows the natural vertical scroll of a phone and keeps typing to a minimum. Customers on smaller screens expect to scroll down through a form and tabs or back buttons designed for desktop sit awkwardly on touch devices.

Reducing typing is where most mobile gains come from. The HTML autocomplete attribute tells the browser what each field expects, such as a shipping postcode or a billing address, so it can prefill details the customer has saved. Correct input types bring up a numeric keypad for phone numbers and an email keyboard for email addresses and buttons need to be large enough that a customer does not tap the wrong one.

Express payments shorten the form further. Apple Pay and Google Pay can supply payment and address details in a few taps and the Checkout block’s Express Checkout area shows those options within the checkout form whenever a supporting gateway is active. We integrate PayPal, Stripe, Klarna, Apple Pay and Google Pay and our article on WooCommerce payment gateways for UK businesses compares the main options.

Validation, Accessibility and Payment Security

A single page checkout needs inline validation, accessible form markup and secure payment handling, because every error and every barrier sits on the same page as the payment button. Errors reported only after submission, in a block above the form, force customers to scroll back and hunt for the problem.

Component Good practice Common pitfall
Form validation Inline feedback beside each field All errors listed after submission
Payment Inline processing with clear status messages Unexpected redirects to an external page
Order review Editable summary beside the form Fixed summary that cannot be changed
Conditional fields Fields shown only when a choice needs them Every possible field shown by default

Conditional fields are especially useful on a single page. If a customer chooses local pickup or buys a digital product, the delivery address fields can disappear, so the form gets shorter as choices are made rather than longer.

Accessibility is a legal and commercial issue for UK retailers. The Equality Act 2010 requires service providers to make reasonable adjustments for disabled people and the W3C’s forms tutorial sets out how labels, instructions, validation and user notifications should work. WCAG 2.2 also added Redundant Entry at Level A and its guidance uses the example of an ecommerce form that lets the customer confirm the billing and delivery addresses are the same.

Note

Test the finished checkout with a keyboard alone and with a screen reader. A single page puts many form sections together, so focus order and error announcements need checking as a whole.

Our guide to designing accessible forms covers labels, error messages and validation in more detail. Payment security follows the same rules whether the checkout has one page or several. PCI DSS provides a baseline of technical and operational requirements to protect payment account data and using a reputable gateway that handles card details keeps most of that burden away from the store itself.

Connecting the Checkout to Your Business Systems

A one page checkout still needs to pass orders, customer details and stock changes to the systems behind the store. The layout of the checkout makes no difference to that data flow, but a custom checkout or a new extension can break integrations that relied on the old page structure.

When someone buys, their details can flow into a CRM such as Salesforce or HubSpot, trigger follow-up emails, update sales reports and adjust stock levels. We build those connections to shipping platforms, accounting software, CRMs and ERP systems so orders move through without manual data entry and our website integration services explain how that work fits together. Any checkout change should be tested against those integrations on a staging website, which is how we handle every WooCommerce update before it reaches a live store.

Measuring Checkout Performance

Checkout performance measurement icon

The only reliable way to know whether a one page checkout helps is to measure the checkout before and after the change. Record a baseline for checkout completion rate, abandonment, mobile and desktop conversion and payment failures, then compare like-for-like periods once the new checkout is live.

GA4 gives you the events to do this. Google’s GA4 ecommerce measurement guide covers events including view_cart, begin_checkout, add_shipping_info, add_payment_info and purchase, which together show where customers leave the process. On a one page checkout these events fire on the same page, so it is worth confirming they still trigger in the right order after the change.

Split testing removes much of the guesswork, because different products and customer types can behave very differently with a single page than with a multi-step flow. Session recordings and heatmaps add context by showing which fields cause hesitation and our article on increasing WooCommerce conversion rates covers the wider changes that support a better checkout.

Checkout performance also needs ongoing attention after launch. Payment methods, WooCommerce updates and accessibility standards all change over time and the monitoring we run on client stores is designed to catch checkout issues, slow loading times and plugin conflicts before customers notice them. A WooCommerce maintenance service should cover these checks as part of regular upkeep.

FAQs

What is a WooCommerce one page checkout?

A WooCommerce one page checkout combines product selection, the cart and the checkout form on a single page. Customers can add or remove products and pay without moving through separate cart and checkout pages, which shortens the path to purchase.

Does WooCommerce have a one page checkout by default?

The standard WooCommerce checkout already collects billing, delivery and payment details on one page, but it sits behind a separate cart page. To put product selection and checkout together, you need the official One Page Checkout extension, a third-party plugin or a custom build.

Is a one page checkout better than a multi-step checkout?

A one page checkout tends to suit stores with a focused product range, campaign landing pages and repeat purchases. Research from Baymard Institute suggests the number of form fields matters more than the number of steps, so a short, well-designed form is the priority whichever layout you choose.

Does the One Page Checkout extension work with the block editor?

Yes, but only through the shortcode. The graphical interface for building One Page Checkout pages is only available in the Classic Editor, so in the block editor you add the shortcode manually with the products and template you want.

Avatar for Paul Clapp Paul Clapp
Co-Founder at Priority Pixels

Paul leads on development and technical SEO at Priority Pixels, bringing over 20 years of experience in web and IT. He specialises in building fast, scalable WordPress websites and shaping SEO strategies that deliver long-term results. He’s also a driving force behind the agency’s push into accessibility and AI-driven optimisation.

Related All Insights

The main Priority Pixels insight feed. Practical, senior-level thinking on B2B digital marketing across SEO, paid media, content, web design and AI search. Written by the people who deliver the work, based on what has actually worked for our clients.

Technical SEO Automation and What Should Stay Manual
B2B Marketing Agency
Have a project in mind?

Every project starts with a conversation. Ready to have yours?

Get in Touch
Web Design Agency