Variation Images For Swatches on Single Product Page

Hi,
Following comment 24642538 on Themeforest…

If you can show the variation image in grid swatches like here: https://drive.google.com/file/d/1__gzsMT5t9hLlWGeCRUWyvPYiL5yWj-o/view?usp=sharing

Why not showing the same images in the single product page instead of the colors preview like here:
https://drive.google.com/file/d/1HgR8EU78kYdLEzZAW4ox5QQ3-BJhvpX-/view?usp=sharing

The color we set in the “Color Preview” usually doesn’t fit properly to all the products with the variation RED. It would have been much nicer to just show to the image of the variation.
And, you already have the code that does it on the grid. Just take this code and allow it on the single product page.

This is the common method on most big sites. Amazon as example: https://www.amazon.com/Armour-Zapatillas-correr-hombre-Charged/dp/B07J2BS54H/ref=sr_1_3?crid=21KJS5DHYV6EK&dchild=1&keywords=nike+shoes+men&qid=1593368154&sprefix=nike+shoes%2Caps%2C301&sr=8-3

On Themeforest you commented that this option should work but it doesn’t on our site, so maybe we are doing something wrong?

Hello,

Thank you so much for purchasing our theme and contacting our support center.

Try to add the following PHP code snippet to the child theme functions.php file to fix this

function custom_wc_ajax_variation_threshold( $qty, $product ) {
	return 10;
}

add_filter( 'woocommerce_ajax_variation_threshold', 'custom_wc_ajax_variation_threshold', 10, 2 );

Regards

Didn’t change anything

Sorry, replace the code with the following one. If it will not help, please, send us your FTP access as well.

function custom_wc_ajax_variation_threshold( $qty, $product ) {
	return 200;
}

add_filter( 'woocommerce_ajax_variation_threshold', 'custom_wc_ajax_variation_threshold', 10, 2 );

Didn’t help.
Can I send FTP via email?

Send us this information using the Private content field.

Ok here it is

It seems like you didn’t configure attribute swatches correctly yet. You need to specify default image or color for each variation first via Dashboard -> Products -> Attributes -> Configure color terms https://prnt.sc/tcjaj8

But this is exactly what I don’t want to happen.
What you suggest to do is not setting a picture for each variation, but setting an image for each ATTRIBUTE. But, different products have different images for each variation.
Nike shoe in color RED looks different than Adidas shoe in the color RED.

This is why you take the image that was chosen for each VARIATION of the product when you display image swatches on GRID.

Just allow this setting on Single Product Page:
https://drive.google.com/file/d/1Ha6ibXGuWZFGjEotgnJq_Kfcy-JCH27S/view?usp=sharing

Please read again my post… I tried to explain as best as I can.

Yes, we understand what you are talking about. But you need to specify the default image for each term first. Then, they will be replaced with images from variations for products that will have such. But default images are required and will be used for products without variations images.

And if I set a color for each attribute instead of an image it won’t work?

Try to upload images first and see if it will work for you as you expected.

It shows the pictures I chose for each attribute and not the pictures of the variations

Could you please send us a link to your website where we can see this example?

Kind Regards

Here it is

We see that you have uploaded images to wrong attribute. As we understand, you want to apply this to “Color” attribute. Could you please upload the default image to color terms and check how it works?

Color attribute has 200 values so it’s too much work to test.
But I got your point and changed the swatches attribute in the main setting and it fixed the problem.

OK so it works.
But if I want to change this attribute to present image swatches I need to go value by value and change it to this setting.
Why won’t you add a setting option that automatically do it for all the values?
On production I have more than 250 values for the color attribute. It doesn’t make any sense to change it one by one.

You need to upload image for each attribute term when you create it. Sorry, but it is how it designed and there is no way to change this mechanism.

We did the change. It works for most products. But when there are many variations it doesn’t show the images of the variations.
In the shared link, we put a plain white image for all the colors and we made sure there is an image set to all the variations. Yet it is still not showing the variations image.
On the grid it shows without problems

Sorry, but we don’t understand what exactly the problem is. Variations images seem to work correctly https://gyazo.com/7a97513bdb8d5920abe2a84d5f131035

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;
}

Yes, it was the code we sent you initially.
Be sure that you have an image uploaded to this particular variation that is not working correctly.

Ohh you are right. Sorry didn’t notice that.

I made sure. It has.
I checked on other products as well.
If the specific color is out of stock it falls back to the “preview image”. Without any indication that the color is out of stock.

Another thing I noticed – the tooltip doesn’t work on mobile.
Any way to make the tooltip show up on click event so it will work on mobile as well?
People still need to see what is the name of the color they are buying.

Could you please send us a link to the product that doesn’t have image from the variation? And provide us your admin access.

The Mobile version will be improved in our next theme update.

The latest improvement is awesome.

Can you make this (variation image as a swatch in the product page) work on products where we set a different attribute for swatches?

You can do it on the bottom of the custom product setting and it will reflect on the grid but it doesn’t change the variation selection inside the product page.
So if it works for the grid it should work for the product page as well no?!

Could you please explain what do you mean? Please, provide us some screenshots for a better explanation.

[Author]

Posts