when clicking on the variation, the image becomes bugged

Hello!

Could you analyze this link in the mobile version and see why when you click on the color variation, where the image thumbnail is, it opens a giant image, as if it were not on the Mobile version?

This is the link to test on mobile:
https://www.boottrainingbrasil.com.br/produto/boot-training-masculino/

See what it looks like after clicking on the color variation:
https://imgur.com/mxkNIXi

Note: I have already cleared the cache several times.

Could you help me understand and solve this?

Just to add:

– I tested it by clicking on the size variation and then on the image variation and nothing happens.

– However, if you click only on the image variation, it gets bugged like this.

Hello,

Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site and then check the issue. I am sure your issue will be solved. Then Activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

Otherwise, if the issue still exists then keep the 3rd party plugins deactivated and share the WP admin login details of your site so I will check and give you a possible solution.

Best Regards

Dude, your solution is a bit “forced”.

This client sells 100 orders per day, I can’t even consider doing that, it’s very delicate, especially on days close to Black Friday.

Were you unable to analyze anything that could help?

Hello,

You can set up a staging platform where you can test issues, enable/disable features/plugins thus such changes will affect the main site. The below article will help you to create it:
https://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/

Best Regards

Hello!

I ran all the tests, and even with ALL THE PLUGINS DISABLED (I only activated Woocommerce + Woodmart Core + Elementor) the thumbnails for this product are still huge (I ran this test in the middle of the night).

I edited the page, adjusted the thumbnail layout from 400 to 300 and saved it here:
https://imgur.com/MY1HWJU

Then, I accessed the theme, reviewed it here and it was already at 300px, downloaded the plugin you recommended to regenerate thumbnails, left it running for over 4 hours, I don’t know if it’s finished yet…it seems like it is.
https://imgur.com/acGNYUG

https://imgur.com/hOydqOL

And still, nothing has been resolved, can you access it and help me resolve it please?

Thank you

Hello,

I have tested it on a real device, and everything works fine. https://monosnap.com/file/sGI7T6MeZNqnDD5PoZKKcu0DKzorvx

Can you please check this issue on the real devices, I’m saying this because, judging by your screenshots, it seems to be testing it on some emulator and not a real device: https://imgur.com/mxkNIXi

Best Regards.

NO FRIEND!

YOU NEED TO CLEAR ALL THE VARIATIONS.

AND LASTLY, JUST CLICK ON THE PHOTO/COLOR.

Hello,

Please let me know one thing is that you are checking the site on a real device.

Best Regards.

The problem happens anyway, real cell phone or not, I wouldn’t ask you for help with a problem that doesn’t exist.

https://www.loom.com/share/860503c885f544f0bc752edae2896573?sid=0c58e7bc-9663-4513-bbfb-a844f4f4ef48

Hello,

We have retested your site on multiple iOS and Android mobile devices, including pressing the “Clear” button mentioned in your previous response. We did not observe any similar issue, and the variations and gallery functionality appeared normal on all devices.

Here is an additional video recorded on a real device showing the gallery behavior after pressing the “Clear” button. Video link https://monosnap.com/file/5H7V9ZGJfvMMcBTndm3FtbXswojpg2. The video was recorded on an iPhone 16 Pro running iOS 18.1.1.

It is important to note that the browser plugin “Mobile Simulator – Responsive Testing Tool” is not a real simulator of the iOS WebKit mobile engine and does not reflect its actual render behavior. It only emulates the viewport of a real device (screen width and height), while the site is actually viewed in a desktop browser with a simulated frame of the selected device. It is also essential to adhere to the supported browser versions. In the case of Elementor, this includes Safari 15.5 and higher (https://elementor.com/help/requirements/). WordPress officially supports the last two versions, which are Safari 17 and Safari 18 (https://make.wordpress.org/core/handbook/best-practices/browser-support/).

Since we could not fully reproduce this issue on our end, we can offer an approximate solution for a problem where a desktop Srcset image (e.g., 1200x1200px) is displayed on a mobile device. To ensure the image takes its dimensions from the width and height attributes of mobile Srcset (300x300px), try adding the following custom code to the Mobile Custom CSS Area in the Theme Settings.

body .woocommerce-product-gallery img {
	  width: revert-layer;
}

After applying the changes, it’s also important to clear the site cache and the device cache on the device where you are viewing the site.

As an alternative solution, you can set the number of columns for mobile thumbnails in the following option (screenshot: https://monosnap.com/file/gl28oLAUIBLU6QQcbaDjnI3madKRXR). This way, the width of the thumbnails will depend on the number of columns (values “2/3/4/5/6”) rather than the width of the individual image inside (value “auto”).

Kind Regards

Hello Friend!

Unfortunately, you simulated it wrong (it doesn’t matter if it’s a real cell phone or a simulated one).

You need to do exactly this:

1- Clear the variations
2- Click ONLY on the Color (don’t select the size)
3- Only then will you see the problem.

In your simulation, you selected the color (since the size is set to Default), cleared it, and then clicked on the SIZE and COLOR, so it really seems to work.

Can you test it again as I told you?

Note: I was going to configure the Custom CSS you sent, but when I saw it, it had already been configured, and the problem persists the same:
https://imgur.com/iTlP34h

See how the selection should look to simulate the error:
https://imgur.com/IsW3Lh6

After selecting COLOR ONLY, scroll up and see the first image of the giant thumbnails.
https://imgur.com/Df58hjc

I hope you understood this time.

Thank you.

We are able to reproduce this issue both on real device and Xode simulator, but solution of this issue remain similar as described in previous reply (https://xtemos.com/forums/topic/when-clicking-on-the-variation-the-image-becomes-bugged/#post-631084).

We can see that the code has already been applied to your site, and we have tested your site again with the custom code activated. In our tests, the thumbnail gallery appears normal. We’ve added a video showing the swatches, with images swatch being selected first after clearing variations.

iPhone screen recording in incognito tab, with custom code applied, and site cache cleared: https://monosnap.com/file/iRXH2VusXUEGhvi1mV0hSM6k9qmliT
Xcode iPhone simulator in incognito tab, with custom code applied, and site cache cleared: https://monosnap.com/file/WsfkIr0cO5xJNcghgEHIpIO3SBv7IJ

As mentioned in the previous response, since you are using a caching plugin, it is crucial to completely clear the CSS cache after making changes to the custom code on your site. Our videos were recorded in an incognito tab and after clearing the cache on your site using the cache-clearing options of the plugin you are using: https://monosnap.com/file/vIgkrAFj2PPy7oZdeB373aXj4EhQqN.

Try keeping the custom code activated, completely clear the cache of your caching plugin, or temporarily disable it. Then test your site in an incognito browser tab to ensure that the site and device cache is not affecting the updated CSS files.

Kind Regards

Hello friend!

Yes, now it’s normal.

Was it just this code then?

But it wasn’t me who added it, it was you, so I figured that even with it it wouldn’t work, maybe you had added it recently and hadn’t cleared the cache.

But yes, now it’s ok.

I’ll keep the css code on mobile then.

Why did this happen?

Thank you very much.

We added this code right after your first response today to record a video showing how it works. However, when you started testing the site on your own, we decided to leave it active because we thought you might have added it simultaneously with us and, therefore, did not remove it after recording the video.

This issue is related to a combination of image srcset settings, variation galleries, and the “Thumbnails per slide on mobile” option being set to “auto” on mobile. We will further investigate whether this issue was caused by our theme, and if so, we will fix it in the next theme update.

Kind Regards

Great!

Thank you very much for your help and support.

As always, helpful and competent.

Cheers.

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts