Building a shoppable lookbook

This walkthrough builds a shoppable scene from start to finish.

1. Create the lookbook

1. Go to Lookbooks → Add New.
2. Give it a title (for internal reference).
3. Set the Featured image — the photo your products live in.

2. Find your product IDs

Each hotspot needs a WooCommerce product ID. In Products, hover or open a product; the ID appears in the URL (post=456). Note the IDs of the products visible in your image.

3. Pin the products

For each product in the photo, add a hotspot:

1. Enter the X percentage (0–100 from the left).
2. Enter the Y percentage (0–100 from the top).
3. Enter the Product ID.

Use the live preview to nudge each marker until it sits on the right product. Repeat for every product in the scene.

4. Set presentation defaults

Under WooCommerce → Lookbook, decide globally whether to show price and show add-to-cart (with your chosen label), and pick the marker style — pulsing dot, plus sign, or numbered.

5. Embed it

Find the lookbook’s ID by editing it (the post=123 value in the URL), then embed:

[lookbook id="123"]

Or insert the Lookbook block in the block editor and choose your lookbook from the list.

6. Verify the shopping flow

1. Open the page where you embedded the lookbook.
2. The image loads with hotspot markers and no layout shift.
3. Activate a marker by click or keyboard — the product-card popover opens with thumbnail, title, live price and an add-to-cart link.
4. Confirm a deleted or unpublished product produces no marker.

Where Lookbook fits

It is built for stores that sell the look:

• Fashion outfits — pin each garment in a styled photo.
• Room sets — pin furniture and decor in an interior shot.
• Gift guides — pin every item in a curated flat-lay.
• Recipe shots — pin the ingredients in a finished-dish photo.

Anywhere several products share one picture, Lookbook lets shoppers buy straight from the image.