Rebuilt from the ground up for Breakdance and Oxygen 6. One shared popup shell sits on the page; each item's content is fetched the moment it's clicked, so nothing is stuffed into the DOM up front, no matter how big your loop is.
The old Quick View rendered every item's popup into the page whether it was opened or not. The new one keeps pages lean and fetches exactly what's needed, exactly when it's needed.
A 200-product grid used to mean 200 hidden popups in the page. Now it's one empty shell and a single fetch per click, keeping pages small and fast.
The popup content is a global block built with dynamic data: title, price, gallery, add to cart, anything. It's rendered for whichever item was clicked.
A spinner shows while content is fetched, and every result is cached per item, so reopening the same product is instant.
Two elements do all the work: the Quick View popup itself, and a trigger button you drop inside your loop.
Create a global block and design it with dynamic data: product image, title, price, add to cart, or anything else. This is what appears inside the popup for each item.
Drop the Quick View element once on the page or template and pick your global block. It renders the shared popup shell and styles the overlay, box and close button.
Place the Quick View Button inside your loop card: Phox Product Grid, Loop Builder, posts list or product list. It automatically carries the right post ID for each item.
Clicking a button fetches that item's content, shows it in the popup with your chosen animation, and caches it for next time. That's the whole setup.
No button required: add the phox-qv-trigger class to any element (an image, a heading, a whole card) and it becomes a trigger. The post ID is detected automatically from the surrounding loop item, so it works in most loops with zero extra setup.
Both elements are fully styleable inside Breakdance and Oxygen 6, with sensible defaults so they look right before you touch a thing.
Content is rendered server-side for the clicked post only and delivered by AJAX, so the page never carries popup markup it might not use.
Every fetched popup is cached for the visit, so reopening an item shows instantly with no second request.
The popup renders any global block with full dynamic data support. Build one layout and it adapts to every product or post.
Choose Zoom, Slide Up or Fade for the popup entrance, set once on the Quick View element.
Style the backdrop colour and add a glassy background blur, plus full control of the popup box: width, background, padding and borders.
Close on overlay click, on Escape, or via the close button with your own icon, size, colours and borders.
An optional spinner fills the gap while content is fetched, so clicks always feel responsive.
A ready-made trigger with text, icon or icon-only display, hover colours, typography, padding and borders.
Add one class to your own element and it opens the popup. The post ID is read automatically from the loop item around it.
Need different popups for different loops? Give each Quick View an ID and match it on the trigger. Done.
Focus moves into the popup on open and returns to the trigger on close, with proper ARIA state throughout. Keyboard users are covered.
Your global block's CSS is primed on the page up front, so fetched content lands fully styled with no flash of unstyled popup.
Adding quick view to your post loops has never been this easy. Utilise quick view element inside your post loops to design the quick view window. Use the Quick View Button element to launch it. Quick, easy and effective quick view.
Check out our WooCommerce demo store to see the element in action!
