I am trying to add an active class to the opc progress block. I tried modifying the gotoSection function both in opcheckout.js and opcheckout_rwd.js but can't figure out how to change it to update the progress block. I am not looking for a jQuery solution, I am sure there has to be an easy way to modify this function, so my class is added and removed properly when moving forward or backward in the checkout.

This is what I have done so far:

Added this to the Checkout.prototype.gotoSection function in opcheckout_rwd.js:

var progressBlock = $(section + '-progress-opcheckout'); progressBlock.addClassName('current');

Now I need to somehow modify the resetPreviousSteps function to remove the current class when moving back in the checkout...

1 Answer 1


Replace last <dt> tag with

File : template\checkout\onepage\progress\billing.phtml

Add below code just after to "this.currentStep = section;" line (line number 35)

file : skin\frontend\jumex\default\js\opcheckout_rwd.js

$j('div dt').removeClass('current');

if( $j('#'+section+'-progress-opcheckout').length >0){
$j('#'+section+'-progress-opcheckout dt').addClass('current');

Now you can see every active step have apply current class to <dt> tag so you can set it as active.

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.