I have successfully added a stage to our checkout process - I followed the official magento documentation

However, the last stage to the checkout is not being numbered properly. Any ideas as to why? Through inspect element I can see that the numbers are coming from the ::before attribute.

Here is a picture of what's happening: enter image description here

Any help would be very much appreciated.

1 Answer 1


Found the problem, magento only specifies the content of the ::before on the checkout steps for the first 2 (1,2).

All you need to do is add this to your css if you have this problem:

.checkout-index-index .opc-progress-bar .opc-progress-bar-item:nth-child(3) > span:before {content: '3' !important;}

If you have more steps, simply copy the line again and change the numbers accordingly.

Now the checkout numbers all of the steps (1,2,3):

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.