Zum Inhalt springen
WooCommerce & WordPress Plugin Docs

Lookbook

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

Lookbook turns one image into a shoppable scene. You set a photo, pin WooCommerce products onto it as hotspots by X/Y percentage, and embed the result anywhere with [lookbook id="123"]. When a shopper activates a hotspot, a numbered marker opens a small product card showing the thumbnail, title, the live price and an add-to-cart link, so they buy from the image without opening the product page first.

It is built for stores that sell the look: fashion outfits, room sets, gift guides, recipe ingredient shots, anywhere several products live in one picture.

What the free edition does

Section titled “What the free edition does”
  • Shoppable image, pin any number of products as hotspots on one photo.
  • Hotspot editor, a repeater on the Edit Lookbook screen: one row per product, each an X%, a Y% and a product ID.
  • Numbered markers, each hotspot is a numbered <button>: keyboard-operable, with a screen-reader label like View Linen Shirt.
  • Product card popover, thumbnail, title, live price and an add-to-cart link, built on the native Popover API.
  • [lookbook id="N"] shortcode, the only way to place a lookbook; works in any number of pages, posts or widgets.
  • Live WooCommerce data, price, stock and the add-to-cart URL are read from wc_get_product() at render time, so they are always current.
  • Degrades cleanly, a disabled plugin, a missing image, no hotspots, or hotspots pointing at deleted/unpublished products render nothing (or just the image), never broken markup.
  • Fast and tidy, CSS and JS 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 layout shift.

How it works

Section titled “How it works”
  1. Create a lookbook under Lookbooks → Add New and set its photo with the Featured image box.
  2. Add a hotspot per product in the Shoppable hotspots box: an X and Y percentage (0-100 from the top-left) and the product ID.
  3. Embed it with [lookbook id="123"], using the post ID from the lookbook’s edit URL.

A lookbook is admin-only content, it is not publicly queryable and has no front-end archive or single page of its own. It only appears where you place the shortcode.

Requirements

Section titled “Requirements”
  • WordPress 6.5 or newer, PHP 8.1 or newer.
  • WooCommerce active (declared compatible with HPOS and Cart/Checkout Blocks). Lookbook does not run while WooCommerce is inactive, it shows an admin notice instead.

Next steps

Section titled “Next steps”