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
- You build a popup (an Elementor Pro popup content type) containing the Woo Quick View Popup widget.
- You place the Woo Quick View widget anywhere you like, and point it at that popup.
- 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
- Create the popup: in Elementor, create a new Popup (Templates → Popups → Add New in your Elementor library).
- Add the Woo Quick View Popup widget inside it — see Woo Quick View Popup for its settings. Size the popup itself using Elementor's own popup Width/Height settings.
- Publish the popup.
- 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).
- Turn on Enable Quick View, and select your popup under Quick View Popup.
- 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).
- Buttons keep appearing correctly even after a Woo Product Filter AJAX refresh swaps in new products — no extra setup needed if both widgets are on the same page.