Multi-Step WooCommerce Checkout: A Guide

What this article covers

Multi-step is not automatically better. Baymard finds an optimised multi-step and an optimised one page checkout perform comparably.
Most "one page wins" A/B studies are confounded: they compare an old multi-step against a newly optimised one pager.
What matters is what the shopper has to do at each step, not how many URLs the form spans.
The mobile sticky button is the part that breaks, and it is invisible on a desktop browser.

What the research actually says

The popular claim is that one page checkouts convert better. The evidence is weaker than the claim.

The Baymard Institute, which runs the most cited checkout usability research in the industry, puts it directly: "a one page checkout won't necessarily perform better than a comparatively optimized multi-step checkout". The word doing the work there is comparatively.

The confound in almost every case study. Baymard notes that A/B studies showing one page checkouts winning "often compare a non-optimized multi-step checkout with a new optimized one page checkout." The one pager did not win because it was one page. It won because it was the version somebody actually redesigned.

More useful still is what their testing found the real problem to be. Users had relatively few problems navigating between multiple steps. The usability issues were primarily caused by what the customer had to do at each step. Steps are not friction. Bad fields, unclear validation and surprise costs are friction, and they are equally bad whether you spread them over four pages or cram them onto one.

This lines up with the abandonment data. In Baymard's list of abandonment reasons, a long or complicated checkout accounts for 17% of abandonments. Extra costs being too high accounts for 40%. Forced account creation accounts for 18%. Your layout is a real factor. It is not the biggest one.

When multi-step actually wins

Given the above, the honest framing is that multi-step is a tool for specific situations rather than a universal upgrade.

Choose multi-step when

Your form is genuinely long. Physical goods with separate billing and shipping addresses, plus shipping method selection, is a lot to face at once.
Most of your traffic is mobile. One long scroll on a phone is punishing. Three short screens with an obvious next action are not.
You sell high consideration items. Steps let you place reassurance where it is needed rather than all at the bottom.
You want to know where people leave. This is underrated. A single page tells you someone abandoned. Steps tell you they abandoned at shipping, which is an actionable fact.

Stay on one page when

You sell digital goods. No shipping address, no shipping method. The whole form is email and payment. Splitting that is ceremony.
Your form is already short. If everything fits above the fold, steps add clicks and remove nothing.
You have a high proportion of repeat buyers with saved details.

How to split the steps

The conventional three step split is conventional because it works, and a checkout is not the place to be original:

Contact and billing. Email first, so you can recover the cart if they leave.
Shipping address and method. The full delivery cost must be visible here, not later.
Payment. Payment method, order review, trust signals, the place order button.

Two rules that matter more than the split itself:

Never put a cost surprise after step one. If shipping cost appears for the first time at step two, you have built a machine for generating abandonment at step two. Show a shipping estimate in the cart, or state your rates before checkout begins.
Keep the order total visible on every step. Not just at the end.

Three ways to build it

1. A checkout plugin

The route most stores should take. A plugin handles per step validation, the progress indicator, browser back behaviour and the mobile layout, all of which are more work than they look. In OptiCheckout, four of the seven templates are three step flows (Arc, Beacon, Cedar and Quay), one is an accordion (Harbor), and two are single page (Glide and Maple), so you can switch between the models without rebuilding anything.

2. Custom code

Viable if you have a developer, and more work than a tutorial will suggest. It uses the same hooks and template overrides as any other checkout change, mapped in how to customise the WooCommerce checkout page. The realistic scope is:

Wrap the existing checkout fields in step containers, without moving them out of #customer_details, which WooCommerce's own AJAX refreshes replace wholesale.
Add client side validation per step, and make sure it matches the server side rules WooCommerce will apply on submit.
Handle the browser back button so it moves between steps rather than leaving checkout.
Preserve state across the update_order_review AJAX call, which fires whenever the shopper changes country, postcode or shipping method and can silently reset your step state.
Rebuild all of it against the JavaScript API if you later move to the block checkout.

The trap that catches most hand rolled implementations. WooCommerce replaces the order review fragment on every shipping or address change. If your step logic lives inside the replaced markup, it dies at exactly the moment the shopper interacts with shipping. Keep step state outside the fragment, and re-bind after updated_checkout.

3. The block checkout

The WooCommerce block checkout is not multi-step by default, and turning it into one means working through its JavaScript extension API. If you are weighing that move for other reasons, see block checkout versus classic.

Five mistakes that make multi-step worse

Validating only at the end. The entire benefit of steps is catching an error while the shopper is still looking at the field that caused it. If they reach payment and get told their postcode was wrong on step one, you have added clicks and kept the frustration.
Hiding the total. A shopper who cannot see what they will pay will not proceed to find out. Keep it visible on every step, on mobile too.
No visible progress. Three steps with an indicator feels short. Three steps without one feels endless, because the shopper cannot tell whether they are near the end.
Breaking the back button. People go back to check what they typed. If back exits checkout entirely, a fair number never return.
Adding steps without removing fields. Splitting eleven fields across three screens is still eleven fields. Do the deletion work too, starting with the fields that are safe to remove.

The mobile problem nobody screenshots

This is the failure mode we hit most often when testing multi-step checkouts, including our own, and it is effectively invisible unless you look for it deliberately.

On a multi-step checkout, the primary button changes meaning: it is Continue on steps one and two, and Place Order on step three. That button is usually sticky at the bottom of a phone screen. Three things routinely go wrong:

The button collapses to zero width inside a flex row when the label is longer than the designer's placeholder text. It is technically present, technically visible, and completely untappable.
The mobile keyboard covers it. A software keyboard takes 40 to 50% of the screen. A sticky footer button positioned against the visual viewport can end up underneath it.
The final step never gets tested. Steps two and three are behind two Continue clicks, so a quick look at the checkout only ever exercises step one. Every defect on the payment step ships.

How to test it properly. On a real phone, or a browser at 390 pixels wide with a short viewport height, walk the entire flow to the payment step. Then assert four things about the primary button on each step: it exists, it has a non zero size, it is inside the viewport, and a tap actually reaches it. "The button is on the page" is not one of those four things, and it is the only one most checks verify.

We wrote up the wider set of these failures in why your WooCommerce checkout breaks on mobile.

How to know whether it worked

Do not switch to multi-step and declare victory because the number moved. Ecommerce conversion moves for a dozen reasons in any given fortnight.

A/B test it if you can. Run both layouts against live traffic at the same time. This is the only method that controls for seasonality and traffic mix.
Measure step by step drop off, not just the final rate. The point of steps is that they tell you where the leak is. A big fall at the shipping step is almost always cost, not design.
Segment by device. A change that helps mobile can hurt desktop, and a blended number hides both.
Give it enough orders. A week of data on a small store is noise wearing a suit.

Compare the two models side by side

Arc is a three step flow. Glide is single page. Both are rendered from the real plugin, so you can walk them on your phone and decide which suits your store.

Walk the 3-step demo See the one page demo

About this guide. Written by the team behind OptiCheckout. We ship both multi-step and single page templates, which is why this article does not argue that one is universally better: we would be arguing against half our own product. The mobile failures described above are ones we have hit and fixed in our own templates.

How to build a multi-step WooCommerce checkout