Up Arrow

How To Remove Configurable Product Price From Dropdown In Magento

  • Date: October 11th, 2012
  • Facebook
  • Tweet
  • Googleplus
  • IN

remove confiugrable product price from drop-down in magento

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>

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>

you may have different ways to get it resolved i really would like to hear that, if you have any question please forward us as well, thank you !