The complete guide to WooCommerce product galleries

The product gallery is where the buying decision happens, and most stores treat it as an afterthought. Baymard Institute — the most rigorous e-commerce UX research operation there is — tested the leading online stores and found only around 48% have product-page UX they would rate as decent or better. The product gallery is consistently where the lost revenue hides: shoppers cannot see the detail they need, the images load slowly on the phone where most of them are shopping, the variant they picked still shows the wrong photo. Each of those is a shopper who hesitates, and a hesitating shopper is a smaller cart or no cart at all.

This is the complete guide to getting the WooCommerce product gallery right — what the default actually does, the gallery template that converts, the dimensions and formats that keep product pages fast, and the variant, zoom, and mobile decisions that move revenue. It is written for someone running a shop, so the lens throughout is conversion and revenue, not aesthetics for their own sake. The deep-dives on each piece live in the rest of this cluster.

Why the gallery is the decision tool

Start with the single most important finding, because it reframes how much the gallery matters: Baymard found that exploring the product images is the first action most shoppers take on a product page — before reading the description, before checking the price in detail, before anything else. Online, the shopper cannot pick the item up, feel the fabric, or check the finish, so the images do all the work the hands would do in a physical store. The gallery is not decoration on the product page; it is the product page’s core job. A shop that invests in copywriting and ignores its product images has optimised the thing shoppers read second and neglected the thing they engage with first.

The revenue logic follows directly. If the gallery is where the decision happens, then every gallery weakness — a missing angle, an un-zoomable image, a slow load, a variant mismatch — is friction at the exact moment of decision. Reducing that friction is among the highest-leverage things a shop can do, because it acts on the highest-intent moment in the whole funnel.

What the default WooCommerce gallery actually does

WooCommerce ships with a product gallery, and it is worth knowing exactly what you are starting from. The default uses a combination of FlexSlider for the image slider, PhotoSwipe for the lightbox, and a zoom library — but, crucially, these features have to be declared as supported by your theme, and many themes either disable them or replace them with their own gallery. So “the WooCommerce gallery” is not one consistent thing; what your shoppers actually see depends heavily on your theme, and the result is often less capable than you would expect. Zoom may be off, the lightbox may be basic, mobile gestures may be missing — not because WooCommerce cannot do it, but because the theme did not turn it on.

The practical upshot: do not assume your product gallery is doing the things in this guide just because it is “the WooCommerce gallery.” Check what your theme actually delivers, because the gap between the default’s potential and what a given theme enables is where a lot of shops are quietly losing the detail-inspection and mobile-zoom experience shoppers need.

The gallery template that converts

Baymard’s research points to a specific set of shots that, together, answer the questions a shopper has before buying. Think of it as a template to fill for each product rather than “however many photos we happened to take”:

• The hero — the clean, primary product shot. This is usually your Largest Contentful Paint element, so it also has to be fast (more below).
• The angle set — the product from the other sides, so the shopper can build a mental 3D model.
• Close-ups — the material, the stitching, the finish, the texture. This is what zoom serves, and what shoppers most often abandon a product for not seeing.
• Scale — the product next to something familiar, or worn/held, so size is unambiguous. Size uncertainty is a major return driver.
• Lifestyle — the product in use, in context, which sells the aspiration as well as the object.
• Packaging — for gifts and premium items, how it arrives, which matters more than sellers assume.

One nuance worth stating, because it pushes against the instinct to add more: more images is not automatically better. Baymard’s work (and retailers’ own testing) finds that redundant angles — three near-identical front shots — add nothing and can dilute the set. The goal is coverage of the shopper’s questions, not volume. A tight set that answers every question beats a sprawling set that repeats a few. Quality and completeness, not quantity.

Dimensions and formats: the speed that protects conversion

Product images are usually the heaviest element on the page and, on most product pages, the LCP element — Baymard-adjacent research consistently finds the main product image is the LCP on the large majority of product pages, and that most product pages fail Core Web Vitals largely because of their images. Since a one-second delay measurably reduces conversions, this is not a technical nicety; it is revenue. The fix is the same as anywhere: serve images at a sensible display size (commonly 800px square for the main image, 600px for grid thumbnails) in a modern format (WebP or AVIF), and do not lazy-load the main product image. An 800px WebP at ~150KB loads roughly ten times faster than a 2,000px JPEG at 2MB, and the shopper cannot tell the difference at display size. We cover the product-page speed angle in depth alongside the wider gallery page speed guide, and the SEO side in image SEO for WooCommerce product pages.

Zoom: the detail check shoppers need

Zoom is not a luxury feature; it is how an online shopper does what they would do in a store — look closely before committing. Baymard found a quarter of sites lack sufficient image resolution and zoom, and watched test shoppers abandon products specifically because they could not see the detail. The patterns that work and the mobile gesture problem (a surprising share of mobile sites support neither pinch nor double-tap) are covered fully in product image zoom: which patterns actually convert. The headline for the pillar: make sure zoom works, on desktop and mobile, on every product — its absence is a direct, measured cause of abandonment.

Variants: show the thing they actually picked

When a shopper selects the navy variant, the gallery should show the navy product. Baymard found that more than half of sites fail to update the gallery to match the selected variation — the shopper picks navy and still sees red. That is a trust break at the decision moment, and WooCommerce’s native variations do not switch the full gallery per variant on their own, so this is a common gap. The full mechanics — swatches over dropdowns, per-variant image switching, keeping the variant images in the markup so search engines see them too — are in variable products and variant galleries done right.

Mobile: where most of the traffic and most of the gap is

Most of your store’s traffic is mobile, and historically mobile converts at a lower rate than desktop — the gap is partly where the mobile product gallery fails. Baymard found a large share of mobile sites support neither pinch nor double-tap zoom and many do not scale images correctly in landscape. Combine that with slow image loads on mobile connections and you have a product gallery that works worst exactly where most shoppers are. The mobile-specific fixes — thumb-friendly carousels, proper zoom gestures, mobile-sized images — are in mobile product galleries that don’t kill conversions.

Gallery vs lookbook: the right tool per funnel stage

A product gallery and a lookbook do different jobs. The gallery is the high-intent inspection tool on the product page; the lookbook is the discovery-and-inspiration tool earlier in the journey. Using the wrong one at the wrong stage costs sales — a lookbook where shoppers want to inspect, or a bare gallery where they want inspiration. The funnel mapping is in WooCommerce gallery vs lookbook, and the shoppable-gallery direction in lookbook to cart: shoppable galleries in 2026.

The product-gallery checklist

• The Baymard shot set: hero, angles, close-ups, scale, lifestyle, packaging — coverage, not volume.
• Main image at display size (≈800px) in WebP/AVIF, eager-loaded — it is your LCP.
• Zoom works on desktop and mobile, on every product.
• Selecting a variant switches the gallery to that variant’s images.
• Mobile: thumb-friendly, double-tap/pinch zoom, correct landscape scaling.
• The right format for the funnel stage — gallery for inspection, lookbook for discovery.

Much of this is theme-dependent or needs a better gallery than the default, which is the practical case for a product-gallery tool built for conversion rather than relying on whatever your theme enabled. FotoGrids includes a dedicated product-gallery layout in its Pro Plus tier — variant swatches that switch the images, zoom-on-hover without a separate lightbox, and quick-add CTAs — designed to replace the default WooCommerce gallery, with the free-tier performance fundamentals (responsive images, lazy-loading) underneath. The point, as everywhere in this guide, is that the gallery is the decision tool, so it deserves to be built like one.