WooCommerce – Display Variations by Term

We are using WooCommerce for our shopping cart and we have added all of our products. Most all of our products are variable products with many variations. One of the most predominant attributes of our variations are colors.

<table id="colors">
<tr><td>Color Code</td><td>Name</td><td>Count</td></tr>
<?php
    $terms = get_terms('pa_colors');
    foreach ( $terms as $term ) {
      echo '<tr>';
      echo '<td>' . $term->slug . "</td>";
      echo '<td><a href=' . $term->slug . '>' . $term->name . '</a></td>';
      echo '<td>' . $term->count . "</td>";
      echo '</tr>';
   }
?>
</table>

The above code creates a list of colors that the products are available in and this works fine. Each link is formatted like this:

/colors/003

Clicking on of the colors loads the usual theme page that displays all products that are available in the clicked color.

So far, so good, but the product images that display are of the Featured Image assigned to the base product. These Featured Images are random colors which just don’t look right. I mean, when we click on Red in our color list the results page is showing images of our products in purple, yellow, black, green, etc.

I do understand why this is happening, of course. The images are NOT of the variation that matches our color search. Instead they are of the base product’s Featured Image.

My question is, with respect to WooCommerce can anyone give me a hint on what needs to be done to have the results page display the image of the variation that matches the color being searched?

Is this a matter of revising the link being created, or is this a matter of creating a custom template to display the image of matching product variations?

Also, do you know of any resources (plugins, example templates, how-tos) that you can refer me to that will help me understand how to do this?

Thank you!