Variation Dropdown Options not changing images when clicked

Hi @shahzeb104

I appreciate your patience and effort in detailing the issue you’re experiencing.

Based on your explanation and video, it seems that there may be a delay in the Ajax call that updates the variation image. This delay could be due to various factors, including server response time, internet connection, or even a conflict with your theme or another plugin.

Since you have already tried disabling all other plugins, switched themes, cleared cache, and ensured that WooCommerce and WordPress are up to date, we can rule out many common causes of this issue.

To further investigate, 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 cache and check using different browser again. If this makes no difference, please share a copy of the following:

• System Status Report: Navigate to WooCommerce → Status. Select Get System Report and then Download for Support.
• Fatal Error log: Share a copy of any fatal error log found under WooCommerce → Status → Logs.

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 hearing from you!

Headed over to WooCommerce → Status → Tools, and did 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

Cleared browser cache and checked on different browsers (chrome, firefox, edge), issue is still there.

Here’s the Mozilla Pastebin link to System Status Report and Fatal Error Log.

Hello shahzeb104,

Thank you for your reply.

I reviewed your site’s SSR and everything is looking fine.
This is a strange error, I cannot replicate the same behavior on my test site even though I am using the same settings as your site.

For further troubleshooting, could you switch to the Storefront theme and check if the issue persists?
Looking forward to your response. ??

Best regards.

Switched to Storefront theme. Issue is still there. Deactivated all the plugins except WooCommerce. Issue persists.

Hello shahzeb104,

Thank you for your reply.

I checked your site again and looks like you have switched back to the original theme.
For better troubleshooting could you switch to the Storefront theme and disable all other plugins except WooCommerce?

If this is not feasible for the live site, I suggest creating a staging site.
You may use the WP Staging plugin or contact your host to create one.

The problem appears to be with the Ajax call initiated after we click on the variation thumbnails.
It seems to work fine after several clicks.

Looking forward to your response. ??

Best regards.

I’ve set up the staging environment. Issue persists. Theme being used on staging is Storefront. All plugins are deactivated except WooCommerce.

Here’s the link: https://melmun.com/melmunstaging/product/coffee-time-mug/

Hey, @shahzeb104!

Thanks for the staging site, I was able to see the issue on it.

I was also able to replicate this issue on my test site if I add the variation images to the gallery.

Can you please try removing the variation images of the gallery and check if the issue persists?

I have also reported this on GitHub, if you want, you can check the report for updates on this here.

Looking forward to your reply.

Have a wonderful day!

Hi,

Thank you for reporting the issue. I need to have both the variation images in product gallery as well. The customer may not click the variations to see the variation images. That’s why it’s important for me to show the variation images in gallery as well. Do you have any information about when this issue will be resolved? I think it’s a major bug that needs to be resolved ASAP.

Now coming to the solution you provided, following that I found a new bug. First I’ll explain you a bit about my variations so that it will be easier for you to understand. I sell mugs. They are of two variations 11oz and 15oz. The 15oz mug is taller than 11oz mug.

I removed the 15oz variation image from product gallery. I need to set the main product image. For the main image I’ve used the 11oz variation image. The main product image is by default shown as the first image in product gallery. Now I select 15oz variation. The correct image is shown. I select any other image from gallery except the first one. Correct image is shown. Now when I select the first image in gallery (which is the 11oz variation image), I’m shown the 15oz variation image. The reason is I selected the 15oz variation earlier. I should have been shown the 11oz variation image. I wasn’t facing this issue before. This issue came only when I removed the 15oz variation image from gallery. Here’s the video for better understanding: https://app.screencast.com/NmKQS4kCGYaFs

Now I was like DAMN! I got stuck in a new issue. What to do now. So I thought of replacing the main product image with a new image, an image that is not any of the variation images. To my surprise, this did not resolve the issue. I found out that clicking on the first gallery image (which is basically the main product image), I’m always shown the image of variation that’s already selected. It doesn’t matter what the main product image (first gallery image) is. I’ve used a totally different image as the main product image, still I’m shown the variation images that I set in Variable Product -> Variations. Here’s the video for better understanding: https://app.screencast.com/jzjBUeaEBhkiP

I’m honestly shocked to see how these major issues have not been resolved considering WooCommerce is used by millions of online stores worldwide. I’ve tried my best to explain the issue, providing you with videos as well.

Hello shahzeb104,

Thank you for your reply.

From what you’ve described, it seems like this behavior is related to the way WooCommerce handles AJAX calls for variation images. This appears to be related to the issue you reported earlier.

This issue has already been reported on GitHub, and our development team is aware of it. They’re working on finding a resolution, but I don’t have a specific timeline for when it will be fixed. I would recommend following the GitHub thread for updates.

I appreciate your patience as we work through this.

Best regards.

Thank you.

Hi.

Wanted to know if the dev team has worked on this issue. Checked the GitHub thread, doesn’t seem like there has been any progress. Has been more than 2 weeks.

Hi @shahzeb104,

Wanted to know if the dev team has worked on this issue. Checked the GitHub thread, doesn’t seem like there has been any progress. Has been more than 2 weeks.

I was able to check the issue and a PR was made here, but it seems this resulted in a bug which has led to a delay in the fix. However, our dev team is working hard to solve this issue.

Thank you for your patience and understanding.

Okay. Looking forward to the issue getting resolved soon.

Hi @shahzeb104,

Okay. Looking forward to the issue getting resolved soon.

We may not have an exact date when this issue will be fixed, but shall keep you updated on this post should there be any changes.

Thank you for your patience and understanding.

Hello.

Any update on this? It has been almost 2 months since I reported this issue. Just checked the status at github thread, doesn’t seem like the dev team has started working on this issue.

Can you please ask the dev team again? This is a major issue.