---
title: Quick View
description: "[WooCommerce Quick View Feature (No Coding) | Easy Elements](https://www.youtube.com/embed/D7h9Xj61vQo?feature=oembed&enablejsapi=1) Enhance the shopping experience with instant product previews without leaving the page. Customers can quickly view details and make faster purchase decisions. It saves time and adds a modern touch to…"
url: "https://wpeasyelements.com/docs/quick-view/"
updated: "2026-05-06"
category: WooCommerce
---

# Quick View

[WooCommerce Quick View Feature (No Coding) | Easy Elements](https://www.youtube.com/embed/D7h9Xj61vQo?feature=oembed&enablejsapi=1)

Enhance the shopping experience with instant product previews without leaving the page. Customers can quickly view details and make faster purchase decisions. It saves time and adds a modern touch to your store.

### 1. General Settings

- 1.1 - **Enable Quick View**: Toggles the Quick View feature on or off site wide.
- 1.2 - **Enable on Shop Page**: Shows or hides Quick View button on the Shop page.
- 1.3 - **Enable on Mobile**: Enables or disables Quick View on mobile devices.
- 1.4 - **Custom Preloader Image**: Upload a custom loading image for the popup.

### 2. Button Settings

- 2.1 - **Button Position**: Set where the Quick View button appears on product cards.
- 2.2 - **Button Text**: Customize the label shown on the Quick View button.
- 2.3 - **Button Icon Type**: Choose between no icon, default, custom class, or image.
- 2.4 - **Icon Class**: Enter or pick a custom icon class for the button.
- 2.5 - **Custom Icon Image**: Upload your own image to use as the button icon.
- 2.6 - **Icon Position**: Place the icon before or after the button text.
- 2.7 - **Enable Tooltip**: Show a tooltip when hovering over the button.

### 3. Popup Settings

- 3.1 - **Thumbnail Layout**: Display product images as a slider or single image.
- 3.2 - **AJAX Add to Cart:**Add to cart from popup without page reload.
- 3.3 - **Cart Button Icon**: Show or hide icon inside the Add to Cart button.
- 3.4 - **Enable Image Lightbox**: Open product images in fullscreen lightbox view.
- 3.5 - **Show Category Badge**: Display the product category as a badge in popup.
- 3.6 - **Content to Show**: Choose and reorder content items shown in popup.

### 4. Social Share

- 4.1 - **Enable Social Share**: Show or hide social sharing buttons in popup.
- 4.2 - **Share Title**: Set the label displayed before the share buttons.
- 4.3 - **Share Buttons**: Enable, disable, and customize each social platform icon.

### 5. Shortcode

- 5.1 - Quick View Shortcode Use `` to embed anywhere.

Go to **Easy Elements → All Extensions → WooCommerce Extensions → Quick View**

![](https://wpeasyelements.com/wp-content/uploads/2026/04/quick_view_settings_scr-1024x403.png)

![](https://wpeasyelements.com/wp-content/uploads/2026/04/quick-view-settings-1.png)

![](https://wpeasyelements.com/wp-content/uploads/2026/04/quick-view-update-2.png)

![](https://wpeasyelements.com/wp-content/uploads/2026/04/quick-view-update-3.png)

![](https://wpeasyelements.com/wp-content/uploads/2026/04/quick-view-update-4.png)

![](https://wpeasyelements.com/wp-content/uploads/2026/04/quick-view-update-5.png)

### 1. Quick View Colors

- 1.1 -**Primary Color**: Main accent color for buttons, links, badges and price. Default: `#629D23`
- 1.2 - **Body Text Color**: Color used for body text and meta text. Default: `#6E777D`

### 2. Button Style

- 2.1 - **Font Size**: Quick View button and icon font size in px. Default: `14px`
- 2.2 - **Background Color**: Background color of the Quick View button.
- 2.3 - **Text Color**: Label text color of the Quick View button.
- 2.4 - **Icon Color**: Color applied to the icon inside the Quick View button.
- 2.5 - **Button Padding**: Inner spacing of the button (Top, Right, Bottom, Left). Default: `6px 8px 6px 8px`
- 2.6 - **Border Size**: Border thickness around the button in px. Default: `1px`
- 2.7 - **Border Color**: Color of the border around the Quick View button.

### 3. Cart Button Style

- 3.1 - **Background Color**: Background color of the Add to Cart button in popup.
- 3.2 - **Text Color**: Label text color of the Add to Cart button.
- 3.3 - **Hover Background**: ColorBackground color when hovering over the cart button.
- 3.4 - **Hover Text Color**: Text color when hovering over the cart button.

### 4. Navigation Arrow Style

- 4.1 - **Nav Button**: Color Border and icon color of the prev/next slider arrows.
- 4.2 - **Nav Hover** **Background**: Background color of navigation arrows on hover.

### 5. Price Style

- 5.1 - **Price Color**: Color of the product price displayed in the popup.

### 6. Popup Container Style

- 6.1 - **Container Background**: Background color of the Quick View popup container.
- 6.2 - **Overlay Opacity**: Darkness of the background overlay behind the popup. Default: `0.6`

### 7. Close Button Style

- 7.1 - **Background Color**: Background color of the popup close button.
- 7.2 - **Text Color**: Icon: or text color of the popup close button.

![](https://wpeasyelements.com/wp-content/uploads/2026/04/quick-view-update-6.png)

![](https://wpeasyelements.com/wp-content/uploads/2026/04/quick-view-update7.png)

![](https://wpeasyelements.com/wp-content/uploads/2026/04/quick-view-update-8.png)

**Front End of Quick view product**

Clear view of the Quick view Popup box

![](https://wpeasyelements.com/wp-content/uploads/2026/04/quick-view-popup-settings-box-1-1024x543.png)

```
Use this method to display Quick View with a specific product ID.

<?php echo do_shortcode('[easyel_quick_view product_id="123"]'); ?>

Use this inside WooCommerce loops to automatically get the product ID.

<?php
EasyElements_ElementorProExtensionQuickViewIncludesQuickviewFrontend::render_quick_view_button_loop();
?>
```