Recent Posts


Magento 2 Checkout Progress Bar


Frustrated by Magento? Then you’ll love Commerce Bug, the must have debugging extension for anyone using Magento. Whether you’re just starting out or you’re a seasoned pro, Commerce Bug will save you and your team hours everyday. Grab a copy and start working with Magento instead of against it.

Updated for Magento 2! No Frills Magento Layout is the only Magento front end book you'll ever need. Get your copy today!

One other neat thing I noticed about Magento’s 2 checkout is the stylized progress bar involved zero images. The orange lines and step numbers surrounded by circles are 100% driven by non-background image CSS.

The checkmark that indicates the active step comes from the following CSS rules

.opc-progress-bar-item._active > span:after {
    font-family: 'luma-icons';
    content: 'e610';

The e610 is a private unicode character that Magento populates via it’s bananas custom font thing.

The progress features come from a equally crazy feature of CSS I wasn’t aware of – CSS Counters.

.opc-progress-bar-item > span:before, .opc-progress-bar-item > span:after {
    /* ... */
    content: counter(i);
    counter-increment: i;
    /* ... */

Copyright © Alan Storm 1975 – 2022 All Rights Reserved

Originally Posted: 12th November 2016