Multi-step checkout
Split the checkout into steps, such as details first and then shipping and payment, with a progress bar, per-step validation and accessible navigation. It's still one real WooCommerce checkout underneath.
- Step 1 "Information" with the progress bar
- Order summary on the right
- The Continue button
Turning it on
- Open the Checkout page
In the builder, select Checkout.
- Switch the mode
Page settings → Layout mode → Multi-step, or pick the "Multi-step · Two columns" layout.
- Check the split
If no element has a step yet, the checkout is split for you: "Your checkout was split into 2 steps: customer details first, shipping and payment last. Adjust it in the Steps panel."
New steps are named "Step 1", "Step 2". Until you publish your own design, the default Checkout design is already a two-step checkout ("Checkout", then "Payment") built from the classic elements.
| Step | Gets these elements |
|---|---|
| First step | Returning Customer Login, Contact Information, Billing Address, Shipping Address, Customer Details (classic) |
| Last step | Shipping Methods, Payment Methods, Terms & Privacy, Place Order Button, Order Review & Payment (classic), Trust Badges |
| All steps | Everything else, such as notices, the order summary and the Steps Progress bar (added if missing) |
The Steps panel
In Page settings on a multi-step checkout, each step has a card where you can:
- Rename the step (for example "Your details" and "Delivery & payment").
- Move it up or down. Every step needs a title.
- See its elements and change each element's step, or use Move an element here….
- Add element: opens the step on the canvas and focuses the search.
- Show on canvas: shows only that step.
Elements set to All steps show on every step. Every section and element also has a Step setting on its Content tab; an element without one follows its section. Free has exactly 2 steps (so Add step and removing a step aren't available); Pro allows up to 10.
- Structure view of the Checkout page: sections, rows and columns
- Each element tagged with its step (Step: Checkout, Step: Payment)
- Step tabs in the canvas toolbar: All steps, 1. Checkout, 2. Payment
Back and Continue
- Continue reads "Continue to" + the next step's name. Change it in Page settings → Continue button text (use
{step}for the name). - Back is hidden on the first step. Change its text, or turn it off: shoppers can then go back by clicking a finished step in the progress bar.
- The buttons appear under the current step's content.
Validation
- On Continue, the step's visible required fields are checked: not empty, checkboxes ticked, a valid email. Invalid fields are highlighted and the first one gets focus.
- Pressing Enter in a field moves to the next step instead of submitting.
- If WooCommerce rejects the order, the step with the first error opens automatically.
- WooCommerce still validates everything when the order is placed.
Smart behaviour
- A step with nothing to show for this shopper (for example a shipping step for a virtual product) is skipped. With fewer than two steps left, the checkout simply shows as one page.
- Without JavaScript, every step shows on one page, so checkout always works.
- Completed steps in the progress bar are clickable ("Back to Information").
Accessibility
Screen readers hear "Step 2 of 2: Shipping & Payment" on each change, and "Please fill in the required fields in this step." when validation fails. The current step is marked for assistive technology, focus moves to the new step, and scrolling respects reduced motion.