WP Manifestindependent plugin directory
manifest / ecommerce / woocommerce-modern-stepper

WooCommerce Modern Stepper & Checkout

Modernizes the WooCommerce checkout process with a sleek 3-step checkout stepper, live AJAX cart updates, and a local store pickup selection logic.

by AlirezaKMaxim · github.com/alirezakmaxim/woocommerce-modern-stepper · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/alirezakmaxim/woocommerce-modern-stepper/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/alirezakmaxim/woocommerce-modern-stepper ↗

A modern 3-step stepper-based cart and checkout experience for WooCommerce, featuring AJAX live updates, dynamic shipping/pickup toggling, and a polished RTL Persian (Farsi) interface.

Overview

This plugin completely replaces the default WooCommerce cart/checkout flow with a modern 3-step stepper interface:

  1. Cart — Review and adjust items in your cart with live AJAX quantity updates.
  2. Checkout — Place your order with dynamic shipping/pickup toggling.
  3. Thank You — Order confirmation page.

Built with vanilla JavaScript, Tailwind CSS, and a warm gold/earth tone palette, it delivers a fast, mobile-responsive experience optimized for Persian (Farsi) RTL.

Features

  • 3-Step Stepper Navigation — Visual progress bar with clickable steps: Cart (0%), Checkout (50%), Order Received (100%).
  • AJAX Cart Operations — Live quantity updates, item removal, and coupon management via fetch() with debouncing and AbortController for race-condition prevention.
  • Dynamic Shipping / Pickup Toggle — When "Local Pickup" is selected, billing address fields are hidden and a store address card appears.
  • Shipping Method Descriptions — Custom description textarea for each shipping method in WooCommerce shipping zones.
  • Admin Settings Panel — Dedicated "Modern Stepper" tab under WooCommerce > Settings with options to enable/disable, set free shipping threshold, store address, hours, and phone.
  • WooCommerce Template Overrides — Replaces cart/cart.php, checkout/form-checkout.php, and checkout/thankyou.php.
  • Persian RTL Design — Full Persian translations, Vazirmatn/YekanBakh fonts, and right-to-left layout.
  • Order Meta Persistence — Saves delivery type, chosen shipping rate, and pickup store address to order postmeta.
  • Performance Optimized — Lightweight AJAX updates, 25ms debounce on quantity changes, AbortController for stale request cancellation.
  • Mobile Responsive — Fully responsive layout for mobile, tablet, and desktop.

Requirements

Requirement Minimum Version
WordPress 5.8
PHP 7.4
WooCommerce 5.0

No custom database tables required.

Installation

  1. Download the plugin and upload the woocommerce-modern-stepper folder to /wp-content/plugins/.
  2. Activate the plugin from the Plugins screen in WordPress.
  3. Go to WooCommerce > Settings > Modern Stepper to configure the plugin.
  4. Optionally, run npm run build if you modify the Tailwind CSS source.

Configuration

Navigate to WooCommerce > Settings > Modern Stepper.

Setting Type Default Description
Enable Modern Stepper Checkbox Enabled Enable or disable the stepper system
Free Shipping Threshold Number 500000 Free shipping threshold in IRR (Toman)
Store Address Textarea Tehran address Physical store address for pickup
Store Hours Text شنبه تا پنجشنبه ۱۰ الی ۲۱ Store operating hours
Store Phone Text ۰۲۱-۲۲۳۳۴۴۵۵ Store phone number

File Structure

woocommerce-modern-stepper/
├── woocommerce-modern-stepper.php    # Main plugin entry point
├── package.json                      # Node build scripts (Tailwind, Jest)
├── tailwind.config.js                # Tailwind CSS configuration
├── includes/                         # PHP backend classes
│   ├── Bootstrap.php                 # Plugin initialization & asset enqueueing
│   ├── Stepper.php                   # Stepper state calculation
│   ├── Delivery.php                  # Shipping/pickup logic & order meta
│   ├── CartAjax.php                  # AJAX cart handlers
│   └── AdminSettings.php             # WooCommerce admin settings tab
├── templates/                        # View templates
│   ├── stepper-renderer.php          # 3-step stepper navigation UI
│   ├── checkout-preview-items.php    # Mini cart preview for checkout
│   ├── store-address-card.php        # Store pickup address card
│   └── woocommerce/                  # WooCommerce template overrides
│       ├── cart/cart.php
│       └── checkout/
│           ├── form-checkout.php
│           └── thankyou.php
├── assets/
│   ├── css/
│   │   ├── wmsc-style.css            # Compiled production CSS
│   │   └── src/input.css             # Tailwind CSS source
│   ├── js/
│   │   └── wmsc-script.js            # Frontend JavaScript (vanilla ES6+)
│   └── fonts/
│       └── Vazirmatn-Variable.woff2  # Persian variable font
└── Docs/
    ├── ARCHITECTURE.md               # Architecture documentation
    └── AI-AGENT-GUIDE.md             # Developer guide

Hooks

Actions

Hook Callback Purpose
plugins_loaded wmsc_initialize_plugin() Initialize plugin
wp_enqueue_scripts Bootstrap::enqueue_assets() Enqueue frontend assets
woocommerce_checkout_update_order_review Bootstrap::sync_shipping_to_billing() Sync billing to shipping address

Filters

Filter Callback Purpose
woocommerce_locate_template Bootstrap::locate_template() Override WooCommerce templates
gettext Bootstrap::translate_checkout_texts() Persian translations
woocommerce_checkout_fields Delivery::toggle_checkout_fields_required() Dynamic field requirements
woocommerce_update_order_review_fragments Delivery::add_shipping_methods_fragment() AJAX checkout fragments
woocommerce_shipping_instance_form_fields_{id} Delivery::inject_description_field() Shipping method descriptions

AJAX Endpoints

Action Handler Purpose
wp_ajax/nopriv_wmsc_update_item_quantity CartAjax::update_item_quantity() Update cart quantity
wp_ajax/nopriv_wmsc_remove_cart_item CartAjax::remove_cart_item() Remove cart item
wp_ajax/nopriv_wmsc_apply_coupon_code CartAjax::apply_coupon_code() Apply coupon
wp_ajax/nopriv_wmsc_remove_coupon_code CartAjax::remove_coupon_code() Remove coupon

Development

Build Commands

npm run build    # Compile Tailwind CSS for production
npm run watch    # Watch mode for development
npm test         # Run tests (Jest)

Technology Stack

  • Backend: WordPress + WooCommerce PHP API, PSR-4 autoloading
  • Frontend: Vanilla ES6+ JavaScript, fetch() AJAX
  • Styling: Tailwind CSS v3.4.1 with custom color palette
  • Font: Vazirmatn (Persian)

Changelog

3.9.8

  • Initial release

License

GNU General Public License v2.0 or later. See LICENSE for details.

Author

Support

For bug reports and feature requests, please open an issue on GitHub.