I had the need to display a nice box for each product option variant when there was no variant image icon and thought I would share the love.
Here is a preview of what it looks like on our site:
[attachment=5568:variant_option_boxes.jpg]
So you want this mod? Follow the directions below.
in customer/views/product/components/product_options.tpl
(This will allow boxes of option variants to show up when an option variant image does not exist.)
-------------------------------------------------------------------------------------
ADD:
<br />
{elseif $details_page}<br />
{if $var.variant_id == $selected_variant}{assign var="_class" value="product-variant-text-selected"}{else}{assign var="_class" value="product-variant-text-unselected"}{/if}<br />
<span class="hand {$_class} object-image" obj_id="variant_image_{$obj_prefix}{$id}_{$po.option_id}_{$var.variant_id}" onclick="fn_set_option_value('{$obj_prefix}{$id}', '{$po.option_id}', '{$var.variant_id}'); void(0);">{$var.variant_name}</span>
```<br />
<br />
[b]AFTER:[/b]<br />
```php
<br />
<br />
{if $var.image_pair.image_id}<br />
{if $var.variant_id == $selected_variant}{assign var="_class" value="product-variant-image-selected"}{else}{assign var="_class" value="product-variant-image-unselected"}{/if}<br />
{include file="common_templates/image.tpl" class="hand $_class object-image" show_thumbnail="Y" images=$var.image_pair object_type="product_option" image_width="50" image_height="50" obj_id="variant_image_`$obj_prefix``$id`_`$po.option_id`_`$var.variant_id`" image_onclick="fn_set_option_value('`$obj_prefix``$id`', '`$po.option_id`', '`$var.variant_id`'); void(0);"}<br />
```<br />
<br />
<br />
[b]Add the following CSS to your stylesheet:[/b]<br />
<br />
```php
<br />
.product-variant-text-unselected,.product-variant-text-selected {<br />
font-size: 12px;<br />
height:30px;<br />
width:50px;<br />
overflow:hidden;<br />
word-wrap:break-word;<br />
text-align:center;<br />
line-height: 30px;<br />
max-height: 30px;<br />
}<br />
<br />
.product-variant-image-selected,.product-variant-text-selected<br />
{<br />
border: dashed black 1px;<br />
}
```<p><a href="127.0.0.1/uploads/monthly_08_2012/post-17780-0-83924000-1343935709.jpg">variant_option_boxes.jpg</a></p>