Magento: Display Configurable Product Image to Match Filter Selection

Question

Example: I have a configurable product, it has 2 colour options - green yellow and white blue. It is located in t-shirts category.

When I navigate to t-shirts category on my website I see my products thumbnail, which is an image I have manually selected as thumbnail when I created the configurable product (green yellow as this is more popular colour).

Now I select colour white blue in the magento layered filter on left hand side of the screen and as you would suspect only products containing white blue should remain, my product has a white blue option (one of the configurable product variations), but thumbnail hasn't changed, its still what I have manually selected previously. I would like the image that I have attached to white blue option of this product to be displayed. Anyone know, how to get this thumbnail to change according to filter selection?

Image uploaded

Answer 1

I have found a solution to my problem and I thought I will share it just in case if someone else runs into the same problem.

What I had to do to get it working was go to System>Catalog>Configurable Swatches>General Settings and make sure that attribute by which you want to filter is selected in the "Product Attribute to Use for Swatches in Product Listing" section. That's it, my product images change every time I apply different colour filter providing that this configurable product have that colour option.