when clicking on the variation, the image becomes bugged

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

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 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.

Hello,

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

Best Regards.

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