Clickable WooCommerce Variation Thumbnails

21 March 2017 #Code

Just wrote this code which totally worked beyond my imagination before realising I no longer needed to use Variations on this particular WooCommerce site. So, might as well share it.

Insert this into your-theme/woocommerce/single-product/product-image.php

This will¬†output each variation’s thumbnail and name. With some jQuery to update the variation drop-down to match the thumbnail you click.

Now you’ll need to change some of the variables in there.¬†Change select[name="attribute_colour"] to match the variation drop-down you’re targeting.

I probably could’ve improved this to popular the drop-down name automatically…

View on PasteBin

Latest blog posts

Photo by Chang Duong on Unsplash Guide: Tune your WordPress website and TripAdvisor to your advantage
Adventure Junky Visit Design Podcast, Episode 3
Visit Design Podcast Visit Design Podcast, Episodes 1 and 2