Quick View
Let shoppers look at a product, and buy it, without leaving the page they're on.
An eye on every product card opens the product in a window: its photos, price, rating, short description and the full add-to-cart form, variations and swatches included. Adding to the cart happens right there, so mini carts update and the fly-to-cart animation plays while the shopper keeps browsing.
Extension · needs WooCommerce
Requirements
- WordPress 6.2 or newer
- PHP 7.4 or newer
- WooCommerce 7.0 or newer
Configure it
- Switch it on in Moduly → Installed Widgets. The eye appears on shop and category pages, block themes' product lists and Moduly product cards.
- Click Manage on Quick View to choose how the button looks, what the window shows and what happens after adding to the cart.
With Wishlist and Product Compare also on, the eye joins their icons in one stack on the card image. Their buttons show inside the window too, and so do Variation Swatches.
The window
- Photos with thumbnails and arrows. Choosing a variation shows its photo.
- Title, rating, price and short description.
- The product's own add-to-cart form: quantity, variations, grouped products. Out-of-stock products say so, as on the product page.
- SKU and categories, and a link to the full product page.
- Closes with ×, a click outside, or Esc. Focus returns to the button that opened it.
Settings
Button
| Setting | What you can set |
|---|---|
| On product cards | Eye icon on the image (with wishlist and compare) · "Quick view" bar across the bottom of the image, on hover · Text link below the card's button |
| Button text | Default "Quick view" (the bar's and link's text, the icon's tooltip) |
| Leave Moduly product cards that have their own quick view alone | On / off. Product Grid and Product Carousel have their own quick view option |
Window
| Setting | What you can set |
|---|---|
| Window width | 640–1280 px |
| Accent colour | Price, buttons, the chosen thumbnail |
| Shows | Rating · Short description · SKU and categories · "View full details" link |
| After adding to the cart | Stay open with a message and a View cart link · Close the window · Go to the cart · Go to checkout |
Open it from your own link
Any element with data-mdly-quick-view and a product ID opens the window:
<a href="/product/hoodie/" data-mdly-quick-view="42">Quick look</a>The link still works as a normal link without JavaScript.
How it adds to the cart
The window's form is posted to WooCommerce's own add-to-cart handler, the one the product page uses, without reloading the page. Stock checks, minimums and plugin validation all apply. WooCommerce's added_to_cart event fires afterwards, so mini carts, cart counters and other plugins react as they would to any add.