---
title: Quick View Overview
description: "The [DiviMerc Quick View extension](https://divimerc.com/features/quick-view/) lets shoppers open a WooCommerce product in a popup without leaving the page. They can browse the gallery, check the price, select variations, and add the product to their cart. You can customize the popup…"
url: "https://divimerc.com/docs/quick-view/"
updated: "2026-11-12"
category: Extensions
---

# Quick View Overview

The [DiviMerc Quick View extension](https://divimerc.com/features/quick-view/) lets shoppers open a WooCommerce product in a popup without leaving the page. They can browse the gallery, check the price, select variations, and add the product to their cart. You can customize the popup layout in the Divi Builder.

**Important Note:**

- Quick View is disabled by default. It requires WooCommerce and an active Divi 5 theme or Divi Builder plugin.

## Enable the Quick View Extension

- Go to **WordPress Dashboard > DiviMerc > Extensions**.
- Find **Quick View** and enable it.

![](https://divimerc.com/wp-content/uploads/2026/11/quick-view-overview-1.webp)

- If the **Companions required** dialog appears, click **Proceed** to enable the modules used in the default layout.

![](https://divimerc.com/wp-content/uploads/2026/11/quick-view-overview-2.webp)

- Click **Configure** to access the **General**, **Popup**, and **Loop Products** settings.

![](https://divimerc.com/wp-content/uploads/2026/11/quick-view-overview-3.webp)

## General

![](https://divimerc.com/wp-content/uploads/2026/11/quick-view-overview-4.webp)

**Quick View Layout:** Click **Configure** to open the Quick View layout in the Divi Visual Builder in a new browser tab. The same layout is used for every product. There you can:

- **Style the popup panel:** Use the layout’s first section to change the panel’s width, background, rounded corners, spacing, and shadow.
- **Choose what shoppers see:** The default layout includes the product gallery, name, rating, price, short description, variation swatches, and Add to Cart button. You can add, remove, or rearrange Divi and DiviMerc modules.
- **Edit shared content:** Product modules automatically show details for the product the shopper opens. Content you add manually, such as a Text module with a store notice, appears in every product’s popup.

Click **Save** in the Visual Builder to apply your changes.

## Popup

Use the Popup tab to style the close icon and the overlay behind the Quick View popup.

![](https://divimerc.com/wp-content/uploads/2026/11/quick-view-overview-5.webp)

- **Close Icon Color** sets the color of the × in the top-right corner. The default is black (#000000).
- **Overlay Color** sets a solid color or gradient behind the popup. Lower the opacity to make more of the page visible.
- **Overlay Blur (px)** blurs the page behind the popup. Leave it at 0 to keep the page sharp.

Click **Save Now** to apply your changes.

Shoppers can close the popup by clicking the ×, clicking outside the panel, or pressing **Esc**. To add a close button inside the popup, add a **Button** module to the Quick View layout and enter divimerc-qv-close under **Advanced > CSS ID & Classes > CSS Class**.

## WooCommerce Product Lists

Use this tab to add a Quick View button to product cards in Divi’s Woo Products and Shop modules, as well as shop, category, and tag pages that use WooCommerce templates.

![](https://divimerc.com/wp-content/uploads/2026/11/quick-view-overview-6.webp)

- **Quick View Icon on WooCommerce Products:** Add a Quick View button with an eye icon to each product card. This setting is off by default. The options below appear when you enable it.
  - **Icon (SVG):** Choose an SVG from the Media Library to replace the eye icon. The SVG uses **Icon Size** and **Icon Color**. Leave this field empty to keep the eye icon.
  - **Icon Size (px):** Set the icon size from 8 to 48px.
  - **Icon Color:** Set the icon color.
  - **Background Color:** Set the button’s background color.
  - **Button Size (px):** Set the button’s width and height from 16 to 96px.
  - **Border Width (px):** Set the border width from 0 to 10px.
  - **Border Color:** Set the button’s border color.
  - **Border Radius (px):** Round the button’s corners from 0 to 100px.
  - **Position:** Place the button at **Top Left**, **Top Right**, **Center Center**, **Bottom Left**, or **Bottom Right** of the full product card.
  - **Offset From Corner (px):** Set how far the button sits from the card edges, from 0 to 60px.

**Note.** DiviMerc’s **Product Grid** and **Product Carousel** modules have their own Quick View settings. To style their buttons, open **Design > Quick View Button** in the module.

## Where to Use Quick View

- **Product Grid or Product Carousel:** Enable Content > Elements > Quick View. Set where the button appears under Content > Quick View > Button Position.
- **Select options button:** To open the popup from a variable product’s Select options button, enable Product Add To Cart and set Content > Button & Actions > Variable Product Action to Quick View.

## Need Help?

If you have any questions or need assistance, contact our support team at support@wprio.com