---
title: "How to Add a Quick View Button to a Custom WooCommerce Product Skin in Elementor?"
url: https://theplusaddons.com/docs/add-a-quick-view-button-to-a-custom-woocommerce-product-skin-in-elementor/
date: 2024-07-02
modified: 2026-04-09
lang: en
author: "Aditya Sharma"
description: "Are you looking to add a quick view button to the WooCommerce product listing? Adding a quick view button to product listings, allows visitors to get a closer look at..."
image: https://theplusaddons.com/wp-content/uploads/2024/07/How-to-Add-Animated-Headings-In-Elementor-3-1024x570.jpg
word_count: 237
---

# How to Add a Quick View Button to a Custom WooCommerce Product Skin in Elementor?

## 

- Integrates the WP Quick View widget from The Plus Addons for Elementor to add a quick view button to WooCommerce product listings.
- Requires installation and activation of The Plus Addons for Elementor to utilize the WP Quick View widget features.
- Involves creating a custom WooCommerce product skin and using the Product Listing widget to display the quick view button.

Are you looking to add a quick view button to the WooCommerce product listing? Adding a quick view button to product listings, allows visitors to get a closer look at products without having to navigate away from the main page.

With the WP Quick View widget from The Plus Addons for Elementor, you can easily add a quick view button to a custom product loop.

*To check the complete feature overview documentation of The Plus Addons for Elementor WP Quick View widget, [click here](https://theplusaddons.com/docs/add-product-post-quick-view-in-elementor/).*

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

To do this, make sure you’ve [created a custom WooCommerce product skin](https://theplusaddons.com/docs//create-a-custom-woocommerce-product-skin-in-elementor/). Open the template and add the WP Quick View widget to the desired place, then follow the steps - 

1. Select **Products **from the **Post Type** dropdown.

![](https://theplusaddons.com/wp-content/uploads/2024/07/wp-quick-view-products.gif)

2. Then select the appropriate option from the **Quickview** dropdown and update the template.

3. Then you have to [use this template with the Product Listing widget](https://theplusaddons.com/docs//create-a-custom-woocommerce-product-skin-in-elementor/#Use-the-Template-With-Product-Listing-Widget).

Now you’ll see the quick view button in the product listing that you can use to check the product at a glance. 

> *Note: Make sure you’ve added some products to your WooCommerce store to see the listing.*

![](https://theplusaddons.com/wp-content/uploads/2024/07/wp-quick-view-products-demo.gif)

> *Note: In a similar process you can add a quick view button to *[*blog post*](https://theplusaddons.com/docs//create-custom-loop-skin-for-blog-post-in-elementor/)*, page or *[*custom post type*](https://theplusaddons.com/docs//create-elementor-custom-post-type-loop-skin/)* listing using the custom loop skin.*