How To Add Option Title To Product Option Select (Dropdown)

Author: Rowan Burgess

  • 13 Feb 2021
  • 20 minutes

First you need to find the two .phtml files located at the paths below:

app/code/core/Mage/Catalog/Block/Product/View/Options/Type/Select.php

and…

app/code/core/Mage/Catalog/Block/Product/View/Type/Configurable.php

Copy these files to your local code directory and edit as below.

Further reading on the Magento local code folder here

On line 58 of Select.php, you’ll find this IF statement within function ‘public function getValuesHtml()’:

if ($_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_DROP_DOWN) {
$select->setName('options['.$_option->getid().']')
->addOption('', $this->__('-- Please Select --'));
}

First, we need to get the option title:

$getOptionName = ucwords($_option->getTitle());

And replace the ‘– Please Select –‘ value with it. Here’s the final section of code:

if ($_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_DROP_DOWN) {
$getOptionName = ucwords($_option->getTitle());
$select->setName('options['.$_option->getid().']')
->addOption('', $this->__($getOptionName));
}

Now, the Configurable.php file. We simply amend the ‘chooseText’ by replacing line 256, which is:

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

with:

'chooseText' => Mage::helper('catalog')->__('Select ' . $info['label']),

Now we have the option title in the first select option of our dropdown option. All we need to do now is remove the option title, that is by default position above the dropdown.

To do this, find the two files located at the path below and copy them into your theme directory under the same path:

app/design/frontend/base/default/template/catalog/product/view/options/type/select.phtml

and

app/design/frontend/base/default/template/catalog/product/view/type/options/configurable.phtml

Simply comment out or remove everything in between the ‘dt’ tag in both files. Please note the required indicator is output within this code, it’s up to you what you do with it.

In the configurable.phtml file, you’ll also want to replace the ‘option’ tag with the below:

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

And add the below code above the select element. This will be used as a hidden reference to the select label:

<div id="Select <?php echo $_attribute->getLabel() ?>"></div>

The complete ‘dd’ tag will look like this:

<dd<?php if ($_attribute->decoratedIsLast){?> className="last"<?php }?>>
<div className="input-box">
<div id="Select<?php echo $_attribute->getLabel() ?>"></div>
<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" className="required-entry super-attribute-select">
<option><?php echo $this->__('Select ') ?>getLabel() ?></option>
</select>
</div>
</dd>

To make the hidden reference usable on configurable product pages, we need to update configurable.js, found in:

js/varien/configurable.js

Update line 171, which reads:

element.options[0] = new Option(this.config.chooseText, '');

To:

element.options[0] = new Option(jQuery(element).prev().attr('id'), '');

Update:

If you want to keep the title displayed for different types of options, such as radio or checkbox, the select.phtml file needs a little more updating. Here’s the finished complete file, it essentially checks the type of option and displays the title depending on this check:

$getOptionName = ucwords($_option->getTitle());

Let’s talk about how
I can help you