內容簡介
AB Checkout Steps for WooCommerce 外掛將 WooCommerce 的結帳頁面轉換為 3 或 4 步驟的流程，無需重新載入或更改頁面，並提供可選的購物車步驟、可自訂的重點顏色及多種進度條樣式，提升使用者的結帳體驗。
【主要功能】
• 支援 3 或 4 步驟結帳流程
• 可選擇顯示購物車摘要
• 自訂重點顏色與進度條樣式
• 兼容大多數 WooCommerce 外掛
• 直觀的步驟指示設計
開發者團隊
② 後台搜尋「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:
Cart* -> product summary, shipping cost, total (4-step mode only)
Information -> billing fields (name, email, phone, billing address)
Shipping -> “Ship to a different address?” checkbox + shipping
address fields + order notes
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.
