Feature Overview

Each heading below describes one part of the quick view experience: what the shopper sees, and what the store owner controls.

The Quick view button#

What the shopper sees: a button labelled with your chosen text next to the add to cart button on every product in a listing. It carries an accessible label such as “Quick view: Blue Hoodie” for screen readers.

What you control: the label and whether it sits before or after the add to cart button, under WooCommerce → Quick View. The button uses the same button class as WooCommerce’s own buttons, so it picks up your theme’s button styling automatically.

The button appears on:

• the shop page and product category and tag archives,
• related and upsell product loops on the product page,
• the [products], [product_category], [recent_products], [sale_products], [best_selling_products], [top_rated_products], [featured_products] and [related_products] shortcodes,
• the Product Collection block and the older WooCommerce product grid blocks on block themes.

If JavaScript is disabled, or the browser does not support the native dialog element, the button is a plain link to the product page, so nobody is ever stuck.

The modal#

What the shopper sees: clicking the button opens a centred dialog over the current page with a dimmed backdrop and a “Loading product details…” message, which is replaced by the product within a moment. The modal is up to 960 pixels wide and shrinks to fit phones, where the image stacks above the details.

The modal closes with the × button in the corner, the Escape key, or a click on the backdrop. When it closes, keyboard focus returns to the button that opened it, and the content is cleared so the next product loads fresh.

What you control: which elements are loaded into the modal (see Quick View settings) and its colours (see Styling the button and modal).

Image gallery#

What the shopper sees: the product’s featured image, followed by a row of thumbnails when the product has gallery images. Clicking a thumbnail swaps the main image. Thumbnails are real buttons, so they work with the keyboard and announce which image is selected.

Variation images: when a shopper picks a variation that has its own image, the main image switches to it and the matching thumbnail is highlighted. Clearing the selection with WooCommerce’s “Clear” link restores the first image.

What you control: switch the gallery on or off in the settings. Images come from the product’s featured image and product gallery, in that order, at WooCommerce’s single product image size.

Variable products#

What the shopper sees: the same attribute selectors as on the product page. After choosing every attribute, the variation’s price, stock message and image appear, and the Add to cart button becomes active. Out-of-stock combinations are handled by WooCommerce exactly as on the product page.

What you control: nothing extra is needed. The modal loads WooCommerce’s variable product form and WooCommerce’s own variation script, so any plugin that extends the variation form (swatches, for example) is given the same markup to work with.

Grouped products#

What the shopper sees: the list of child products with a quantity box for each, as on the product page. Entering quantities for one or more children and clicking Add to cart adds each of them to the cart. If no quantity is entered, the modal asks the shopper to choose one.

What you control: nothing extra. Each child is added in its own request, so cart rules and stock checks apply per product.

Add to cart#

What the shopper sees: after clicking Add to cart, the button shows a loading state, the item is added without a page reload, the button gains a tick, and a View cart link appears next to it. The cart fragments in your header (cart count, Mini Cart block) update at the same time.

If WooCommerce → Settings → Products → Redirect to the cart page after successful addition is enabled, the shopper is sent to the cart instead. If WooCommerce rejects the addition (for example a stock limit is reached), the shopper is taken to the product page where WooCommerce shows its notice.

External/affiliate products: the modal shows the product’s Buy button, which takes the shopper to the vendor’s site in the same way as the product page does.

Out-of-stock products: when a product cannot be bought, WooCommerce’s stock message is shown in place of the form. If Hide out of stock items from the catalog is enabled in WooCommerce, the quick view refuses to load such products at all.

Product details#

What the shopper sees: the product name (always), the star rating, the price, the short description, the SKU, categories and tags, and a View full details link to the product page.

What you control: every one of these except the name can be switched off in the settings.

Privacy, visibility and safety#

The quick view only ever shows products the shopper could already open:

• draft, pending and private products are only shown to users who may read them;
• products with catalogue visibility set to Hidden are only shown to users who may edit them;
• password-protected products are never shown;
• out-of-stock products are not shown when WooCommerce is set to hide them from the catalogue;
• variations cannot be requested directly, only their parent product.

If a product cannot be loaded, the modal shows “Sorry, this product could not be loaded.” with a View product link instead of throwing the shopper off the listing.

Accessibility#

• The modal is a native dialog with an accessible name, so screen readers announce it and keep focus inside it.
• The close button and thumbnails have descriptive labels.
• The content area announces when it changes, so screen reader users hear when the product has loaded.
• Escape closes the modal and focus returns to the opening button.