How To Add Option Title To Product Option Select (Dropdown) and Remove ‘– Please Select –‘
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.
On line 58 of Select.php, you’ll find this IF statement within function ‘public function getValuesHtml()':
Firstly, we need to get the option title:
Now, the Configurable.php file. We simply amend the ‘chooseText’ by replacing line 256, which is:
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:
js/varien/configurable.js
Update line 171, which reads:
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.
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 --'));
}
Firstly, 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){?> class="last"<?php }?>>
<div class="input-box">
<div id="Select <?php echo $_attribute->getLabel() ?>"></div>
<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
<option><?php echo $this->__('Select ') ?><?php echo $_attribute->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'), '');
Comments
Post a Comment