Show Absolute Custom Option Price in Product Details Page Easy Way

Magento official documents have a tutorial about Using Absolute Price in Product Custom Options but its for older version of Magento. Do not try magento official tutorial in your production shop if your magento version older than 1.6.x.
As an easy way: if you want to show absolute price instead of  “ + 10.00 $” you can use this code snippet in your product view template page.

Open your app/design/frontend/[YOUR_TEMPLATE]/[SUB_CHILD]/catalog/product/view.phtml
Note : Jquery must be installed.
Compatible : Magento 1.7+ (tested with 1.9.2.1 + 1.9.2.2)
Then add this code bottom of view.phtml


<script type="text/javascript">
    // to avoid jQuery conflicts with Prototype.js.
    $j = jQuery;
    // to show correct price calculation with multi currency system i added this line below.
    var final_price     = <?php echo $_product->getFinalPrice() * floatval(Mage::app()->getStore()->getCurrentCurrencyRate()); ?>;
    var currency_symbol = "<?php echo Mage::app()->getLocale()->currency(Mage::app()->getStore()->getCurrentCurrencyCode())->getSymbol(); ?>";
    $j('input[name^="options"]').each( function(){
        var option_price        = $j(this).attr('price');
        var option_format_price = ( parseFloat(final_price) + parseFloat(option_price) ).toFixed(2);
        var html_price          = $j(this).parent('li').find('.price-notice .price').html();
        var html_format = '<span class="price"> ' + option_format_price + '&nbsp;' + currency_symbol + '</span>';
        if( typeof html_price === 'undefined') {
            $j(this).parent('li').find('span.label label').append('<span class="price-notice">'+html_format+'</span>');
        } else {
            $j(this).parent('li').find('.price-notice').html(html_format);    
        }
        
    });

</script>

Than result must be like this.
You can play with code whatever you like.
magento absolute price with jquery

if you encounter any problem write as a comment and help to improve code block.

Founder and developer of Magefly. Developing and customizing Magento for ecommerce customers needs. Spending time to innovate ecommerce and improving conversions.

8 Yorum “Show Absolute Custom Option Price in Product Details Page Easy Way

  1. Hi its worked for me in product inner.
    But in Add to cart pop up in home page it shows “+” custom rate.
    Please reply me

Leave a Reply

Your email address will not be published. Required fields are marked *