Shoppable images

With WooCommerce active, any hotspot can be tagged with a product. Visitors see the product without leaving the page, and can add it to the cart on the spot; the add-to-cart button uses WooCommerce’s own script, so the cart updates without a reload.

Tagging a product

Pick the product by name or ID on the hotspot. Per hotspot, choose what the button does: add to cart, link to the product page, or no button at all. A tag whose product has been deleted is left out rather than sending a shopper nowhere.

The product card

The card carries the photo, price, sale and stock state, rating, and the button. Four ready-made looks are available: photo beside the details (card), a one-line compact version, details laid over the photo (overlay), or no photo (minimal). You also choose an accent color, solid or outline buttons, and one of three corner treatments. Price, rating, short description, and the sale and stock badges can each be shown or hidden; a lookbook usually reads better without prices, a catalogue wants them first.

Defaults live under PixMapr → Settings → General → Product Cards, and can be overridden per image or per placement with the shop_* shortcode attributes.

The shop-this-image strip

Set the legend style to products and the legend becomes a row of tagged products: photo, name, and price each. It scrolls sideways on a phone and stacks into a column beside the image on wide screens. Entries open their hotspot and highlight as one is opened.

The product tag marker

Pair shoppable hotspots with the tag marker style, the small pulsing white dot shopping apps use to say there is something here.