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:
{elseif $details_page}
{if $var.variant_id == $selected_variant}{assign var="_class" value="product-variant-text-selected"}{else}{assign var="_class" value="product-variant-text-unselected"}{/if}
{$var.variant_name}
AFTER:
{if $var.image_pair.image_id}
{if $var.variant_id == $selected_variant}{assign var="_class" value="product-variant-image-selected"}{else}{assign var="_class" value="product-variant-image-unselected"}{/if}
{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);"}
Add the following CSS to your stylesheet:
.product-variant-text-unselected,.product-variant-text-selected {
font-size: 12px;
height:30px;
width:50px;
overflow:hidden;
word-wrap:break-word;
text-align:center;
line-height: 30px;
max-height: 30px;
}
.product-variant-image-selected,.product-variant-text-selected
{
border: dashed black 1px;
}