Configuration

Lookbook has two layers of settings: each lookbook carries its own image and hotspots, and a global screen sets presentation defaults that apply to every lookbook.

Per-lookbook settings (Lookbooks editor)

Each lookbook is its own entry under the Lookbooks menu.

Image

Set the lookbook’s image with the standard Featured image box. This is the scene shoppers will shop. The image reserves its space on the page, so there is no layout shift while it loads.

Hotspots

Add one hotspot per product you want to pin:

X — horizontal position as a percentage from the left edge (0–100).
Y — vertical position as a percentage from the top edge (0–100).
Product ID — the WooCommerce product this hotspot links to.

The editor shows a live preview of the image so you can line each marker up with the product in the photo. Add as many hotspots as the scene needs.

Global presentation (WooCommerce → Lookbook)

These defaults apply across all lookbooks:

Show price — toggle the live price inside the product card popover.
Show add-to-cart — toggle the add-to-cart link in the popover, and customise its label.
Marker style — choose how hotspots render:
- Pulsing dot — a soft animated dot.
- Plus sign — a plus marker.
- Numbered — sequential numbers, handy for guided looks.

The pulsing animation respects prefers-reduced-motion.

Live product data

Lookbook reads product data live from WooCommerce, so the price and stock shown in the popover are always current — there is nothing to re-sync when prices change.

Graceful handling

Lookbook is built to never render broken output:

A lookbook with no image renders cleanly.
A lookbook with no hotspots renders the image without markers.
A hotspot pointing at a deleted or unpublished product is simply skipped — no marker is drawn for a product that is gone.

Performance

The stylesheet and script load only on pages that actually render a lookbook, the script is deferred, no jQuery is used, and the image reserves its space — so there is no Cumulative Layout Shift.