Early bird50% off every Moduly widget and plan in your first order. One use per customer.See prices
Get Moduly free
Extensions · Store · live demoQuick ViewLet shoppers look at a product, and buy it, without leaving the page.
Get itDocs

Quick View

Quick View (Extension)

Let shoppers look at a product, and buy it, without leaving the page. Tap the eye on any product below.

Try it: open a product

Open the crop-top from a custom link

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

  1. Switch it on in Moduly → Installed Widgets. The eye appears on shop and category pages, block themes’ product lists and Moduly product cards.
  2. 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.

1 view