A product gallery is not working correctly just because the images load. On mobile, the visible image, selected thumbnail and navigation controls must stay synchronized after swipes, quick flicks and variation changes. WooCommerce 11.3 beta switches the Product Gallery toward native scrolling with scroll snap, so old custom touch behavior deserves a focused retest.
This guide covers beta testing as of October 28, 2026. Use a staging product with labeled images and no live checkout side effects. Browser device emulation is useful, but it does not replace a real touch-device check.
Confirm the gallery implementation
Check that the Single Product template uses the core Product Gallery block. A theme slider or third-party gallery can look similar while using unrelated scripts. Record the template and active gallery extensions before attributing a symptom to this change.
The native-scroll implementation uses scroll snap for movement and an observer to synchronize navigation with visible slides. That makes the settled image and selected thumbnail important evidence, not merely whether a swipe event fired.
Prepare a simple product with five images labeled A through E. Add a variable product whose variations have visibly different image sets. Include one tall and one wide image so the test reveals layout shifts as well as selection errors.
Test the transitions customers actually make
- Drag slowly from A toward B. Check that the image follows the movement rather than staying fixed until release.
- Make a short flick and let it settle. Record the visible image and highlighted thumbnail.
- Tap the last thumbnail from the first image. Verify the destination after the longer movement.
- Repeat that jump, but interrupt it with a swipe. The final navigation state should describe the image actually visible.
- Change variation and clear the selection. Confirm the right image set and selected thumbnail for each state.
An interrupted long jump is a stronger synchronization test than tapping adjacent thumbnails.
Do not demand that every gesture land on the same image across devices. Momentum differs. The invariant is that the final displayed image, thumbnail and controls agree and the user can continue navigating.
Use a device and input matrix
| Environment |
Check beyond image loading |
| Touch phone |
Slow drag, flick, vertical page scroll |
| Tablet |
Orientation change and thumbnail reachability |
| Desktop pointer |
Thumbnail and arrow navigation |
| Keyboard |
Focus visibility and reachable controls |
| Reduced-motion preference |
Usability without relying on animated travel |
Check that vertical scrolling through the product page still works when a gesture begins over the gallery. A customization that prevents all touch movement can make the whole page feel stuck even if it makes one horizontal gesture easier to control.
Narrow a custom CSS or script conflict
Inspect overrides affecting overflow, scroll behavior, touch-action and the gallery's sizing. Compare with the same fixture under the unmodified template. Make one staged change at a time, retaining a copy of the original customization.
Do not paste a global touchmove preventDefault handler into the page as a fix. It can suppress expected browser navigation and mask the synchronization problem. Likewise, increasing animation duration is not evidence that the right slide is selected.
If images are missing from the variation data before interaction begins, investigate the variation-gallery migration. This swipe test assumes the expected images already exist; it does not verify importer or migration completeness.
Capture a useful failure report
Record the WooCommerce build, browser, device, template, variation and exact gesture sequence. A short redacted recording should show the final slide and thumbnail together. Note whether the issue reproduces with extensions disabled on the isolated fixture, rather than claiming a universal defect from one theme.
Approve only when navigation remains usable after interrupted gestures and variation resets. For a conflict in custom gallery CSS or JavaScript, request a focused storefront repair with the minimal fixture and recording.
Sources checked October 28, 2026. Synthetic fixtures and diagrams illustrate the proposed checks; they are not claims of customer testing.