An interactive, drag-to-spin 360° product viewer — the kind of interaction shoppers expect from higher-end e-commerce listings, where dragging left or right rotates the product in place rather than showing a fixed set of static photos. This meaningfully increases a shopper’s confidence before buying, since it lets them inspect a product from genuinely every angle rather than trusting a handful of pre-selected photo angles the merchant chose to show.
Choosing where the spin frames come from
The Spin Frames From control is the central setup decision, offering four distinct sources. Product 360° Field (the recommended option) reads from a dedicated per-product field specifically for spin-sequence photos — keeping the rotation images cleanly separate from the regular product photo gallery, so uploading a 360° sequence doesn’t clutter or get mixed up with a product’s normal gallery images. Manual Upload lets you attach a spin sequence directly to the widget instance itself, useful for a one-off product or testing before committing to the dedicated field workflow. WooCommerce Product Gallery repurposes the product’s existing gallery images as spin frames — a pragmatic fallback when a genuine 360° photo shoot hasn’t happened yet but the regular gallery has enough images to approximate rotation. Built-in Demo Spin is exactly what it sounds like: a bundled placeholder sequence useful purely for previewing how the widget behaves while you’re still setting up real product photography.
Interaction tuning
Drag sensitivity and momentum controls shape how the rotation feels under a visitor’s cursor or finger — higher sensitivity means less physical drag distance is needed to spin further, while momentum determines whether the rotation continues briefly after the drag ends (a flick-to-spin feel) or stops immediately the moment contact ends. Mouse wheel support lets desktop visitors rotate using their scroll wheel as an alternative to click-and-drag, and an autoplay option can set the product spinning on its own, useful as an attention-grabbing default state before a visitor has interacted with it at all.
Interface chrome
Several toggleable UI elements help visitors discover and understand the interaction: a hint badge (a small visual cue signaling "drag to rotate" before a first-time visitor might otherwise not realize the image is interactive), control-bar buttons for explicit play/pause or directional controls, a progress bar and frame counter showing exactly how far through the rotation the visitor currently is.
Use it for
Any product where shoppers genuinely benefit from inspecting multiple angles before buying — footwear, furniture, electronics, jewelry, and generally any product where surface detail, shape, or fit matters more than a flat product page photo can convey.
Practical tips
- Always set Spin Frames From to the dedicated 360° field once real spin photography exists — reusing the regular gallery is a reasonable stopgap but produces a noticeably choppier rotation than a genuine, evenly-spaced spin sequence.
- Keep the hint badge on for first-time visitors — a 360° viewer that looks like a static image with no visible cue to interact with it is easy to miss entirely.
- See the Single-Product Widgets doc for how this fits alongside the Product Gallery and other single-product template pieces.