Single Variation Image Preview inconsistent results

Anita Dungey

I’m just getting started with setting up swatches for all of my products, and so far I’m seeing inconsistent behavior across products, and even across variations of a single product. In my global settings (see the screenshot at the end of this post), I have Variation Image Preview turned on for the Color attribute. Here’s a quick overview of some of the behaviors I’m seeing when selecting a color (sometimes with, sometimes without a size selected):

  • The correct product image is shown
  • An incorrect product image is shown
  • Nothing happens
  • The correct thumbnail is shown, but the product preview is a different image; in this case, clicking the thumbnail may:
    • Pull up the correct product preview image
    • Pull up a different incorrect product preview image
    • Do nothing

Below are several specific examples.

 


 

One factor that seems to be consistently causing problems: listing the Size attribute (or any other attribute) before the Color attribute. For products where this is the case, selecting a color changes the product thumbnail, but not the product preview image. Editing the product and moving the Color attribute to the top does not change this behavior; only products that originally (or at least at the time when the plugin was enabled) had Color listed first are spared this behavior. Compare these products:

 


 

This product works correctly when the size is selected. When just the color is selected, however, it pulls up the correct image for the first and third colors but shows the default image for the other colors. The product thumbnail sometimes does and sometimes doesn’t match the product preview image shown.

Incorrect Behavior.gifCorrect Behavior.gif

Here are my settings for this product:

Product Settings.png

 


 

I haven’t set up swatches or changed any Swatches Settings for this product yet, and Size is listed first. This product uses the Pattern attribute rather than Color. (I’ll change it to Color when I get a chance.) With Size selected, selecting Pattern changes the product thumbnail to the correct image but does not change the product preview. For some Patterns, clicking the (correct) product thumbnail brings up a different incorrect preview image. As you can see in this screen capture, the variation image is set up correctly.

Without Swatches.gif

 


 

These are my global settings:

Global Settings.png

Shamser Suzon

Hello Anita Dungey,

Could you please come with the issues one by one? It helps us to keep track and provide you solution to each issue quickly. It would better for us if you create separate tickets for each of the issues.

Note: for any kind of screenshots, don’t upload directly here. Sometimes we cannot see it. You can use a tool like http://www.prnt.sc to share screenshots.

Thanks

Anita Dungey

In that case, for this ticket, let’s focus on this issue:

When the Color attribute is listed after any other attribute (e.g., Size), selecting a color changes the product thumbnail, but not the product preview image. Editing the product and moving the Color attribute to the top does not change this behavior; only products that originally (or at least at the time when the plugin was enabled) had Color listed first are spared this behavior. Compare these products:

Color listed before Size (correct behavior): https://www.auburndirect.com/shop/shearling-lined-martingale-collar/
Size originally listed before Color, but edited so that Color is first (incorrect behavior): https://www.auburndirect.com/shop/flower-collar/
Size listed before Color (incorrect behavior): https://www.auburndirect.com/shop/spiked-collar/

In my Single Variation Image Preview global settings (screenshot here), Variation Image Preview is turned on and the selected attribute is Color, and I have not specified different settings on the product level for any of the products listed above, so the settings should not be the problem; as far as I can tell, this is just a glitch.

Shamser Suzon

Hi Anita Dungey,

Thank you for reaching out to us. Please kindly do a plugin compatibility check by doing these steps to identify the error :

=> Deactivate all of your additional plugins except WooCommerce and WooCommerce Variation Swatches Plugin.

=> See if the problem persists. If the problem resolved, you can tell which plugin might be the culprit of this error by activating your additional plugins one by one.

Looking forward to hearing from you soon.

Thank you

Anita Dungey

Deactivating the other plugins does not resolve the issue. Below are the links to the same products that I mentioned before, now on our staging site, where the other plugins are deactivated:

Color listed before Size (correct behavior): https://www.staging1.auburndirect.com/shop/shearling-lined-martingale-collar/
Size originally listed before Color, but edited so that Color is first (incorrect behavior): https://www.staging1.auburndirect.com/shop/flower-collar/
Size listed before Color (incorrect behavior): https://www.staging1.auburndirect.com/shop/spiked-collar/

Ahmed Ehsaan

Could you check here: https://www.loom.com/share/f2c32d15a2024d34841b3d23a9e54da8

 

Thank You

Anita Dungey

Ok, so what I see in your video is that, if the different size options for a given color don’t all use the same image, the image will only change when both options have a selection. Is that right?

I’ll definitely keep an eye out for that, but unfortunately it doesn’t explain the behavior I’m seeing.

If you look at the first example of incorrect behavior that I listed, the Flower Collar, all of the pictures for the Pink size variations are the same, and all of the pictures for the Tan and Burgundy size variations are the same. So, per your video, selecting only Color should change the product image, but it doesn’t–you have to select Size as well.

Anita Dungey

This is what SiteGround support said:

Yes, I was able to recreate the issue now. However, I still see no specific errors that related to that functionality.

 

I can see that they are discussing Cross Origin errors on the StackOverflow thread and there are a couple of such errors on your site. But these are affecting your fonts only: https://prnt.sc/pdo9xj

 

This is quite common on our Staging environment – when the site goes live, the fonts will not be an issue at all. It may be worth checking if the attribute switch works as intended when the site is pushed to live as well. That way you can narrow down the causes for this. I suspect, however, that this won’t work even with the font issues gone (i.e. when you push the site to live).

The plugin issue should not be related to a cross-origin error, as it occurs on the live site as well as the staging site.

Ahmed Ehsaan

Check here: https://www.loom.com/share/e096c78a52854854ba87e8b4ef5d0589

Anita Dungey

Hi Ahmed,

I watched your video, but I don’t see anything there that looks like it would be helpful on my site. It looks like you recreated the Color attributes and then re-entered the product information. Is there something else that I’m missing?

I can’t reset my attributes or products, because they’re being automatically synced from QuickBooks Enterprise and because there are several thousand variations across 138 products in my store.

All of the Color attributes are already set up correctly in my global attribute list.

UPDATE: After a bit more testing, I think I might have found the problem: The variation photos all need to be in the product photo gallery as well.

I’ll have to keep testing and see if this holds true for other products.