Tutorial: Color Swatches

If you’ve ever wanted to have color swatches with your theme, here’s a guide and some sample code to turn this feature on. This method allows you to set HTML color codes and/or set color swatches for each color. Then it looks for any variation called “Color” and turns it into a clickable color swatch list. If you set ikeys, the main image will change also!

Step 1: Set Your Colors

If you want to use thumbnails, you should build your image files as swatch-color-name.jpg and the image should be placed in your theme’s images folder. If you want to use HTML color codes, set them up like this in your theme’s functions.php file:

global $custom_colors;
$custom_colors = array(
	"dark-green" => "#395D01",
	"red" => "#7A0000",
	"green" => "#427A00",
	"blue" => "#1A007A",
	"black" => "#000000",
);

You can use HTML colors and themes at the same time, but if a thumbnail is found, it will take precedence.

Step 2: Set Your Style

You need a little bit of custom CSS to make your list look good. This is what I recommend:

#colors {
	margin: 14px 0;
	clear: both;
}
#colors li {
	float: left;
	margin: 0 7px 11px 0;
}
#colors li a {
	width: 42px;
	height: 42px;
	display: block;
	text-indent: -99999px;
	border: 2px solid #BBBBBB;
}
#colors li a:hover {
	border-color: #000;
}
#colors li a.selected-swatch {
	border-color: #000;
}

Adjust as you like.

Step 3: Add To Your Template

Open up your foxyshop-single-product.php file and put the following code in the section where you want the color swatches to appear (probably right before the variations):

//Custom Color Swatches
global $custom_colors;
$swatch_image_path = "/images/swatch-";
$swatch_ext = ".jpg";
$swatch_backup = "#fff";
foreach ($product['variations'] as $key=>$val) {
	if ($val['name'] == "Color") {
		echo '<ul id="colors">';
		$colors = preg_split("/(\r\n|\n)/", $val['value']);
		$swatch_count = 0;
		foreach ($colors as $color) {
			if (!$color) continue;
			$color = str_replace("*", "", $color);
			if (strpos($color,"{") !== false) $color = substr($color,0,strpos($color,"{"));
			$color_style = $swatch_backup;
			if (isset($custom_colors[sanitize_title($color)])) $color_style = $custom_colors[sanitize_title($color)];
			if (file_exists(get_stylesheet_directory() . $swatch_image_path . sanitize_title($color) . $swatch_ext)) $color_style = "url('" . get_bloginfo("stylesheet_directory") . $swatch_image_path . sanitize_title($color) . $swatch_ext . "')";
			echo '<li><a href="#" rel="' . $swatch_count . '" style="background: ' . $color_style . ';" title="' . esc_attr($color) . '">' . $color . '</a></li>';
			$swatch_count++;
		}
	echo '</ul>';
	}
}

Step 4: Add Javascript

This Javascript controls what happens once the swatch is clicked. It should go at the bottom of your foxyshop-single-product.php right before the get_footer(); function.

<script type="text/javascript">
jQuery(document).ready(function($){
	<?php if (isset($_GET['color'])) : ?>
	$("select.variation-color").prop('selectedIndex', <?php echo (int)$_GET['color']; ?>).trigger("change");
	<?php endif; ?>

	$("#colors li a").click(function() {
		var rel = $(this).attr("rel");
		$("#colors a.selected-swatch").removeClass("selected-swatch");
		$(this).addClass("selected-swatch");
		$("select.variation-color").prop('selectedIndex', rel).trigger("change");
		return false;
	});

	$("select.variation-color").change(function() {
		$("#colors a.selected-swatch").removeClass("selected-swatch");
		$(this).addClass("selected-swatch");
		currentindex = $("select.variation-color")[0].selectedIndex + 1;
		$("#colors li:nth-child(" + currentindex + ") a").addClass("selected-swatch");
		return false;
	});
});
</script>

With a little bit of adjustment, your swatches can be placed on the category page as well. You may even want to link them to the product with a querystring of “color=2” which will load the second color when the product page is loaded.