How it works · Siteryn Quick View Docs

Where the button appears

Setting	Product lists
Shop, category & search pages	The main product list on the shop, product category and tag archives, and product search results
Related, up-sell & cross-sell lists	The lists under a single product and on the cart page
Other product lists	Everything else: `[products]` shortcodes, Product Collection blocks on your home page, product grid blocks

The main product on a single product page never gets a button.

Classic, block and custom themes

Classic themes: the button is added to each product card through WooCommerce's standard hooks.
Block themes: it's added next to the Product Button block (or on the Product Image block) in Product Collection blocks, without duplicates.
Themes with custom cards: when a card skips WooCommerce's hooks, the button is placed automatically next to the card's add to cart button, on its image, or at the end of the card.
Products added later by infinite scroll or AJAX filters get the button when the new cards come with it (standard WooCommerce and block cards). Custom cards that rely on automatic placement need the template tag: see Products loaded with AJAX.
Older product grid blocks (such as Newest Products or Products by Category) always count as Other product lists, wherever they are placed.

For a theme with its own product loop, the template tag siteryn_qv_button() adds the button anywhere.

The modal opens straight away with "Loading product…".
The product is loaded in the background and shown. Opening the same product again on that page is instant.
If loading fails, "Sorry, this product could not be loaded. Please try again." appears with a Try again button.

Products that aren't published, are password protected, or have catalog visibility Hidden don't open ("This product is not available."). Users who can edit the product can preview hidden and draft products. When Enable Quick View is off, the modal shows "Quick view is not available."

Closing

With the × button ("Close quick view"), by clicking outside (Close when clicking outside), or with Esc (Close with the Escape key). Focus returns to the button that opened it.

Accessibility

The modal is a dialog named "Quick view" while loading, then after the product title. Focus moves into it and Tab stays inside until it closes. If loading fails, focus moves to Try again.
The Quick View button tells screen readers it opens a dialog, and is marked busy while the product loads.
Icon-only buttons are announced as "Quick view: product name".
Add to cart confirmations and errors appear in the modal and are announced.
Shoppers who prefer reduced motion get no animation.

Phones and tablets

At 768 px and narrower, the image and details always stack.
At 600 px and narrower, the modal fills the screen (setting Full-screen on phones).
The page behind the modal doesn't scroll while it's open.

Performance & caching

Styles and scripts load on shop, category and tag, single product, cart and search pages, and on any other page that shows a Quick View button. They use only what WooCommerce already loads (jQuery and its variation script).
Opening a product works on cached pages (a public GET request with no token). Each product is loaded once per page view; reopening it is instant until it is added to the cart.
Add to cart in the modal uses a security token that expires after 12–24 hours. If your page cache keeps pages longer, shoppers may see "Sorry, this product could not be added to your cart. Please try again." Set your cache lifetime under 12 hours.

Languages

Translation-ready, right-to-left aware.
With WPML or Polylang, the modal shows the product in the visitor's language. Translate the button and link texts with string translation.
Once you save a tab, the button text and link text are stored in the language you saved them in. On a single-language site, edit them if you later change the site language.