WooCommerce Variation Thumbnails in Slider

The code in this download folder displays WooCommerce variation images in a slider below the main product image. The code includes functions which :

• Make each variation image clickable
• Change the value for the variation attribute option in the drop down menu when clicked
• Work with any variation attribute name
• Enable you to display your variation thumbnails in a carousel slideshow

Demo Video

The demo video shows variation images added to the single product gallery thumbnails which are individually clickable so they change the value for the variation option in the attribute drop down field, in this case for the size and color attributes.

Code Installation

There’s 3 simple steps :

1. Upload the woocommerce folder and slider.js file to your child theme folder.
2. Copy and paste the PHP code from the functions file to your child themes functions file.
3. Optional : Copy and paste the CSS from the style.css file to the end of your child themes stylesheet and clear caching.