35 lines
2.8 KiB
Markdown
Executable File
35 lines
2.8 KiB
Markdown
Executable File
# Woo Quick View Popup
|
|
|
|
This widget renders the **content shown inside** a Quick View popup. It only works as part of the full Quick View setup — see [Woo Quick View](woo-quick-view.md) for the complete walkthrough if you haven't set this up yet.
|
|
|
|
Found in the Elementor panel under **Dotjuice → Woo Quick View Popup**. Requires WooCommerce.
|
|
|
|
## How it works
|
|
|
|
Place this widget inside an Elementor popup (nothing else needs to go in that popup — this widget fills it entirely). It renders as an iframe showing whichever product a shopper clicked a Quick View button for.
|
|
|
|
## Content settings
|
|
|
|
| Setting | Default | What it does |
|
|
|---|---|---|
|
|
| **Content Source** | Dedicated quick view page (recommended) | **Dedicated**: shows a clean, minimal view of the product — no theme header/footer — using either a template you choose below or a bare WooCommerce product layout. **Legacy**: shows your actual full product page inside the popup, with the option to hide the header/footer via the settings below. |
|
|
| **Quick View Template** | Empty (bare WooCommerce layout) | Dedicated mode only. Choose a specific Elementor template to control exactly how the product appears inside the popup, or leave empty to use a plain WooCommerce product layout. |
|
|
| **Hide Header** / **Hide Footer** | Off / Off | Legacy mode only. Hides your theme's header and/or footer from within the popup. |
|
|
|
|
There's no Style tab — the popup content always fills the popup completely; size it using the popup's own Width/Height settings in Elementor.
|
|
|
|
## Hiding specific elements inside the popup
|
|
|
|
Add the CSS class `hide-in-qv` to any element in your product template (or your real product page, in Legacy mode) that you don't want shown inside the popup — useful for hiding things like breadcrumbs or a related-products section that don't make sense in a compact popup view.
|
|
|
|
## Which mode should you use?
|
|
|
|
**Dedicated** (the default and recommended option) is faster and cleaner — it loads a minimal, purpose-built view rather than your entire themed page. Pair it with a purpose-built Elementor template under **Quick View Template** for full control over exactly what shoppers see.
|
|
|
|
**Legacy** is useful if you want the popup to look identical to your real product page without building a separate template — but it loads more (the full page, then hides parts of it), so it's a little slower to open.
|
|
|
|
## Good to know
|
|
|
|
- **This widget must be placed inside an actual Elementor popup**, and that popup must then be selected in the separate Woo Quick View button widget's settings — on its own, on a normal page, it does nothing.
|
|
- If you're using a custom **Quick View Template**, note that it replaces WooCommerce's own single-product layout entirely inside the popup — any customisations on your real product page template aren't automatically inherited, since it's a genuinely separate template.
|