Change the text “Choose an option…” on Magento pro

Question

I created a configurable product, it has three option: color, size and style.

Now in product page, each option has the default text "Choose an Option..." in dropdown, but I want the text should be "Select color", "Select size" and "Select style".

I edited function getJsonConfig() in app\code\core\Mage\Catalog\Block\View\Type\Configurable.php

From:

    'chooseText'        => Mage::helper('catalog')->__('Choose an Option...'),

To:

    'chooseText'        => ('Select ').$attribute->getLabel(),

And edit line 39 of the file frontend/base/default/template/catalog/product/view/type/options/configurable.phtml to:

<option><?php echo $this->__('Select ') ?><?php echo $_attribute->getLabel() ?></option>

But the result is not good, it alway show the text "Choose style" in three options. Please give me a hint for this issue, thank you very much!

Answer 1

I was looking for a more simple way to do this. I didn't want to extend any core files or muck around with extending JavaScript. Instead I parsed the settings JSON, updated the chooseText setting, and converted back to JSON:

---

/~theme/default/template/catalog/product/view/type/options/configurable.phtml

<?php
$jsonConfig = json_decode($this->getJsonConfig());
$jsonConfig->chooseText = 'Select..';
?>

<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo json_encode($jsonConfig); ?>);
</script>

---

More information and further examples here.

Answer 2

This worked for me on CE 1.8.1. It's based off Shein's answer, and addresses the wrong option getting selected on load. I basically just copied/pasted the Product.Config.fillSelect() method from /js/varien/product.js. Within the pasted code I changed:

element.options[0].innerHTML = this.config.chooseText;

to

element.options[0].innerHTML = element.config.label;

This allows keeping product.js unmodified, and just override the method. The only drawback is any future core updates to that method will need migrating.

Since the new code just gets the "label" setting, the data-choose-text attribute on isn't needed on the select tag

---

<?php
$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <dl>
    <?php foreach($_attributes as $_attribute): ?>
        <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
        <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
            <div class="input-box">
                <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
                    <option><?php echo $_attribute->getLabel() ?></option>
                </select>
              </div>
        </dd>
    <?php endforeach; ?>
    </dl>
    <script type="text/javascript">
        Product.ConfigDefaultText = new Class.create(Product.Config, {
            fillSelect: function (element) {
                var attributeId = element.id.replace(/[a-z]*/, '');
                var options = this.getAttributeOptions(attributeId);
                this.clearSelect(element);
                element.options[0] = new Option('', '');
                element.options[0].innerHTML = element.config.label;

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

                if (options) {
                    var index = 1;
                    for (var i = 0; i < options.length; i++) {
                        var allowedProducts = [];
                        if (prevConfig) {
                            for (var j = 0; j < options[i].products.length; j++) {
                                if (prevConfig.config.allowedProducts
                                    && prevConfig.config.allowedProducts.indexOf(options[i].products[j]) > -1) {
                                    allowedProducts.push(options[i].products[j]);
                                }
                            }
                        } else {
                            allowedProducts = options[i].products.clone();
                        }

                        if (allowedProducts.size() > 0) {
                            options[i].allowedProducts = allowedProducts;
                            element.options[index] = new Option(this.getOptionLabel(options[i], options[i].price), options[i].id);
                            element.options[index].config = options[i];
                            index++;
                        }
                    }
                }
            }
        });
        var spConfig = new Product.ConfigDefaultText(<?php echo $this->getJsonConfig() ?>);
    </script>
<?php endif;?>

Answer 3

If you only change file configurable.js
It will only change first select when page load
So I must change template file
Get attached file for test.(I just write it to an small extension)

<?php
$_product = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <dl>
    <?php foreach($_attributes as $_attribute): ?>
        <?php
        $_attributeId = $_attribute->getAttributeId();
        $_attributeInfo = Mage::getModel('eav/entity_attribute')->load($_attributeId);
        $_attributeLabel = str_replace(' ','-',strtolower($_attributeInfo->getFrontendLabel()));
        ?>
            <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
                <div class="input-box">
                    <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select kevin-black-<?php echo $_attributeLabel;?>">
                    <option><?php echo $_attributeInfo->getFrontendLabel() ?></option>
                    </select>
                </div>
            </dd>
        <?php endforeach; ?>
    </dl>
<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
    //[e-mail] Change Text follow attribute Label
    function changeFristText(){
        <?php foreach($_attributes as $_attribute): ?>
            <?php
            $_attributeId = $_attribute->getAttributeId();
            $_attributeInfo = Mage::getModel('eav/entity_attribute')->load($_attributeId);
            ?>
            var label = '<?php echo $_attributeInfo->getFrontendLabel();?>';
            $$('select.kevin-black-'+label).each(function(elem){
                var options = elem.childElements();
                options[0].update(label);
            });
        <?php endforeach;?>
    }
</script>
<?php endif;?>


in file : js/varien/configurable.js replace line 171 = element.options[0] = new Option(element.config.label, ‘’);

It for all attribute set .

Answer 4

My version of the same problem. You need to change only template catalog/product/view/type/options/configurable.phtml:

<?php
$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <dl>
    <?php foreach($_attributes as $_attribute): ?>
        <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
        <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
            <div class="input-box">
                <?php $chooseText = $this->__('Select %s', $_attribute->getLabel()); ?>
                <select data-choose-text="<?php echo $chooseText; ?>" name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
                    <option><?php echo $chooseText; ?></option>
                </select>
              </div>
        </dd>
    <?php endforeach; ?>
    </dl>
    <script type="text/javascript">
        Product.ConfigDefaultText = new Class.create(Product.Config, {
            fillSelect: function($super, element) {
                $super(element);
                var chooseDefaultText = element.getAttribute('data-choose-text');
                $(element).options[0] = new Option(chooseDefaultText, '');
            }
        });
        var spConfig = new Product.ConfigDefaultText(<?php echo $this->getJsonConfig() ?>);
    </script>
<?php endif;?>

Note (extracted from comments) If the selected default value happens not to be "Select %s", replace

$(element).options[0] = new Option(chooseDefaultText, '');

with

$(element).options[0].innerHTML = chooseDefaultText;

Answer 5

I extended class Product.Config (method fillselect) by these code:

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

It's ok!

Answer 6

file catalog/product/view/type/options/configurable.phml

<?php
$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <dl>
    <?php foreach($_attributes as $_attribute): ?>
        <?php 
            $_attributeId = $_attribute->getAttributeId();
            $_attributeInfo = Mage::getModel('eav/entity_attribute')->load($_attributeId);
            $_attributeLabel = str_replace(' ','-',strtolower($_attributeInfo->getFrontendLabel()));
        ?>
        <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
            <div class="input-box">
                <select  name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select kevin-black-<?php echo $_attributeLabel;?>">
                    <option><?php echo $this->__('Select '.$_attributeLabel) ?></option>
                  </select>
              </div>
        </dd>
    <?php endforeach; ?>
    </dl>
    <script type="text/javascript">
        var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
        //Change Text follow attribute Label
        function changeFristText(){
            <?php foreach($_attributes as $_attribute): ?>
                <?php 
                    $_attributeId = $_attribute->getAttributeId();
                    $_attributeInfo = Mage::getModel('eav/entity_attribute')->load($_attributeId);
                    $_attributeLabel = str_replace(' ','-',strtolower($_attributeInfo->getFrontendLabel()));
                ?>
                var label = '<?php echo $_attributeLabel;?>';
                $$('select.kevin-black-'+label).each(function(elem){
                    var options = elem.childElements();
                    options[0].update('Select ' + label);
                });
            <?php endforeach;?>
        }
    </script>
<?php endif;?>

and add one line changeFristText(); after line 171 (element.options[0] = new Option(this.config.chooseText, '');) in file js/varien/configurable.js

It for all attribute set.