---
title: "How to Add Quick View Button on WooCommerce Products in Elementor?"
url: https://theplusaddons.com/docs/add-quick-view-button-on-woocommerce-products-in-elementor/
date: 2023-08-08
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "Do you want shoppers to check a product's details without leaving the grid? A quick view opens the product in a popup, and closing it puts them back where they..."
image: https://theplusaddons.com/wp-content/uploads/2023/08/How-to-Add-Quick-View-Button-on-WooCommerce-Products-in-Elementor_-1024x536.jpg
word_count: 351
---

# How to Add Quick View Button on WooCommerce Products in Elementor?

## 

- The Woo Product Listing widget in The Plus Addons for Elementor Pro includes TP Quickview, so it adds a quick view button without an extra plugin.
- Content > Extra Options lets the user switch on Display TP Quickview, and each product then shows a quick view button.
- Quickview offers two layouts: Default with image, title, price, and add to cart, or Custom Template built with The Plus Addons Woo Builder widgets.

Do you want shoppers to check a product's details without leaving the grid? A quick view opens the product in a popup, and closing it puts them back where they were.

The Woo Product Listing widget in The Plus Addons for Elementor has its own quick view, **TP Quickview** — no extra plugin needed.

*To check the complete feature overview documentation of The Plus Addons for Elementor Product Listing widget, [click here](https://theplusaddons.com/docs/product-listing-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-listing/?utm_source=tpae&utm_medium=docs&utm_campaign=text#woo-products-wgts)

## Before You Start

- **Edition:** **Pro** — the Woo Product Listing widget is part of The Plus Addons for Elementor Pro. It does not appear in the widget panel of the free plugin.- **WooCommerce** installed and active, with some published products.- **Widget to enable:** Woo Product Listing, switched on under **ThePlus Settings > Widgets**.

## Step 1: Turn on Display TP Quickview

Add the **Woo Product Listing** widget. In **Content > Extra Options**, switch on **Display TP Quickview**. A quick view button appears on each product.

![The Display TP Quickview switch in Content > Extra Options](https://theplusaddons.com/wp-content/uploads/2026/09/tp-product-listout-display-tp-quickview-wide-quickview.webp)

## Step 2: Choose the popup layout

**Quickview**, just below, has two options:

- **Default** — a ready-made layout with image, title, price and add to cart.- **Custom Template** — your own Elementor template, chosen in **Template**. Build it with The Plus Addons Woo Builder widgets so it shows the product's data.

![The Quickview dropdown with Default and Custom Template](https://theplusaddons.com/wp-content/uploads/2026/09/tp-product-listout-quickview-wide-quickview.webp)

## Using YITH instead

If you already use the **YITH WooCommerce Quick View** plugin, switch on **Display YITH Buttons** and then **Quick View** in the same section. Use one quick view or the other, not both.

## Settings Reference

| Setting | Where | Default |
| ------- | ----- | ------- |
| Display TP Quickview | Content > Extra Options | Off |
| Quickview | Content > Extra Options | Default |
| Template | Content > Extra Options (Custom Template) | None |

## Limitations

- **Pro only.** The Woo Product Listing widget is not in the free plugin.- **Custom templates need product-aware widgets.** Ordinary widgets show the same content for every product.

## Troubleshooting

### The popup shows the same product every time

The custom template uses static widgets. Replace them with Woo Builder widgets.

## Related Docs

- [Woo Product Listing widget: settings overview](https://theplusaddons.com/docs/product-listing-widget-settings-overview/) — every control in the widget.- [Add a wishlist button](https://theplusaddons.com/docs/add-wishlist-button-for-woocommerce-products-in-elementor/)- [Hide the Add to Cart button](https://theplusaddons.com/docs/hide-add-to-cart-button-in-woocommerce-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding a quick view button to WooCommerce products in Elementor?**
A: The Woo Product Listing widget is the key requirement, and it only appears in the Pro edition of The Plus Addons for Elementor. WooCommerce also has to be installed and active, with some published products already in place. The widget itself must be switched on under ThePlus Settings > Widgets. That setup matters because the quick view feature, TP Quickview, lives inside the listing widget instead of being a separate plugin.

**Q: How do I add a quick view button on WooCommerce products in Elementor?**
A: The quick view button comes from the Woo Product Listing widget in The Plus Addons for Elementor. In Content > Extra Options, turn on Display TP Quickview and a button appears on each product card. That keeps shoppers in the grid while opening product details in a popup, which is useful when you want browsing to stay fast and focused instead of sending people to a separate page.

**Q: Should I use the default quick view popup or a custom template?**
A: Default is the safer choice if you want a ready-made popup with image, title, price, and add to cart. Custom Template makes sense when you need your own Elementor layout, but it has to be built with The Plus Addons Woo Builder widgets so it can pull product data correctly. Ordinary widgets are static, so they can repeat the same content across products.

**Q: Can I use YITH WooCommerce Quick View instead of TP Quickview?**
A: The Woo Product Listing widget supports YITH as an alternative path if that plugin is already part of your setup. Turn on Display YITH Buttons and then Quick View in the same Extra Options section. The important part is not mixing both systems on the same listing, because the page recommends using one quick view method or the other, not both.

**Q: Why does my quick view popup show the same product every time?**
A: That usually happens when the custom template was built with static widgets instead of product-aware ones. The fix is to replace those ordinary widgets with The Plus Addons Woo Builder widgets so each popup can read the current product’s data. This is a common gotcha with custom templates because a layout can look right while still being disconnected from dynamic product content.

**Q: What are the main limitations of quick view in The Plus Addons for Elementor?**
A: Two limits matter most: it is Pro only, and custom templates need product-aware widgets. The Woo Product Listing widget is not available in the free plugin, so the feature depends on The Plus Addons for Elementor Pro. Also, if you build a custom popup with ordinary widgets, it will not behave like a real product template and may repeat content across items.