The following instructions explain how to change the product page image when an option is selected.
This works with slick slider product page carousel implementations only.
https://kenwheeler.github.io/slick/
Step 1. Configure image alt tags on your product page images.
Select the product you want to change images on. Your option set must also be associated with it.
Click the product image and give it an Alt tag.
The image alt tag must match the name of the product option you want to change the image with.
*Option names must not ave any special characters.
Step 2: Add Option Set Custom JavaScript
In the Option Set Styles Tab, add the following code to the JavaScript field.
- You will need to replace “swatch-options-622f663420aa791d820fbc4c” with the value for the option in your option set that will trigger the product image change.
See how to find input name below.
$('input[name="swatch-options-622f663420aa791d820fbc4c"]').on('change', function(e) {
var filterValue = e.target.getAttribute('data-value');
var key = "."+filterValue;
if(key){
$('.slider.slider-content').slick('slickUnfilter');
$('.slider.slider-content').slick('slickFilter', key).slick('refresh');
$('.slider.slider-thumb').slick('slickUnfilter');
$('.slider.slider-thumb').slick('slickFilter', key).slick('refresh');
$('.custom-product-slider-section
.slider.slider-thumb
.slick-slide.slick-active[data-slick-index="0"]').addClass( "active" );
}
});
How to find the input name:
Technically, this is not the input name but it is the same value that the input field will have for the name attribute.
