
On request of our clients we are giving you step by step tutorial how to use HEX code instead thumbnails for Color Swatch swatches.
We will try to keep things simple by using ‘Swatch Description’ filed that already exists and is used for ‘pop-up’ box text. To set hex code for attribute options go to Catalog->SMDColorSwatch section and enter values in filed bellow ‘Browse’ button. We did same for our example attribute, notice format of code values (they are with #).
All changes will be done in template file, so open it in text editor: appdesignfrontenddefaultdefaulttemplatecolorswatchcatalogproductviewtypeoptionsconfigurable.phtml
In case that you are using custom theme, please edit template file that is in your theme, otherwise changes will not be visible.
Since we want to keep swatch thumbnails functionality for other attributes, we will make small condition in code that will define what HTML will be outputted for which attribute.
Original code in template starts from line #32 and looks like this:
<span class="swatch-title" style="width:<?php echo Mage::getStoreConfig('smdesign_colorswatch/general/swatch_image_size_width'); ?>px; height:<?php echo Mage::getStoreConfig('smdesign_colorswatch/general/swatch_image_size_height'); ?>px; line-height:<?php echo Mage::getStoreConfig('smdesign_colorswatch/general/swatch_image_size_height'); ?>px;"><?php echo $swatch->getImageBase() ? ' ' : $swatch->getStoreLabel(); ?></span>
We will replace it with code bellow (replace variable attributeID with your attribute ID):
<?php if($_attribute->getAttributeId()==attributeID): ?>
<span class="swatch-title" style="width:<?php echo Mage::getStoreConfig('smdesign_colorswatch/general/swatch_image_size_width'); ?>px; height:<?php echo Mage::getStoreConfig('smdesign_colorswatch/general/swatch_image_size_height'); ?>px; line-height:<?php echo Mage::getStoreConfig('smdesign_colorswatch/general/swatch_image_size_height'); ?>px; background-color:#<?php echo $swatch->getSwatchDescription(); ?>; text-indent:-9999px;"> <?php echo $swatch->getStoreLabel(); ?></span>
<?php else: ?>
<span class="swatch-title" style="width:<?php echo Mage::getStoreConfig('smdesign_colorswatch/general/swatch_image_size_width'); ?>px; height:<?php echo Mage::getStoreConfig('smdesign_colorswatch/general/swatch_image_size_height'); ?>px; line-height:<?php echo Mage::getStoreConfig('smdesign_colorswatch/general/swatch_image_size_height'); ?>px;"><?php echo $swatch->getImageBase() ? ' ' : $swatch->getStoreLabel(); ?></span>
<?php endif; ?>
New code removes background-image and adds CSS ‘background-color’ rule for span element. We are using entered HEX code value for ‘background-color’, also we will set ‘text-indent’ to remove swatch label text from span box.
Hope that you will find this tutorial useful in case that you need to use HEX code instead thumbnails for some attribute.