Zum Inhalt springen
WooCommerce & WordPress Plugin Docs

Getting started

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

Most shops can publish their first shoppable image in a few minutes. Install, create a lookbook, pin products by percentage, embed.

Before you start

Section titled “Before you start”
  • WordPress 6.5 or newer
  • PHP 8.1 or newer
  • WooCommerce installed and active (HPOS and Cart/Checkout Blocks are both supported)

If WooCommerce is not active, Lookbook stays dormant and shows an admin notice, it registers nothing on the storefront.

Install

Section titled “Install”
  1. Install WooCommerce and make sure it is active.
  2. Install Lookbook from the plugin directory (when live on WordPress.org), or upload the lookbook folder to /wp-content/plugins/.
  3. Activate the plugin. A Lookbooks menu appears, and a settings screen at WooCommerce → Lookbook.

On first activation Lookbook seeds its default settings once (everything on, no custom add-to-cart label). It writes nothing else.

Create your first lookbook

Section titled “Create your first lookbook”
  1. Go to Lookbooks → Add New.
  2. Give it a title, this is for your reference in the admin only; it is also used as the image’s alt text on the storefront.
  3. Set the Featured image (labelled Lookbook image), this is the scene shoppers will shop. A lookbook with no featured image renders nothing, so this is required.
  4. In the Shoppable hotspots box, add a row per product:
    • X % and Y %, the marker position as a percentage from the top-left of the image (0-100, one decimal place). 0/0 is the top-left corner; 50/50 is dead centre.
    • Product ID, the WooCommerce product to pin.
  5. Use + Add hotspot for more rows and Remove to drop one. The editor renumbers rows automatically.
  6. Publish the lookbook. Only published lookbooks render; a draft outputs nothing.

There is no live preview in the editor, you enter percentages, publish, then check the placement on the storefront and adjust. Start hotspots near 50/50 and nudge from there.

Find the IDs you need

Section titled “Find the IDs you need”
  • Lookbook ID, edit the lookbook; the ID is the post=123 value in the browser URL. This is what goes in the shortcode.
  • Product ID, under Products, open a product; the post=456 value in the URL is its ID. This goes in a hotspot row.

Embed it

Section titled “Embed it”
[lookbook id="123"]

Put the shortcode in any page, post, or a shortcode/HTML block. There is no Lookbook block, the shortcode is the only embed method. The same ID can be reused on as many pages as you like.

Set the global presentation

Section titled “Set the global presentation”

Open WooCommerce → Lookbook to tune what every lookbook shows:

  • Show lookbooks on the storefront, the master switch (on by default).
  • Price, show the live price in the card (on by default).
  • Add to cart link, show the add-to-cart link in the card (on by default), with an optional label override.

See Configuration for exactly what each setting controls.

Verify on the storefront

Section titled “Verify on the storefront”
  1. Open the page where you placed the shortcode.
  2. The image loads with numbered markers and no layout shift.
  3. Activate a marker by click, tap or keyboard, the product card opens with the thumbnail, title, live price and add-to-cart link.
  4. Confirm a hotspot pointing at a deleted or unpublished product shows no marker.

Need help?

Section titled “Need help?”