41 lines
3.3 KiB
Markdown
Executable File
41 lines
3.3 KiB
Markdown
Executable File
# 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.
|