Magento’s custom options feature is very handy for creating products that can be customized by shoppers. Unfortunately, the display options are not comprehensive. While you can enter custom option titles and and options, Magento does not have functionality for custom option descriptions out of the box.
Fortunately, this shortcoming can be overcome with an extension and some minor code edits. Follow the steps below to get it up and running:
1) Install the Custom Option Description extension via Magento Connect (while it only list compatibility with 1.7, we have this working on a store running Magento 1.8.1. This adds a new field on the Edit Product > Custom Options page in the Magento admin panel that lets you specify a description for a custom option that is separate from the option’s title.
2) Next, update your template files to display the info that is entered in the new field on the Custom Options page. The below example is based on the /app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/catalog/product/view/options/type/text.phtml
template file and will add descriptions to all custom options that are set to the text value. If this file does not exist, copy it over from /app/design/frontend/base/default/template/catalog/product/view/options/type/text.phtml
IMPORTANT: If you need to add custom option descriptions to custom options that are set to check boxes or radio buttons, you will need to copy and edit select.phtml
instead of test.phtml
, or whatever the appropriate .phtml
file is to successful display the description on the product page.
3) Open text.phtml
and add the below code snippet at line 29:
<?php if ($_option->getDescription()): ?> <span style="margin-left:20px"> <?php echo $this->htmlEscape($_option->getDescription()) ?> </span> <?php endif ?>
With the surrounding code it should look like the below:
<dt><label<?php if ($_option->getIsRequire()) echo ' class="required"' ?>><?php if ($_option->getIsRequire()) echo '<em>*</em>' ?><?php echo $this->htmlEscape($_option->getTitle()) ?></label> <?php if ($_option->getDescription()): ?> <span style="margin-left:20px"> <?php echo $this->htmlEscape($_option->getDescription()) ?> </span> <?php endif ?> <?php echo $this->getFormatedPrice() ?></dt>
That’s all. Enter a description for a custom option in the Mageno admin and check the product page to see it displaying.