Home › Forums › WoodMart support forum › Variation Images For Swatches on Single Product Page › Reply To: Variation Images For Swatches on Single Product Page

nivs
I solved the problem 5 minutes later.
WC has this thing that after a number of variations it changes to load with AJAX. And when it loads with ajax it doesn’t load the images.
So I found the function to change the threshold of the ajax variations:
function iconic_wc_ajax_variation_threshold( $qty, $product ) {
return 50;
}
add_filter( 'woocommerce_ajax_variation_threshold', 'iconic_wc_ajax_variation_threshold', 10, 2 );
But now I have another problem. When a certain color is out of stock it shows the original image preview I set to the color. It looks bad.
Instead, it should hide this element or put an X on it or something like that.
Back to the product on Amazon.
https://www.amazon.com/Armour-Zapatillas-correr-hombre-Charged/dp/B07J2KQ34K/ref=sr_1_3?crid=21KJS5DHYV6EK&dchild=1&keywords=nike%2Bshoes%2Bmen&qid=1593368154&sprefix=nike%2Bshoes%2Caps%2C301&sr=8-3&th=1&psc=1
You can see that if a certain color is not available it shows the variation image a little differently.
In the meantime I added the CSS code:
.swatch-disabled {
display: none !important;
}