Variable Product Image Switch Delay in WooCommerce

Hi there @stan178,

Thank you for reaching out.

I understand that you’re experiencing an issue with the variable product images not switching instantly when a different variable product is selected.

Looking at the shared video, it is possible the issue is theme related. However, to isolate this, I would recommend you to switch to a default WordPress theme (like Twenty Twenty-Four or Storefront) and see if the problem persists. If the issue is resolved, it’s likely a theme-specific problem.

You can test this out on a staging site to avoid messing your live store. Here are the steps to creating a staging site.

Let us know how it goes.

Thank you for your response.

The image switch issue for variable products occurs with my other themes as well. While browsing forums, I found that many suggest testing with the Storefront theme. Therefore, in the video, I specifically created a test site using Storefront and did not enable any plugins other than WooCommerce.

• This reply was modified 7 months, 1 week ago by stan178.

Hi @stan178

If the issue persists across different themes including the Storefront theme, then it’s likely not a theme-specific problem. It might be a JavaScript or cache issue or a problem with the image sizes.

First, try regenerating your thumbnails using a plugin like Regenerate Thumbnails or from WooCommerce > Status > Tools > Regenerate shop thumbnails. If the issue persists, check your browser console for any JavaScript errors when you switch the variable product. If there are any errors, they might give us a clue as to what’s causing the delay.

Additionally, head over to WooCommerce → Status → Tools, and do the following:

• WooCommerce transients – Clear
• Expired transients – Clear
• Clear template cache – Clear
• Capabilities – Reset Capabilities
• Clear customer sessions -Clear
• Product lookup tables – Regenerate
• Regenerate the product attributes lookup table – Regenerate

Next, please clear your browser and site cache and then check again.

If none of the above solutions work, it would be helpful if you could provide us with a System Status Report. You can get it by navigating to WooCommerce > Status > Get System Report.

You could copy and paste your reply or share it via Mozilla Community Pastebin and share the link here. Feel free to redact all the private information before sending it over.

Looking forward to your response.

Thank you

I have already tried regenerating thumbnails and clearing the cache, but the issue still persists. My System Report is available on Mozilla’s code snippets:

Mozilla Community Pastebin/eVENOOsa (JavaScript)

• This reply was modified 7 months ago by stan178.

Hello @stan178,

Thanks for the update.

Could you possibly share your site’s?System Status Report?with us again? Unfortunately, the current link has expired. Please set the expiry to one week now.

Thanks!

Sorry

New links: Mozilla Community Pastebin/uVb2fmKJ (Plain Text)

Hello stan178,

Thank you for your reply.

I checked the site and experienced the same issue.
It is a bit random on my end, sometimes it works fine and sometimes there is a delay.

The SSR you shared is completely fine.
I do not see any issue with it.

As the next step, I would like to replicate this issue on my test site.
Could you edit this product and share a screenshot of the page?

I want to see how this product is configured, especially the variable images.
Then I will try to recreate the issue on my test site.

Looking forward to your response. ??

Best regards.

Sure,

Hello stan178,

Thank you for your reply.

I noticed that you have reused Vairation’s main image in the Product Gallery.
They are Green, Pink and Red.

I suggest you remove Green, Pink, and Red images from the Product Gallery and check if the issue persists.

You will notice that the main variation image appears as the first image in the small square images.
Then if you choose a different variation, a different image will appear in the first place.

Let me know how it goes. ??

Best regards.

Thank you

Switching variable products works this way, but my original product display method had no issues before. This problem has only recently appeared, so I thought it was a bug.

Hi @stan178,

Based on the findings shared by my colleague @doublezed2 above, this is not a bug. However, if you are not satisfied with the findings, feel free to submit an issue via GitHub — by clicking on the green New issue button up-top, in the page linked here. https://github.com/woocommerce/woocommerce/issues.

Thank you for your patience and understanding.

Hi @stan178

We’ve not heard back from you in a while, so I’m marking this thread as resolved. Hopefully, you were able to find a solution to your problem!

If you have further questions, please feel free to open a new topic.

Thanks!