A Shopify-style multi-step checkout splits payment into short screens, usually contact details, shipping, then payment, with a progress bar on top. In WooCommerce you get this in one of two ways: build on the block-based Checkout that new stores use by default, or switch to the classic shortcode checkout and add a plugin that breaks it into steps. This guide shows how to choose, set it up and test it.
What a multi-step checkout is
A multi-step checkout shows the same fields as a one-page checkout, but in smaller groups. The customer fills in one group, moves on, and always sees where they are in the process. Shopify made this layout familiar: contact and shipping address first, a shipping method next, payment last, with an order summary beside or above the form.
Multi-step is a layout choice, not a magic fix. A short form on one page can beat a badly built three-step flow. The layout helps most when your checkout asks for many fields, offers several shipping methods, or gets a lot of mobile traffic where a long scrolling form feels heavy.
Block checkout or classic checkout: know which one you have
WooCommerce has two checkout implementations, and every decision in this guide depends on which one your store runs.
The block-based Checkout
The Checkout block is the default for new WooCommerce stores. It is a page built from blocks in the editor: contact information, shipping address, shipping options, payment options and an order summary. Express payment buttons such as wallet payments sit at the top when a payment gateway offers them. You can move, hide or restyle parts of it in the block editor without code.
The block checkout is a single page by default. It does not split into steps on its own. WooCommerce also offers an Additional Checkout Fields API for adding fields to the block checkout, which is the supported route for custom fields there.
The classic shortcode checkout
The classic checkout uses the [woocommerce_checkout] shortcode on the Checkout page. Most older stores run it. Most checkout plugins, including the multi-step ones below, were written for this version because it exposes hooks and templates that plugins can change.
How to tell which one you use
Open the Checkout page in the editor. If you see blocks such as “Contact information” and “Payment options”, you have the block checkout. If you see a single shortcode block, you have the classic one. You can switch a store between the two by editing the page, but test your payment gateways and shipping plugins afterwards. Not every extension supports both.
Why shoppers drop out of a long checkout
Most of the problems come from friction, not from the number of pages.
- Too many fields. Every field you do not need is a reason to stop. Remove company name, second address line and phone number if you do not use them. See how to customize WooCommerce checkout fields.
- Forced account creation. Offer guest checkout and create the account after the order.
- Surprise costs. Show shipping and tax early, not on the last screen.
- Slow pages. A checkout that takes seconds to respond after each click loses people at every step.
- Poor mobile layout. Small tap targets, a keyboard that covers the button and a hidden order summary all hurt.
A multi-step layout addresses the first and last items directly: it shows fewer fields at a time and gives one clear button per screen. It does nothing for the others, so fix those first.
Option 1: keep the block checkout and shape it
If your store uses the block checkout, start there before you add a plugin. The default layout already puts the order summary beside the form on wide screens and above it on narrow ones, which is most of what people like about Shopify’s design.
- Edit the Checkout page and select the Checkout block.
- Remove optional fields you do not need, such as company or phone, in the block settings.
- Turn on the order summary options that suit you, for example product images and the coupon field.
- Add a short text block above the form with your returns and delivery promise.
- Check the page on a phone and on a desktop.
The limit is clear: you get a clean one-page checkout, not a stepped one. If a stepped flow is the goal, the classic checkout plus a plugin is the usual route.
Option 2: classic checkout plus a multi-step plugin
These plugins from the WordPress.org directory split the classic checkout into steps. Each is built around the shortcode checkout, so confirm block checkout support on the plugin page before you rely on it.
Fluid Checkout for WooCommerce
Fluid Checkout has a free Lite version on WordPress.org and a paid Pro version. It turns the classic checkout into a multi-step flow with a progress bar and a collapsible order summary, and it is built with mobile screens in mind. It is the closest match to the Shopify pattern described above.
Multi-Step Checkout for WooCommerce
Multi-Step Checkout for WooCommerce splits the sections of the default checkout page into steps. It keeps the existing fields and layout and adds the stepped navigation, which makes it a light option when you only want the steps.
MultiStep Checkout for WooCommerce
MultiStep Checkout for WooCommerce is another free plugin that splits the checkout form into simpler steps. Compare it with the one above on the demo and settings before you choose, since both do the same basic job.
CartFlows and FunnelKit
CartFlows and FunnelKit are funnel builders. They give you custom checkout page templates, including multi-step layouts, plus order bumps and post-purchase offers. Use them when you want to design the whole sales path, not just the checkout screen. They take more setup than a plain multi-step plugin.
Checkout field plugins
Field editors do not add steps, but they decide what appears in each step. Checkout Field Editor (Checkout Manager) for WooCommerce and Flexible Checkout Fields let you add, remove and reorder fields. Trim the form with one of these before you split it.
| Approach | Best for | Trade-off |
|---|---|---|
| Block checkout, tuned | New stores that want a clean one-page flow | No separate steps |
| Fluid Checkout | Shopify-style steps with a progress bar | Built for the classic checkout |
| Multi-Step Checkout plugins | Adding steps to an existing classic checkout | Less design control |
| CartFlows or FunnelKit | Full funnels with order bumps and upsells | More setup, more to maintain |
Step-by-step: set up a multi-step checkout
1. Back up and use a staging copy
Checkout is your revenue page. Test on a staging site or take a backup first. Our list of free backup plugins for WordPress covers the options.
2. Switch to the classic checkout if the plugin needs it
Edit the Checkout page and replace the Checkout block with the [woocommerce_checkout] shortcode. Save and place a test order to confirm payment still works before you add the plugin.
3. Install and activate the plugin
Go to Plugins, Add New, search for the plugin by name, install and activate it. Most multi-step plugins add a settings screen under WooCommerce or in the Customizer.
4. Choose the steps
A common split is contact and shipping address, then shipping method, then payment and order review. Keep the steps few. Two or three is enough for most stores, and each extra step adds a click.
5. Add a progress indicator
Show step names, not just numbers. “Shipping” and “Payment” tell people what comes next. Make the current step obvious and let people go back without losing what they typed.
6. Keep the order summary visible
People want to see what they are buying and what it costs while they type. Keep a collapsible summary near the top on mobile and a fixed one beside the form on desktop.
7. Test the full flow
Place orders as a guest and as a logged-in customer. Use every payment method and every shipping method you offer. Apply a coupon. Enter a wrong card to see the error message. Try an address in a country with different tax rules. Do all of it on a phone.
Design practices that matter
- One main button per step, labelled with the next action, such as “Continue to shipping”.
- Inline validation that tells people what is wrong beside the field, not in a banner at the top.
- Autofill support, so browsers can fill name and address fields.
- Express payment buttons above the form for returning wallet users, if your gateway supports them. See wallet-style payments in WooCommerce and express checkout plugins.
- Trust cues near the payment step: accepted payment methods, returns policy and contact details.
- Fewer distractions. Hide the main menu and footer links on the checkout page.
Common problems and fixes
A payment gateway does not show up
Some gateways only work with one of the two checkouts. Check the gateway’s documentation for block checkout support, and switch checkouts if needed.
Custom fields disappear
Fields added through classic hooks may not appear in the block checkout. Use the Additional Checkout Fields API there, or stay on the classic checkout.
Shipping rules do not apply
If you limit shipping or payment methods by cart contents, retest after any layout change. The guide on restricting shipping and payment options shows how those rules work.
The page feels slow
Each step may reload parts of the page. Use a cache plugin that excludes the cart and checkout pages, and check our cache plugin guide for safe settings.
When to use a multi-step checkout
Use it when your form is long: physical products with several shipping choices, B2B orders with company and tax details, or gift orders with extra messages. Skip it when you sell one digital product and need only an email and a card. For that case, a short one-page form wins, and a dedicated quick checkout for digital goods is simpler.
Measure the result. Compare completed orders against checkout page views before and after the change, over enough weeks to smooth out seasonal swings. Keep the change only if completion improves.
Frequently asked questions
Does WooCommerce have a multi-step checkout built in?
No. The default checkout, block or classic, is a single page. You add steps with a plugin on the classic checkout, or you build a custom layout with a funnel builder.
Is the block checkout the default now?
Yes, new WooCommerce stores use the block-based Checkout by default. Older stores keep the classic shortcode checkout unless the owner switches.
Can I use a multi-step plugin with the block checkout?
It depends on the plugin. Most were built for the classic checkout, so read the plugin page for block checkout support before you install it.
Will a multi-step checkout raise my sales?
Not by itself. It helps when long forms or mobile traffic are the problem. Trim fields, show costs early and test the result against your own order data.
How many steps should I use?
Two or three. Contact and shipping, then payment is a common pattern. More steps add clicks without adding clarity.
How do I switch back to the classic checkout?
Edit the Checkout page and use the [woocommerce_checkout] shortcode instead of the Checkout block. Place a test order afterwards to confirm everything works.
Do I need a funnel builder?
Only if you want order bumps, upsells and custom page templates. For steps alone, a multi-step plugin is lighter.
Next step
Pick the approach that fits your checkout, set it up on a staging copy and test every payment and shipping path on a phone. For more ideas on what sits around the checkout, read about upsell plugins and order management plugins. If you want to see how a full WooCommerce store looks inside a theme, try the live demos.