How to add a multi-step checkout to WooCommerce

WooCommerce checkout guides·6 sections

WooCommerce has no built-in setting for a multi-step checkout, so you need a plugin or custom code. This guide covers all three routes, what each one costs, and how to confirm it worked.

What you need before you start

You need administrator access to WordPress, a working WooCommerce store, and a way to test a real order without charging a real card. If you would rather see the result before installing anything, the live multi-step checkout demo runs in the browser.

Set up a staging copy of your site if you have one. Checkout is the one page where a mistake costs money directly, and every route below touches it.

If you cannot run staging, at least enable a test payment gateway — WooCommerce's built-in "Cash on delivery" method works for this — so you can place a full order end to end without a live transaction.

Check which checkout your store uses

Open Pages → Checkout in WordPress and look at what the page contains. This single detail decides which plugins can work for you.

• A shortcode block containing [woocommerce_checkout] means you are on the classic checkout.
• A block called Checkout, with editable inner blocks for contact and shipping, means you are on the block checkout.

Stores built before late 2023 are usually on the classic checkout. Newer stores default to the block checkout. Some multi-step checkout plugins target the classic checkout only, so check which one you have first rather than after you have paid for something. Ours supports both, since version 1.1.0.

Adding it with a plugin

A plugin is the practical route for almost every store, because it turns a development project into a settings screen.

The general shape is the same whichever one you pick:

• Install and activate the plugin from Plugins → Add New, or by uploading the ZIP if you bought it.
• Find its settings screen — most add a tab under WooCommerce → Settings.
• Enable the multi-step mode, then choose which steps you want: login, billing, shipping, coupon, order review and payment are the usual candidates.
• Turn on per-step validation so a customer cannot advance past a step with an empty required field.
• Style the step indicator to match your theme, then place a test order.

With the WooCommerce multi-step checkout plugin this lives under WooCommerce → Settings → Multi-Step Checkout, and each step is a single checkbox on the General tab.

Free plugin or paid plugin?

Start with a free plugin unless you already know you need something it does not do. Trying one costs an hour, and if it works you are finished.

Free multi-step checkout plugins generally give you the split itself and a basic step indicator. That is the whole feature for a lot of stores.

Paid versions tend to add the things you notice later: fine-grained color control, editable labels for every string, saved progress across a page refresh, forced step order, and vendor support when a theme conflict appears.

The comparison of WooCommerce multi-step checkout plugins covers what each of the main options actually includes.

Building it without a plugin

You can build a multi-step checkout in a child theme, but it is a real project rather than a snippet, and it is the option most stores regret.

The work is roughly: wrap the checkout fieldsets in step containers using WooCommerce's checkout hooks, write the JavaScript that shows one step at a time, hook into WooCommerce's client-side validation so each step validates independently, persist the current step so a refresh does not reset it, and build the step indicator.

The cost is not the first build, it is every WooCommerce release afterwards. Checkout markup and the checkout JavaScript both change over time, and custom code that assumes a particular DOM structure breaks quietly — usually on the one page where you least want silent failures.

Custom code makes sense when your checkout is genuinely unusual: extra steps for a booking flow, conditional steps by product type, or a design no plugin will produce. For a standard split of standard fields, it is not worth it.

Checking it actually worked

Place at least one complete test order on a phone before you call it done, because a step indicator that looks fine on a desktop can wrap badly on a narrow screen.

Work through this list:

• Every step renders, and the indicator shows the right step as active.
• Leaving a required field empty blocks the Next button and shows the error on that step, not at the end.
• Refreshing the page mid-checkout does not send you back to step one with an empty form.
• Coupons still apply, and the total updates.
• Shipping methods and rates still appear, including for an address in a different zone.
• The order completes, the confirmation page loads, and the order appears in WooCommerce → Orders.
• The customer and admin emails both arrive.

Then check a virtual or downloadable product too. Orders that need no shipping skip the shipping step entirely, and that path is easy to leave untested.