In the internet are described different ways to diplay checkout progress in the left sidebar. But how to diplay it in the top of the page?

And I have a second question: how to know at what step the user is? I need to set a CSS class to a element in dependence of what step the user is.


This can be accomplished with CSS only. You can find the css below. It basically comes down to moving the .col-left above .col-main using the 2columns-left layout for example. When making both columns 100% width this will force one under the other.

Determining in what step the user is can best be done by extending the javascript Checkout class found in file skin/frontend/base/default/js/opcheckout.js. THere is a method called gotoSection that is called to move the user to the next step

#checkout-step-login h3 { margin-bottom: 5px; }
#checkout-step-login .col2-set .col-1 { float: right; }
#checkout-step-login .col2-set .col-2 { float: left; }

#checkout-step-login .col-1 ul { list-style: disc; padding-left: 17px; margin: 13px 0 0 0; }
#checkout-step-login ul.form-list { list-style: none; padding-left: 0; margin: 20px 0 0 0; }
#checkout-step-login #remember-me-box .link-tip { display: none; }

#opc-shipping .step-title { display: none; }
.step-title .number { display: none; }

#checkoutSteps { position: relative; border-bottom: 1px solid #ddd; }

#checkoutSteps .step-title { width: 20%; height: 20px; position: absolute; top: 0; padding: 9px 0 5px 0; }
#checkoutSteps .step-title h2 { width: 100%; text-align: center; font-size: 12px; font-weight: bold; }
#opc-login .step-title { left: 0; }
#opc-billing .step-title { left: 20%; }
#opc-shipping_method .step-title { left: 40%; }
#opc-payment .step-title { left: 60%; }
#opc-review .step-title { left: 80%; }

#checkoutSteps .step { margin-top: 34px; }

#checkoutSteps .section { border-bottom: none; }

.opc .allow .step-title, .opc .active .step-title { background-color: #A4A4A4; }
| improve this answer | |
  • Sadly the Github link doesn't work anymore... – loeffel Apr 28 '15 at 14:09
  • 1
    oh crap, did a cleanup. I'll add template and css to answer tonight (in about 3 hours) – Sander Mangel Apr 28 '15 at 14:11
  • @loeffel took me some digging through old external hard drives but this should be it (see above). it's all CSS. If you run into any issues just scream – Sander Mangel Apr 28 '15 at 18:23
  • Thanks for this, but it's the js part that is giving me a headache right now... :D – loeffel Apr 29 '15 at 8:31
  • hmz, I suck at JS but if you have any errors let me know. Actually, just send me a mail or something. this might not be the best place to go into a lengthy discussion – Sander Mangel Apr 29 '15 at 8:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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