# Woo Quick View

Two widgets work together to build Quick View: **Woo Quick View** (this one — the trigger button) and **Woo Quick View Popup** (the content shown inside the popup). Both are needed; this guide covers the full setup.

Requires WooCommerce. **Requires Elementor Pro** for the popup to actually open — without Elementor Pro, the quick-view button gracefully falls back to a normal link straight to the product page instead, so nothing is ever broken, it simply won't show a popup.

## How it works, end to end

1. You build a popup (an Elementor Pro popup content type) containing the **Woo Quick View Popup** widget.
2. You place the **Woo Quick View** widget anywhere you like, and point it at that popup.
3. The Quick View widget then automatically injects a quick-view button onto every product in your product loops (grids, carousels) sitewide — you don't need to manually add a button to each product card.

## Setting it up

1. **Create the popup**: in Elementor, create a new Popup (Templates → Popups → Add New in your Elementor library).
2. **Add the Woo Quick View Popup widget** inside it — see [Woo Quick View Popup](woo-quick-view-popup.md) for its settings. Size the popup itself using Elementor's own popup Width/Height settings.
3. **Publish the popup.**
4. **Add the Woo Quick View widget** anywhere on your site (a header, a single instance on any page — it doesn't need to be near your product grid, since it works by injecting buttons into loops sitewide once enabled).
5. Turn on **Enable Quick View**, and select your popup under **Quick View Popup**.
6. Save and check a shop or category page — quick-view buttons should now appear on your product cards.

## Content settings

| Setting | Default | What it does |
|---|---|---|
| **Enable Quick View** | Off | The master switch — turns on automatic button injection into every product loop on your site. Nothing happens until this is on. |
| **Quick View on Looped Add to Cart** | Off | For variable products shown in a grid with a "Select options" link (common with Elementor Pro's Loop Grid), replaces that link with a quick-view button too — so shoppers can pick variations without leaving the grid. |
| **Hide on Mobile** | Off | Hides the quick-view button on smaller screens. |
| **Quick View Icon** | Eye icon | The icon used for the button. |
| **Quick View Popup** | — | Which popup contains your Woo Quick View Popup widget — this is the link between the two widgets. **Make sure to select an actual popup you've built with the Quick View Popup widget inside it** — this dropdown lists all your Elementor templates, not only popups, so double check you've selected the right one. |

## Styling

Button alignment, and Normal/Hover icon colour and size.

## Good to know

- **The button widget and the popup widget must both be set up for anything to happen** — placing just one without the other has no visible effect.
- Hovering over a quick-view button preloads the popup content in the background, so the popup opens close to instantly on click — this preloading only happens when your popup widget is set to its recommended "Dedicated" content mode (see [Woo Quick View Popup](woo-quick-view-popup.md)).
- Buttons keep appearing correctly even after a [Woo Product Filter](woo-product-filter.md) AJAX refresh swaps in new products — no extra setup needed if both widgets are on the same page.