Up Arrow

Configurable Products Remove “$xx” Price From Drop Down Options – Magento

  • Date: June 21, 2014
  • Facebook
  • Tweet
  • Googleplus
  • IN


Recently in one of our magento project i faced an issue where my aim was to remove price from configurable product dropdown options. Coming up with an easy solutions was in my mind and i took resort to jQuery to sort it out.

The following steps will guide you to remove price from configurable product dropdown options.

1. Add jquery library in your theme & must use jquery noconflict like: “jQuery.noConflict()”

2. Open up  “configurable.phtml” file from your theme like following path if it already exists. If do not create/copy “configurable.phtml” file from “base” theme with all folders in the following path.


app/design/frontend/your_package/your_theme/template/catalog/product/view/type/options/

Note: “app/design/frontend” path already exist in magento just using for follow correct rest folders.

3. Add the following jQuery code on top of the “configurable.phtml” file.


<script type="text/javascript">
// <![CDATA[
    jQuery(document).ready(function(e) {
        checkoptions();

        jQuery("select.super-attribute-select").change(function(){
            checkoptions();
        });
    });

    function checkoptions(){
        jQuery("select.super-attribute-select option").each(function(){
            var optiontext = jQuery(this).text();
            var addsignpos = optiontext.indexOf('+');
            var subtractsignpos = optiontext.indexOf('-');
            if(addsignpos>0){
                var result = optiontext.substring(0,addsignpos-1);
                jQuery(this).html(result);
            }

            if(subtractsignpos>0){
                var result = optiontext.substring(0,subtractsignpos-1);
                jQuery(this).html(result);
            }
        });
    }
// ]]>
</script>

You could download the file here if you would like.

Folks who are using magento 1.4 or previous versions please use the following javascript code
instead as those versions don’t support jQuery.


<script type="text/javascript">
// <![CDATA[
     checkbundeloptions();
     document.getElementById('select_1').onchange=function(){ // i.e "select_1" is select box id you need to replace it with your select box id
        checkbundeloptions();
     }
    function checkbundeloptions(){
        var sel = document.getElementById('select_1'); // i.e "select_1" is select box id you need to replace it with your select box id
        for (var i=0;i<sel.options.length;i++){
            if (sel.options[i].value != '') {
                var optiontext = sel.options[i].text;
                var addsignpos = optiontext.indexOf('+');
                var subtractsignpos = optiontext.indexOf('-');
                if(addsignpos>0){
                    var result = optiontext.substring(0,addsignpos-1);
                    sel.options[i].innerHTML=result;
                }
                if(subtractsignpos>0){
                    var result = optiontext.substring(0,subtractsignpos-1);
                    sel.options[i].innerHTML=result;
                }
            }
        }
    }
// ]]>
</script>

Comments are always very much appreciated, you may have different ways to get it resolved i really would like to hear that, thank you !