Mobile Product Gallery Issue with Variable Products after WooCommerce Update
Hello Betheme Support,
I am experiencing a problem with the product gallery on mobile devices, but only for variable WooCommerce products.
Description
When the product page loads, the main product image is displayed correctly for about one second. Immediately afterwards, the gallery is reinitialized and the image becomes much larger than the viewport, so that part of the product is cut off.
This issue only affects variable products. Simple products are displayed correctly.
Technical observations
- The problem occurs only on mobile devices.
- The image is initially displayed correctly and then changes automatically.
- It looks like the WooCommerce/Flexslider gallery is recalculating the width incorrectly after JavaScript initialization.
- In the browser console:
.flex-viewportwidth is approximately 653px..woocommerce-product-gallery__wrapperwidth becomes approximately 9142px (7 gallery images).
This causes the first image to overflow and display at the wrong size.
Environment
- Latest Betheme version
- Latest WooCommerce version (10.2.x)
- WordPress latest version
- The issue appeared recently and seems related to the gallery initialization on variable products.
Could you please check whether this is a known compatibility issue between Betheme and the latest WooCommerce product gallery, and if there is a recommended fix?
Thank you very much for your support.
Best regards,
Roland Locher
klangei-shop.ch
Comments
Hello,
Please, turn off all of the plugins, refresh your cache, and check if the problem persists.
Moreover, if you use a child theme, switch to the parent, and recheck it.
Thanks
Hello,
Thank you for your reply.
Unfortunately, disabling all plugins is not a realistic option on our live production shop.
However, I have investigated the issue further and found the following:
Using the browser console, I found that:
.flex-viewportwidth is approximately 653px.woocommerce-product-gallery__wrapperwidth becomes approximately 9142px (7 gallery images)It appears that the gallery wrapper keeps the combined width of all images instead of resizing correctly after initialization.
Could you please check if this is a known issue with the Betheme WooCommerce gallery or Flexslider integration?
Is there a specific Betheme option or JavaScript that controls this behavior?
Thank you for your assistance.
You can create a copy of your website on a staging domain with the Duplicator plugin to test it.
https://support.muffingroup.com/how-to/how-to-set-up-betheme-staging-site/
https://wordpress.org/plugins/duplicator/
No one else reported such an issue recently, and we are not able to reproduce it in our environment, so there is no known issue with Betheme and Woo.
Best regards