Home    Articles

 

How to change "Choose an option" for configurable products in magento

 

If you want to change the "Choose an option" text from the selector tag located on the product view page in magento, you have to know that the default text is changed by javascript after the page is fully loaded.

Indeed, the text is generated by php but after the page is loaded some javascript code is changeing the text as needed.

The javascript code that handle this can be found in [magento root]/js/varien/configurable.js

Open this file and search for (line 167):

fillSelect: function(element){
        var attributeId = element.id.replace(/[a-z]*/, '');
        var options = this.getAttributeOptions(attributeId);
        this.clearSelect(element);
        element.options[0] = new Option(this.config.chooseText, '');

        var prevConfig = false;
        if(element.prevSetting){
            prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
        }

Let's assume that the "Choose an option" text will be replaced with product attributes like: Size, Color, Brand ...etc.

Replace the code above with this:

fillSelect: function(element){
        var attributeId = element.id.replace(/[a-z]*/, '');
        var options = this.getAttributeOptions(attributeId);
        label = element.options[0].value; 
        this.clearSelect(element);
        element.options[0] = new Option('', '');
        element.options[0].innerHTML = label;

        var prevConfig = false;
        if(element.prevSetting){
            prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
        }

Conclusion

Initial code was using some default text for default selected option. Our code is using the Label of the attribute.

 

by