Change the text "Choose an option..." on Magento product page

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!

Alkalinize

Answer 1

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;

Wigwag

Worked perfectly, and modifying a non-core template file is the best approach – Hildegardhildegarde

This selects the first non-default option for the first select input. Is this intended? Is there a way to prevent that? – Pilocarpine

@Pilocarpine Well, I don't have any Magento installation at hand, but as far as I remember this code only changes first option in selectbox, which is usually 'Choose an Option'. If any other option is selected for you, maybe your configurable attribute has another default option value, or it restores old value selected by user some time ago from session or smth. – Wigwag

Worked but same issue with Justin. :D – Monday

$(element).options[0].innerHTML = chooseDefaultText; this will ensure that it will selected as default if magento does not speicify any other rule – Tattletale

Answer 2

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.

Spiller

Answer 3

The only way I think is just to modify the javascript class that populates that dropdowns. As we can see in frontend/base/default/template/catalog/product/view/type/options/configurable.phtml that class is:

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

The file with needed class located in js/varien/product.js

The place where first <option> tag is set up is:

    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, '');
        ...

The variable chooseText used there on line 368. This variable was created in function getJsonConfig() in app/code/core/Mage/Catalog/Block/Product/View/Type/Configurable.php (you was digging the right way). You need to modify the javascript that I described earlier to achive what you need (based on var attributeId you can assign options with different text to elements you need)

Samora

Answer 4

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!

Alkalinize

Answer 5

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() ?>);
    //[email protected] 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 .

Funda

Answer 6

simplest answer:

replace js/varien/configurable.js line 172

element.options[0].innerHTML = 'Choose ' + this.config.attributes[attributeId].label;

Nonjoinder

This looks logic to me because the javascript translates anyways whatever I write in the PHP, but the only problem is that it doesn't work for me. – Corby

Answer 7

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.

Funda

Answer 8

    <script type="text/javascript">
    <?php
        $jsonConfig = $this->getJsonConfig();
        $jsonConfig = str_replace("Choose an Option...", "Select Size", $jsonConfig);
    ?>
    var spConfig = new Product.Config(<?php echo $jsonConfig; ?>);
</script>

Bieber

Answer 9

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;?>

Prismatoid