--- title: "Product Quickview" source: "https://docs.nexcess.com/software/kadence/product-quickview/" description: "With the Kadence Shop Kit plugin, you can improve the shopping experience by adding a Quickview Button to your Product Shop and Archive Items. This feature allo…" vertical: "Software" area: "Kadence" date: "2025-01-28" last_modified: "2026-07-02" --- # Product Quickview With the **[Kadence Shop Kit](https://www.kadencewp.com/kadence-shopkit/)** plugin, you can improve the shopping experience by adding a **Quickview Button** to your **Product Shop and Archive Items**. This feature allows users to view detailed product information and add items to their cart without leaving the current page. The **Quickview** functionality includes many features, including some of the ones listed below. - Quickly access product details in a responsive popup modal. - Navigate between products using left/right arrows to view previous or next products in the loop. - Select product variation**s** (where applicable). - Add products directly to their cart, eliminating the need to visit the *Single Product Page*. - Use WooTemplates to fully customize the Quickview Modal. This feature is particularly useful for **improving** the **user** **experience**, **encouraging** **faster** **checkouts**, and making it **easier** for customers to **complete their purchases** with fewer steps. ![Product Quickview Demo](https://docs.nexcess.com/wp-content/uploads/2026/06/Product-Quickview-Demo.gif)Getting Started To get started with **Quickview**, first, ensure that the [**Kadence Shop Ki**](https://docs.nexcess.com/software/kadence/install-activate-kadence-shop-kit/)**[t plugin](https://docs.nexcess.com/software/kadence/install-activate-kadence-shop-kit/)** is activated on your website. Once activated, navigate to the **Dashboard** and go to the **Shop Kit** page. From there, click on the **Product** **Quickview** tab. Within this section, you’ll find the option to *Enable Product Quickview*. Simply toggle the setting to activate this feature, allowing you to display a **Quickview** **Button** on your WooCommerce products. ![Enabling Product quickview](https://docs.nexcess.com/wp-content/uploads/2026/06/Enabling-Product-quickview.gif)Quickview Settings **Automatically Insert Button:** When this option is enabled, the Product Quickview Button can be placed using one of the pre-built placement options. *(See the next setting)*. If this option is disabled, you can use a ShortCode to display the Product Quickview Button dynamically. [Click here](#using-a-quickview-shortcode) to learn more about using a Quickview Shortcode. **Button Placement:** When the Automatically Insert Button setting is enabled, use the Button Placement to determine where the Product Quickview Button will be placed. Below are the available placement options: - Before Add to Cart - After Add to Cart - Before Price - After Price - Before Title - After Title - Before Item - After item **Quickview Button Show Text:** Enable this option to use a Button Text for the Quickview Button. Use the Quickview button Text setting to Set the Text for the Quickview Button. The default text is Quickview. **Add a Button Icon:** Use this option to enable and use a Button Icon for the Quickview Button. The following Icons can be used for this feature: - Play - Eye - Click **Button Icon Color:** Set the Icon Color for the Quickview Button in the normal state. **Button Icon Color Hover:** Set an Icon Hover Color for the Quickview Button when hovering over it. ![Quickview1](https://docs.nexcess.com/wp-content/uploads/2026/06/Quickview1.jpg) **Button Text Color:** Set a Button Text Color for the Quickview Button in the normal state. **Button Text Color Hover:** Set a Button Text Color for the Quickview Button when being hovered over. **Button Background:** Set a Button Background Color for the Quickview Button in the normal state. **Button Background Hover:** Set a Button Background Hover Color for the Quickview Button when hovering over it. **Button Border Width:** Use the Slider or enter a Value to set a Button Border Width for the Quickview Button. The unit of measurement is in pixels and will apply to all sides of the button. ![Quickview2](https://docs.nexcess.com/wp-content/uploads/2026/06/Quickview2.jpg) **Button Border Color:** Set a Button Border Color for the Quickview Button in the normal state. **Button Border Color Hover**: Set a Button Border Hover Color for the Quickview Button when hovering over it. **Button Border Radius:** Use the Slider or enter a Value to set a Button Border Radius. This is measured in Pixels and will apply to all sides of the button. **Allow Scrolling:** Enabling this option allows users to swipe or use arrow navigation buttons to view the previous or next product in the loop. **Use a Woo Template:** Enable this option to Use a Woo Template for the Quickview Popup Modal instead of the default Quickview layout. You can learn more about this feature in the section below. ![Quickview3](https://docs.nexcess.com/wp-content/uploads/2026/06/Quickview3.jpg) Creating a Custom Quickview WooTemplate WooTemplates can be used to create a Custom Quickview Template. To do so, you should first enable Product Templates from the Dashboard -> ShopKit page. Look for the Product Templates option, then use the toggle to enable the feature. ![Product Template](https://docs.nexcess.com/wp-content/uploads/2026/06/Product-Template.jpg)Once **Product** **Templates** are enabled, refresh the page, then navigate to the **Dashboard -> Products -> WooTemplates** Page. Here, you can click on the **Add** **New** **Woo** **Template** button to add a new WooTemplate to the website. Then, select the **Quickview** **Template** option. ![Product Quickview Woo Template](https://docs.nexcess.com/wp-content/uploads/2026/06/Product-Quickview-Woo-Template.gif)The default layout template uses the [Product Gallery Block](https://docs.nexcess.com/software/kadence/product-gallery-block/). This block will also have the WooCommerce Sales Tag enabled. If you are using **[Kadence Product Badges](https://docs.nexcess.com/software/kadence/product-badges/)**, you should disable this setting. ![salet ag](https://docs.nexcess.com/wp-content/uploads/2026/06/saletag-1024x522-1.png) You can use the default layout template to customize it to meet your needs or start from a blank template. Use a combination of Kadence Blocks and WooTemplate Blocks to display dynamic content. Here are some useful blocks to help you get started. - [Product: Gallery Block](https://docs.nexcess.com/software/kadence/product-gallery-block/) - [Product: Title Block](https://docs.nexcess.com/software/kadence/product-title-block/) - [Product: Price Block](https://docs.nexcess.com/software/kadence/product-price-block/) - [Product: Add to Cart Block](https://docs.nexcess.com/software/kadence/product-add-to-cart-block/) - **[Click here](https://docs.nexcess.com/software/kadence/)** to see all of the available **WooTemplate** **Blocks**. ![Adding Wootemplate Blocks](https://docs.nexcess.com/wp-content/uploads/2026/06/Adding-Wootemplate-Blocks.gif)You can also use the standard **Gutenberg** and **Kadence** **Blocks**, along with the **Kadence** **Dynamic** **Content** and other **Block Features**. Allowing you to completely customize the **Quickview** **Popup** **Modal**. ![Dynamic Content in Quickview Templates](https://docs.nexcess.com/wp-content/uploads/2026/06/Dynamic-Content-in-Quickview-Templates.gif)The Quickview Template uses a [Product Short Description Block](https://docs.nexcess.com/software/kadence/product-short-description-block/). This shows a shorter version of the full description. You can use the [Dynamic HTML Block ](https://docs.nexcess.com/software/kadence/dynamic-html-block/)to show the Post Content if you would rather display the entire description ![Full Description](https://docs.nexcess.com/wp-content/uploads/2026/06/Full-Description.gif) Once the WooTemplate is created, click on the Publish Button to save the template. ![Publish Wootemplate](https://docs.nexcess.com/wp-content/uploads/2026/06/Publish-Wootemplate-scaled-1.jpg)Once the WooTemplate is **Published**, navigate back to the **Dashboard -> ShopKit -> Product Overview** page. At the bottom of the settings, enable the option named **Use a WooTemplate**. You will then be able to select your newly created **WooTemplate** as the **Product** **Overview** **Popup** **Modal**. ![Selecting an Overview Template](https://docs.nexcess.com/wp-content/uploads/2026/06/Selecting-an-Overview-Template.gif)Don’t forget to click the **Save** **Settings** button to ensure the settings are saved. Afterward, the **WooTemplate** will be used as the **Overview** **Popup** **Modal**. Using a Quickview ShortCode In some cases, the *Quickview default Placement Options* may not meet your design goals. In this case, you can use the **Quickview ShortCode** to dynamically display the **Quickview Button** for the current product. This can be used in **Product Loop WooTemplates,** **Query (Adv) Blocks**, and anywhere else the current product information can be used within **Blocks**. To display the **Quickview** **Button** of the **Current** **Product**, use the following *ShortCode* inside of a ***Gutenberg ShortCode Block:*** `[kt_quickview_button]` To display a **Specfic** **Product** by **ID**, use the following *ShortCode* inside of a **Gutenberg ShortCode Block**: `[kt_quickview_button id="16"]` In place of `16`, you should use the specific **Product** **ID** you wish to **Quickview**. ![ShortCode Template](https://docs.nexcess.com/wp-content/uploads/2026/06/ShortCode-Template-scaled-1.jpg) ![Quickview Sample Output](https://docs.nexcess.com/wp-content/uploads/2026/06/Quickview-Sample-Output.jpg)