Lightbox
A full-screen viewer for product images, with zoom and pan, share, slideshow, a counter and thumbnails.
- Full-size image over a light backdrop
- Zoom, share, play and close at the top; arrows at the sides; thumbnails at the bottom
Click or tap the main image (or press Enter on it) to open the lightbox at that image. A product without images (WooCommerce's placeholder) has no lightbox.
Display
Off: clicking the main image does nothing and the zoom icon is hidden.
Shown at 92% opacity.
Or Cover (fill screen, may crop).
Set e.g. 1600 to keep very large images from filling the whole screen.
Navigation & Close
| Setting | Default |
|---|---|
| Close icon | X (or Dismiss circle, X (bold)) |
| Close button position | Top right (or Top left) |
| Show previous/next arrows | On. Keyboard and swipe navigation work without them. |
| Previous icon · Next icon | Chevron (or Thin arrow, Arrow) |
| Show image counter | On ("2 / 5") |
Arrows, counter, thumbnails and the slideshow button only appear for products with more than one image.
Thumbnails
Show thumbnail strip inside lightbox (on) and Thumbnail strip position (Below / bottom edge, or Above / top edge). Click a thumbnail to jump to it; drag the strip to scroll it.
Toolbar
The toolbar buttons sit in a row next to the close button.
Opens the device's share sheet, or copies the image link to the clipboard.
Zoom to 2× with the button or a double-click/double-tap; pinch on touch (up to 3×); drag to pan. Zoom resets when the lightbox closes.
Plays through the images, looping, until paused or closed.
Icon Styling
Icon color #ffffff and Icon button background #374151, for the close, previous/next and toolbar buttons.
Keyboard & Touch
- Enable keyboard navigation (on): ← → navigate, Esc closes, and Tab stays inside the lightbox. Off turns all three off.
- Enable swipe navigation (on): swipe on touch screens, or drag with a mouse.
- Close with the close button or Esc. Focus returns to the image you opened it from, and moving in the lightbox also moves the gallery behind it.