Title: AB Checkout Steps for WooCommerce
Author: armanbasir
Published: <strong>13 augustus 2026</strong>
Last modified: 21 augustus 2026

---

Plugins zoeken

![](https://ps.w.org/ab-checkout-steps/assets/banner-772x250.png?rev=3644181)

![](https://ps.w.org/ab-checkout-steps/assets/icon-256x256.png?rev=3644181)

# AB Checkout Steps for WooCommerce

 Door [armanbasir](https://profiles.wordpress.org/armanbasir/)

[Download](https://downloads.wordpress.org/plugin/ab-checkout-steps.3.0.1.zip)

 * [Details](https://nl.wordpress.org/plugins/ab-checkout-steps/#description)
 * [Beoordelingen](https://nl.wordpress.org/plugins/ab-checkout-steps/#reviews)
 *  [Installatie](https://nl.wordpress.org/plugins/ab-checkout-steps/#installation)
 * [Ontwikkeling](https://nl.wordpress.org/plugins/ab-checkout-steps/#developers)

 [Ondersteuning](https://wordpress.org/support/plugin/ab-checkout-steps/)

## Beschrijving

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.

## Schermafbeeldingen

[[

[[

[[

[[

[[

[[

[[

## Installatie

 1. In the WordPress dashboard, go to Plugins > Add New > Upload Plugin.
 2. Choose the ab-checkout-steps.zip file and click Install Now.
 3. Click Activate.
 4. Go to Settings > AB Checkout Steps to choose 3 or 4 steps.
 5. Open your store’s checkout page — it will automatically display the configured 
    number of steps.

## Beoordelingen

Er zijn geen beoordelingen voor deze plugin.

## Bijdragers & ontwikkelaars

“AB Checkout Steps for WooCommerce” is open source software. De volgende personen
hebben bijgedragen aan deze plugin.

Bijdragers

 *   [ armanbasir ](https://profiles.wordpress.org/armanbasir/)

[Vertaal “AB Checkout Steps for WooCommerce” in je eigen taal.](https://translate.wordpress.org/projects/wp-plugins/ab-checkout-steps)

### Interesse in ontwikkeling?

[Bekijk de code](https://plugins.trac.wordpress.org/browser/ab-checkout-steps/),
haal de [SVN repository](https://plugins.svn.wordpress.org/ab-checkout-steps/) op,
of abonneer je op het [ontwikkellog](https://plugins.trac.wordpress.org/log/ab-checkout-steps/)
via [RSS](https://plugins.trac.wordpress.org/log/ab-checkout-steps/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 3.0.1

 * Confirmed compatibility with WordPress 7.1.

#### 3.0.0

 * Renamed to AB Checkout Steps for WooCommerce.
 * Added new icon and banner assets.

## Meta

 *  Versie **3.0.1**
 *  Laatst geüpdatet **2 maanden geleden**
 *  Actieve installaties **Minder dan 10**
 *  WordPress versie ** 5.8 of nieuwer **
 *  Getest t/m **7.1.3**
 *  PHP versie ** 7.4 of nieuwer **
 *  Taal
 * [English (US)](https://wordpress.org/plugins/ab-checkout-steps/)
 *  [Geavanceerde weergave](https://nl.wordpress.org/plugins/ab-checkout-steps/advanced/)

## Waarderingen

Er zijn nog geen beoordelingen ingediend.

[Je beoordeling](https://wordpress.org/support/plugin/ab-checkout-steps/reviews/#new-post)

[Bekijk alle beoordelingen](https://wordpress.org/support/plugin/ab-checkout-steps/reviews/)

## Bijdragers

 *   [ armanbasir ](https://profiles.wordpress.org/armanbasir/)

## Ondersteuning

Iets te melden? Hulp nodig?

 [Het supportforum bekijken](https://wordpress.org/support/plugin/ab-checkout-steps/)