WooCommerce Variation Swatch Click Handler

A customer approached me and asked if there was a way to allow the plugin Variation Swatches and Photos to only use ONE image within the product settings, rather than the plugin standard of TWO images per variation per product.

I remember some time ago, I had done a similar task, to which the name of the variation would show up. (this is now standard in Swatches and Photos plugin) I took a quick look at it and decided that the same approach could be applied to this new project, and I accepted the task.

It turned out to be a quick plugin development. However, the older method would no longer work as WooCommerce itself updated the way it handles the variations when caching them to the page HTML. Because of this new methodology, I had to put my jQuery thinking cap on and go to work.

Before clicking, this is what you would typically see:

And now, the ability to click on one of the smaller swatches, allows for the main product image to be adjusted as well:

Hope you enjoy the ability to save yourself some time and effort!

You can grab this FREE plugin here