---
title: "Product: Quickview Button Block"
source: "https://docs.nexcess.com/software/kadence/product-quickview-button-block/"
description: "The Quick View Block adds a Quick View button to WooCommerce products. When selected, a modal opens with product details like the image, price, and add-to-cart…"
vertical: "Software"
area: "Kadence"
date: "2025-12-30"
last_modified: "2026-07-02"
---

# Product: Quickview Button Block

The **Quick View Block** adds a **Quick View** button to WooCommerce products. When selected, a modal opens with product details like the image, price, and add-to-cart option. This lets shoppers preview products without leaving the current page. Quick View helps shoppers compare products faster and keeps them browsing longer.

![Product Quickview Demo](https://docs.nexcess.com/wp-content/uploads/2026/06/Product-Quickview-Demo.gif)This document covers the Product Quickview Button Block. For a full overview of Shop Kit Quickview, refer to the [official Product Quickview document](https://docs.nexcess.com/software/kadence/product-quickview/).

Table of Contents

- [Using the Quick View Block in WooCommerce Templates](#using-the-quick-view-block-in-woocommerce-templates)
- [Using the Quick View Block on Pages or Posts](#using-the-quick-view-block-on-pages-or-posts)

**Before You Begin**

Before using the **Quick** **View** **Block**, you must have at least the following plugins on the website:

- **[WooCommerce](https://wordpress.org/plugins/woocommerce/)**
- **[Kadence Shop Kit](https://docs.nexcess.com/software/kadence/install-activate-kadence-shop-kit/)**

*Shop Kit can be purchased as a stand-alone product or in a Kadence plan [here](https://www.kadencewp.com/kadence-shopkit/pricing/).*

Enabling the Product: Quickview Block

The Quick View Block must be enabled in Kadence Shop Kit settings before it can be added to layouts.

- In the WordPress dashboard, go to **Shop Kit > Product Quickview**.
- Enable the option labeled **Quickview Block**.

![Enable Quickview](https://docs.nexcess.com/wp-content/uploads/2026/06/Enable-Quickview.jpg)

Once enabled, the Product: Quick View block becomes available in the block editor.

![Product Quickview Button](https://docs.nexcess.com/wp-content/uploads/2026/06/Edit-Woo-Templates-Shop-page-‹-Cooking-courses-—-WordPress-2025-12-19-at-8.26.13-PM.jpg)

## Using the Quick View Block in WooCommerce Templates

The Quick View Block is designed to work inside WooCommerce product loops *(Such as in Woo Templates)* and automatically displays a dynamic Quick View button for each product.

**Supported templates include:**

- **[Product Catalog Loop Item templates](https://docs.nexcess.com/software/kadence/product-catalog-loop-item-woo-templates/)**
- **[Product Archive Woo templates](https://docs.nexcess.com/software/kadence/product-archive-woo-templates/)**
- [Query Loop (Adv) Blocks](https://docs.nexcess.com/software/kadence/blocks/advanced-query-loop-block/)

**This setup works well for:**

- Shop pages
- Product category and tag archives

Just add the **Product: Quickview Button block** to the desired template, and the block will handle the rest.

![Product Quickview Button Block](https://docs.nexcess.com/wp-content/uploads/2026/06/Product-Quickview-Button-Block.jpg)

## Using the Quick View Block on Pages or Posts

The Quick View Block can also be used outside of WooCommerce templates, such as on landing pages or promotional sections.

**How to add it:**

1. Open a page or post in the block editor
2. Add the **Product: Quick View** block
3. Use the **Block** **Settings** to configure the **Product** **ID**.

![Using Quickview on Pages](https://docs.nexcess.com/wp-content/uploads/2026/06/Using-Quickview-on-Pages.gif)

This allows you to highlight products with Quick View functionality in custom content areas.

**Best Practices**

- Place the Quick View Block inside product loops for consistent shop layouts.
- Use Quick View on landing pages to highlight featured or promotional products.
- Pair Quick View with clear product images and descriptive product titles.

**Related Resources**

- [How to Install and Activate Kadence Shop Kit](https://docs.nexcess.com/software/kadence/install-activate-kadence-shop-kit/)
- [Product Templates (Woo Templates)](https://docs.nexcess.com/software/kadence/product-templates/)
- [Product Catalog Loop Item Templates (Woo Templates)](https://docs.nexcess.com/software/kadence/product-catalog-loop-item-woo-templates/)