First off let me thank you for this feature and the work you’ve been putting in. There have been improvements in the last months that i like very much, like loading all the product images in the gallery instead of just three.
Nonetheless i’d like to request the optimization of the mobile handling of the product gallery.
1) Vertical swiping motion is not possible on mobile in the area of the gallery image. That is very restrictive since it takes up a lot of space of the screen. Important is the distinction between swiping motion and a touch motion for like zooming on on the gallery.
2) Optimizing behaviour with pictures that are not square.
It seems that in the case of rectangular pictures it doesn’t put the next-previous buttons inside the picture. The rectangular gallery image doesn’t use the width of the rest of the content even though the option: inner blocks use the width of the content is activated.
3) Next-previous button styling
4) Gallery with the possibility of a carousel effect. On the last picture of the gallery – if you swipe in the same direction, it skips back to the first picture.
There is a thread online that might share some light on some of this things:
https://wordpress.org/support/topic/product-gallery-beta-mobile-handling/
Thank You &
Best regards.
Open
Last updated: May 10, 2025
Log in to comment on this feature request.
Hello @sunyatasattva and thank you for responding.
1. Vertical swiping is not about navigating the gallery images but the site. The image area doesn’t allow swiping the site up and down on mobile to navigate to the product description/payment buttons etc.
The issue was described and reported to github by a colleague of yours and someone worked on a solution which should be integrated in the next update i believe.
https://github.com/woocommerce/woocommerce/issues/58288
2. This seems to be a smartphone or rather screen size issue after fruther investigation. On desktop and on tablet it works – the arrows are inside the image. On the smartphone the arrows are only inside the image once i turn the display to landscape orientation. Otherwise they are not even visible. Styling with margin doesn’t change that.
3. I was aware of the color and background option aswell on the margin settings. I haven’t found the option to make them circles for example or more important to change the size.
4. Thank You &
Best regards.
Hello @bkhohesc and thank you for the suggestions. Thank you for trying the new Product Gallery: we are continuously improving the block and cherish such feedback. To some of your points:
1. Could you elaborate what do you mean with “vertical swiping”? Currently, users can browse the images by swiping horizontally (which matches with the current default direction of the arrows and of the animation). What you are asking is that users should be also able to swipe up and down to browse instead than left and right?
2. This is currently the intended behavior and requires some explanation of how the block model works: the arrows are, by default, siblings of the Product Image and as such they have no awareness of the boundaries of the image itself. The Product Image does accept inner blocks, but we have disabled this behavior for the gallery as it would produce unintuitive results for users. However, if you have pictures with different aspect ratios, you can click on the arrows block and adjust the “Margin” property inside the Inspector Controls (the right-side panel). Let me know if that addresses your issue.
3. What kind of styling would you like to have? Currently, you can adjust many parts of the style of the arrows, such as the color, the background, make them circles, and so on. What kind of adjustments would you like to have more precisely? Were you aware of these controls?
4. Thanks for this suggestion: adding a “cycle“ option could be a good feature!