Magento show actual price on product options for configurable products

Posted by Damodar Bashyal on January 23, 2013


Magento configurable products by default shows prices based on base price set on configurable product and difference set for different attributes like this:

Magento configurable products default

But after many magento ecommerce websites developed this is the first time our new client didn't like this default idea magento provided. He wanted to show actual price on attribute dropdown selection. So quickly checked on stackoverflow and found some code here - by greg_robbins.

That's perfect if there is only one attribute, for example 'size' only but that didn't quite worked for 2nd attribute as we wanted as we had another attribute 'color'. See below:

stackflow code used

From the code above I got the idea about pricing and printed out the option to console.log and updated the code like this.

        // BEGIN:: custom price display update
        var basePrice = parseFloat(this.config.basePrice);
        // 'price' as passed is the RELATIVE DIFFERENCE. We won't use it.
        //  The ABSOLUTE DIFFERENCE is in option.price (and option.oldPrice)
        var absoluteDifference = parseFloat(option.price);
        // var price = parseFloat(price);
            // console.log(option);
            price = basePrice + absoluteDifference;
        } else {
            price = absoluteDifference;
        // END:: custom price display update

And the result was:

final result

That's what we needed and we are happy with it. Let me know if you are Magento expert and have a better idea that can be helpful for all magento developers like you and me as well as from all over the world.

I have pushed the code to github repo -

Direct link to full js code -

Rashmi George posted on - Saturday 23rd of February 2013 09:25:45 AM

This is exactly what I was looking for. Will definitely try this and let you know if it works. Thanks a lot for the post.

Jugal Patel posted on - Saturday 28th of June 2014 10:54:19 AM

Even your code fails when both the options have price to be added.
e.g. +200 for size and +50 for color.
This is not a great idea.

Gavin posted on - Monday 11th of November 2013 12:12:37 PM

This is awesome. Worked perfectly. Was exactly what I was looking for.

Thanks for the code.
not published on website

QR Code: Magento show actual price on product options for configurable products