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!

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;

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.

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)