AB Checkout Steps for WooCommerce

Turns the WooCommerce checkout page into a 3 or 4 step flow on a single page (no reload / page change), with an optional Cart step, a customizable accent color, and multiple progress bar styles — all configurable under Settings > AB Checkout Steps.

Settings

Under Settings > AB Checkout Steps you can choose:

• Number of Steps — 3 (Information, Shipping, Payment) or 4 (Cart, Information, Shipping, Payment). With 4 steps, a Cart summary (products, shipping cost, total) is shown as its own first step, taken from WooCommerce’s normal order review table.
• Accent Color — pick any color with the built-in WordPress color picker. It’s used for the active/completed step indicator and the ”Next” button.
• Progress Bar Style — choose how the step indicator looks:
  • Circles — numbered circles connected by a line (default)
  • Chevron — a connected arrow ribbon
  • Minimal — plain text labels with an underline, no circles
  • Progress Bar — a thick track with small dot markers
  • Dots — small, compact dots with no numbers
  • Boxes — solid numbered square blocks

How It Works

This plugin does NOT rebuild the checkout form from scratch. It uses WooCommerce’s own checkout fields (billing, shipping, order review, payment) and groups them into steps via JavaScript + CSS, based on the step count chosen in Settings:

1. Cart* -> product summary, shipping cost, total (4-step mode only)
2. Information -> billing fields (name, email, phone, billing address)
3. Shipping -> ”Ship to a different address?” checkbox + shipping address fields + order notes
4. Payment -> shipping method (3-step mode) / payment method (4-step mode) and the ”Place Order” button

Because it only regroups elements that already exist, this plugin stays compatible with most WooCommerce shipping/payment plugins. However, if your theme uses a custom checkout builder (e.g. the Elementor Pro checkout widget, or the new WooCommerce Blocks checkout), the step layout may need extra adjustments — reach out to your developer for further customization.

Notes

• Clicking ”Next” validates the visible required fields in that step before allowing you to move to the next one.
• The ”Place Order” button is still WooCommerce’s original button in the last step — the checkout/payment process and security are completely unchanged; this plugin purely changes the VISUAL flow of checkout.
• The accent color and progress bar style are both configurable under Settings > AB Checkout Steps — no code editing required.