Using quick view

This walkthrough takes a fresh install to a working quick view in your shop loop, then covers the shopper experience and how to place triggers outside the default loops.

1. Turn it on and pick a style

Open the Peek menu, confirm Enable quick view is on, and choose a button style. Text is the safest default; switch to icon or icon + text once you know it fits your theme. Set the button label to match your store voice.

2. Choose where the trigger sits

For a standard product grid, Below the product card keeps card heights even. For an image-led grid where you want a clean look, switch to On the product image — the trigger fades in on hover and on keyboard focus, so it stays out of the way until the shopper reaches for it.

Then decide where to load: most stores keep it to shop and archives; enable the related/up-sell option if you also want quick view in those sections of single product pages.

3. Tune the modal

Under modal content, switch off anything you do not want in the preview — for example hide the short description for a tighter modal, or set the gallery thumbnail count to suit your products. Empty fields hide themselves, so a product with no SKU simply omits that row.

4. Confirm on the shop page

Open Shop or a category archive and click a trigger. The modal opens, shows your loading text, then the product fragment over AJAX. On a variable product, pick options inside the modal and add to cart without leaving the listing.

Placing a trigger anywhere

To put a quick-view trigger outside the normal loop — a featured block, a landing page, a custom template — use the shortcode:

[peek_quick_view id="123"]
[peek_quick_view id="123" text="Preview" style="icon_text"]
[peek id="123"]

[peek] is an alias for [peek_quick_view]. Both accept id, text and style (text, icon, icon_text). When a shortcode is present, Peek enqueues its assets on that request even if the usual loop hook did not run, so the modal works wherever you place it.

What the shopper experiences

Selecting a trigger opens a focus-trapped dialog:

• Focus moves into the dialog on open and is trapped while it is open.
• Escape or a backdrop click closes it (backdrop close is configurable).
• On close, focus returns to the trigger button the shopper used.
• The dialog uses role="dialog" with aria-modal, so assistive technology announces it correctly.

The fragment shows the parts you enabled, including the native add-to-cart form. Variable products use WooCommerce’s own variation script, so price and availability update inside the modal exactly as they would on the product page.

Overlay mode and reduced motion

When the trigger is set to overlay the image, it appears on hover and on :focus-within, so keyboard users reach it by tabbing to the product. With prefers-reduced-motion, the overlay trigger stays visible rather than fading in — no hidden controls for motion-sensitive shoppers.

Performance notes

Peek’s own front-end is a single vanilla-JavaScript file, deferred and loaded in the footer — no jQuery from Peek. The closed modal is fully hidden and scrolls internally, so opening it overlays the page rather than reflowing it: no Cumulative Layout Shift. WooCommerce’s variation script only loads when a product actually has variations.