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. The product fragment is fetched from admin-ajax.php (action peek_quick_view, nonce-checked), the same endpoint for logged-in and guest shoppers:

• Focus moves into the dialog on open and is trapped while it is open (Tab and Shift+Tab cycle within it).
• A small polite live region (role="status", aria-live="polite") announces the loading and error states; the product itself is not re-announced once focus moves into it.
• Escape always closes the dialog; a backdrop click closes it too when backdrop-close is on.
• On close, focus returns to the exact trigger the shopper used.
• The dialog uses role="dialog" with aria-modal="true", 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 wc-add-to-cart-variation script, enqueued by Peek and re-initialised on the injected markup, so price and availability update inside the modal exactly as they would on the product page. If the request fails (network error, product removed) the dialog shows your error text with a retry-able state rather than closing.

Where the trigger attaches

Peek hooks the loop button by placement: Below the card uses woocommerce_after_shop_loop_item (priority 21); Overlay uses woocommerce_before_shop_loop_item (priority 8), positioned over the thumbnail by CSS. The placement is read when hooks register, so switching it takes effect on the next page load. If your theme overrides the WooCommerce loop and drops these hooks, place the trigger with the shortcode instead.

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.

Extending the modal (developers)

The modal output is not a theme-overridable template, Peek renders from its own templates/ folder. To add to it, use the action hooks fired inside the fragment:

// Append a trust badge after the add-to-cart form in every quick view.
add_action( 'peek_quick_view_after_cart', function ( WC_Product $product, array $settings ): void {
    echo wp_kses_post( do_shortcode( '[my_trust_badges]' ) );
}, 10, 2 );

peek_quick_view_before_cart, peek_quick_view_after_cart and peek_quick_view_content_end each receive $product and $settings; peek_quick_view_modal_dialog_start fires at the top of the dialog shell. See Configuration for the full list. To re-theme the look without markup changes, override the --peek-* CSS custom properties (overlay colour, dialog radius, transition timing) from your theme stylesheet, focus-visible rings, dark-mode colours and the prefers-reduced-motion guard are built in.

Performance notes

Peek’s own front-end is a single vanilla-JavaScript file, deferred and loaded in the footer, no jQuery from Peek. The button and modal assets load only where the trigger can appear (shop/archives, or also single-product loops when you opt in), not site-wide. The closed modal is hidden and scrolls internally, so opening it overlays the page rather than reflowing it: no Cumulative Layout Shift. WooCommerce’s variation script is enqueued alongside Peek’s so the variation form works as soon as the fragment loads.