Display product variations by specific attribute term

I have many variable products that all have a color attribute. I would like to create a custom page template that will display all variations by a specific term.

For example, say I have the following products:

Base Product #1 – Featured image is product in black color
Variation – product in black
Variation – product in red
Variation – product in green

Base Product #2 – Featured image is product in pink color
Variation – product in black
Variation – product in red
Variation – product in green
Variation – product in yellow
Variation – product in pink

I’ve created a custom page template that successfully lists the colors my products are available in. Its output is:

Black
Red
Green
Yellow

The link for these colors is /colors/black, /colors/red, etc.

When I click on one of these links I get a results page that correctly lists the products that are available in the clicked color, but the image that is displayed is that of the base product’s Featured Image. So if I click on Red, the results page displays the black and pink images which just isn’t right.

What I want is for the results page to display the images relating to the color that was clicked. So clicking on Red will display the product variations that have an attribute configured with a Red term. In this way all of the images on the results page will show red colored variations instead of random colors.

Can anyone tell me, is it possible to do this by using a different URL format? I mean, instead of /colors/red possible something else will pull up the variation images in red?

If it isn’t possible to do this by the link, then can anyone point me in the right direction on how to code a custom page template that will do this? I’m thinking it shouldn’t be too many lines of code, but I just don’t know where to start on it. I’ve searched everywhere for a hint on this.

Thanks!

http://wordpress.org/extend/plugins/woocommerce/