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.
Opens WPIDE on
Code
$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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.