# Cart, Checkout and Confirmation Progress Steps

> Shows a simple three-step progress bar (Cart, Checkout, Done) at the top of the cart, checkout and order-received pages, so shoppers know how close they are.

- Type: PHP
- Runs: Run everywhere
- Category: [WooCommerce](https://wpide.com/library/category/woocommerce/)
- Requires: WooCommerce
- Tags: woocommerce, checkout, cart, ux
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/woo-checkout-progress-steps/

## Code

```php
$wpide_steps = array( 'Cart', 'Checkout', 'Done' );

$wpide_steps_html = function ( $current ) use ( $wpide_steps ) {
    return function () use ( $current, $wpide_steps ) {
        echo '<ol class="wpide-steps" style="display:flex;gap:.5em;list-style:none;margin:0 0 1.5em;padding:0;counter-reset:step">';

        foreach ( $wpide_steps as $i => $label ) {
            $state = $i < $current ? 'done' : ( $i === $current ? 'current' : 'next' );
            printf(
                '<li %1$s style="flex:1;padding:.5em;border-bottom:3px solid %2$s;font-weight:%3$s;text-align:center">%4$s. %5$s</li>',
                $i === $current ? 'aria-current="step"' : '',
                esc_attr( 'next' === $state ? '#dcdcde' : '#2271b1' ),
                'current' === $state ? '700' : '400',
                (int) ( $i + 1 ),
                esc_html( $label )
            );
        }

        echo '</ol>';
    };
};

add_action( 'woocommerce_before_cart', $wpide_steps_html( 0 ), 1 );
add_action( 'woocommerce_before_checkout_form', $wpide_steps_html( 1 ), 1 );
add_action( 'woocommerce_before_thankyou', $wpide_steps_html( 2 ), 1 );
```

## Notes

Works with the classic cart and checkout; edit the step names at the top.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Cart, Checkout and Confirmation Progress Steps" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/