The class 'store_product_price' is updated by Javascript so that when a customer selects an option with a price variant, the price on display updates to reflect the new price.

This all works brilliantly.

However. We've added a system where by all the colour options for a product are shown as images on the product page. When clicking on one of these images we have got jQuery updating the select box of colour options (as populated by Expresso:Store) to reflect the right colour. However, the price doesn't update. I've tried fiddling with the $('select').change() methods, but I can't get it work.

The jQuery we use to update the select the right option in the select box is:

$('.options select option').removeAttr('selected').filter('option[data-val="'+$(this).attr('data-title')+'"]').attr('selected','selected');

How can use code to trigger a recalculation of the price please?



  • Can you provide the JQuery code you mentioned here: "we have got jQuery updating the select box of colour options" and can you confirm if it's a single modifier or multiple modifiers for the product? Sep 20, 2013 at 10:31
  • Hi Peter, I've edited my question to include the jQuery.
    – Tomtids
    Oct 7, 2013 at 10:40

1 Answer 1


I think the problem is that the Store JS code doesn't know the SELECT has changed so doesn't update the price. Setting the selected attribute doesn't fire the change event. You could test this by creating a change event on the select with a debug output to see if it fires.

$(".options select").change( function() {
    console.log("SELECT TRIGGERED ".$(this).val()); //ensure you remove this on live site as crashes IE!

Instead of setting "selected" for the OPTION, set the value for the SELECT:

$('.options select'.val( $(this).attr('data-title') ).trigger('change');

Although I think this is more correct for your scenario...

$('.options select'.val( $('.options select option[data-val="'+$(this).attr('data-title')+'"]').attr("value") ).trigger('change');


What's the name of your select and what's the classes on the form element?

This is the line from Store JavaScript:

$(".store_product_price", form).val(price_str).html(price_str).trigger("change");

In the updateSku function.

Also this which attaches the handler the the update event on the select:

$(document).delegate('.store_product_form [name^="modifiers"]:not(:radio)', 'change', lib.updateSku).delegate('.store_product_form [name^="modifiers"]:radio', 'click', lib.updateSku);
  • Thanks Peter. The change event is firing, but the price isn't updating. I'm wondering if there is a Store based JS function I can call directly from the code.
    – Tomtids
    Oct 7, 2013 at 13:40
  • Updated answer - double check your form and field names. Oct 7, 2013 at 16:29

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.