FAQ

Does Lookbook require WooCommerce?

Yes. Lookbook only boots when WooCommerce is active, without it the plugin stays dormant and shows an admin notice. Every hotspot links to a WooCommerce product, and prices and stock are read from WooCommerce at render time.

How do I find a lookbook’s ID?

Edit the lookbook under the Lookbooks menu; the ID is the post=123 value in the browser URL. Use it in [lookbook id="123"].

How do I position a hotspot?

Each hotspot has an X and a Y value, both percentages from the top-left of the image (0-100, one decimal place). 0/0 is the top-left corner, 50/50 the centre. There is no in-editor preview, so publish and check placement on the storefront, then adjust the numbers.

Is there a Lookbook block?

No. The [lookbook id="N"] shortcode is the only way to place a lookbook. You can drop it in any page, post, or a shortcode/HTML block, and reuse the same ID anywhere.

What happens if a pinned product is deleted or unpublished?

That hotspot is skipped at render, no marker is drawn. The rest of the lookbook renders normally. If no hotspots survive (or the lookbook has no image), just the image, or nothing, renders.

What shows in the product card?

The thumbnail and title (linking to the product page), the live price if the Price setting is on, and an add-to-cart link if Add to cart link is on. The add-to-cart link appears only for a purchasable, in-stock product; otherwise the card shows a View product link instead.

Can I change the add-to-cart wording?

Yes. Set Add to cart label under WooCommerce → Lookbook to override it for every product (e.g. Shop the look). Leave it blank to keep each product’s own WooCommerce button text.

Will it slow my pages down or shift the layout?

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

Is the shoppable image accessible?

Yes. Markers are real <button> elements, keyboard operable, each with a screen-reader label like View Linen Shirt and aria-haspopup="dialog". The card is a role="dialog". Motion is guarded by prefers-reduced-motion, and the CSS adapts to light and dark colour schemes.

What about old browsers?

The card uses the native Popover API where available. In browsers without it, the bundled script supplies a fallback that opens, closes and dismisses the card (including on Escape and click-outside). With JavaScript disabled, the page is unaffected.

Are there hooks for developers?

Two settings-screen hooks, used by Lookbook Pro to extend the same options screen: the lookbook_admin_settings_after_cards action (render a card in the form) and the lookbook_sanitize_settings filter (keep your own option keys on save). See the developer section in Building a shoppable lookbook.

What does Lookbook store, and what is removed on uninstall?

Two options (lookbook_settings, lookbook_db_version) and the _lookbook_hotspots meta on each lookbook post. Deleting the plugin removes both options and force-deletes every lookbook post with its meta. The WooCommerce products you pinned are never touched.

Is there a Pro edition?

A Pro edition is planned. The free edition is the complete shoppable-image product: image, hotspot editor, accessible numbered markers, the product-card popover and the shortcode.