---
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-09-28
lang: en
author: "Aditya Sharma"
description: "A custom-built product card (via Product Listing's skin editor) needs its Quick View trigger placed and styled to match the rest of the card, not left in a fixed default..."
image: https://theplusaddons.com/wp-content/uploads/2024/07/How-to-Add-Animated-Headings-In-Elementor-3-1024x570.jpg
word_count: 330
---

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

## 

- The Plus Addons for Elementor Pro requires the Quick View widget to be installed and activated, and all Woo Builder widgets require a Pro licence.
- Quick View drops directly inside a custom Product Listing skin template, like the Woo Compare and Woo Wishlist buttons, so the trigger is not fixed in a default position.
- Quick View uses Post Type set to Product, and its icon or button is styled in the widget’s Style tab to match the rest of the product card.

A custom-built product card (via Product Listing's skin editor) needs its Quick View trigger placed and styled to match the rest of the card, not left in a fixed default position.

The **Quick View** widget can be dropped directly inside a custom Product Listing skin template, exactly like the Woo Compare and Woo Wishlist buttons.

For the full settings tour of every Woo Builder widget, see [Woo Builder Settings Overview](https://theplusaddons.com/docs/woo-builder-settings-overview/).

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

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/woocommerce-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Prerequisite:** [WooCommerce](https://wordpress.org/plugins/woocommerce/) installed and active, with at least one published product.- **Edition:** all Woo Builder widgets are part of **The Plus Addons for Elementor Pro** - a Pro licence is required.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Quick View** and turn its toggle on.- A custom Product Listing skin template already built, and a product to preview - for example "Leather Card Wallet" on this site.

## Steps

- Open your custom Product Listing skin template for editing.- Add the **Quick View** widget at the position within the card where you want the trigger (for example an icon in the corner of the product image).- Set **Post Type** to **Product**.- Style the trigger's icon/button to match the rest of the card using the widget's Style tab.

![Post Type control set to Product](https://theplusaddons.com/wp-content/uploads/2026/09/woo-builder-custom-skin-trigger.webp)

## Settings Overview

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Post Type | Set to Product for a WooCommerce product skin. | Post (change to Product) |

## Not verified

So you know exactly what has and has not been checked:

- Live rendering of the Quick View trigger actually nested inside a built custom Product Listing skin template (as opposed to the widget's Post Type control alone, which is what this doc's screenshot shows) - needs a dedicated Product Listing skin-template fixture, not built in this pass.

## Related Docs

- [How to Add Product & Post Quick View in Elementor?](https://theplusaddons.com/docs/add-product-post-quick-view-in-elementor/)- [How to Add Product Compare Button to a Custom WooCommerce Product Skin in Elementor?](https://theplusaddons.com/docs/add-product-compare-button-to-a-custom-woocommerce-product-skin-in-elementor/)