--- title: "How to Add Product & Post Quick View in Elementor?" url: https://theplusaddons.com/docs/add-product-post-quick-view-in-elementor/ date: 2024-07-02 modified: 2026-06-15 lang: en author: "Aditya Sharma" description: "The quick view option lets visitors preview product or post content without leaving the current page, reducing friction in the browsing experience. With the WP Quick View widget from The..." image: https://theplusaddons.com/wp-content/uploads/2024/07/How-to-Add-Animated-Headings-In-Elementor-1024x570.jpg word_count: 687 --- # How to Add Product & Post Quick View in Elementor? ## - Activates the WP Quick View widget through The Plus Addons for Elementor to enhance user experience on WooCommerce products. - Supports various post types including products, standard posts, and custom post types for quick view functionality. - Utilizes Elementor templates to create custom quick view content for better design flexibility. - Styles the WP Quick View widget using options for icons, loaders, titles, descriptions, buttons, and fancy boxes. The quick view option lets visitors preview product or post content without leaving the current page, reducing friction in the browsing experience. With the WP Quick View widget from The Plus Addons for Elementor, you can add a quick view button to WooCommerce products and to other post types in Elementor. **Best Used For:** - WooCommerce stores that want visitors to preview product details, images, and the add-to-cart button without navigating away from the shop or category page - Blog and portfolio sites that display post listings and want visitors to read a content preview in a popup without losing their place in the listing - Sites with custom post types that need an on-page preview interaction built directly into the Elementor loop skin ## Required Setup - [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated. - You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated. - This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing/?utm_source=tpae&utm_medium=docs&utm_campaign=text). - Make sure the WP Quick View widget is activated, to verify this visit The Plus Addons → Widgets → and Search for WP Quick View and activate. ## How to Activate the WP Quick View Widget? To activate the WP Quick View widget, go to - **The Plus Addons **→** Widgets ** - **Search **the widget name** **and** turn on the toggle.** ![](https://theplusaddons.com/wp-content/uploads/2024/07/tpae-wp-quick-view-activate.png) ## Key Features - **Different Post Types** — Add the quick view button to WooCommerce products, standard posts, and custom post types from a single widget. Use this when your site runs multiple listing types and you want a consistent preview interaction across all of them. - **Elementor Template** — [Create the quick view content with an Elementor template](https://theplusaddons.com/docs/show-quick-view-to-post-content-with-elementor-template/) to control exactly what appears in the popup. Use this when the default popup layout does not match your design requirements. ## How to Use the WP Quick View in Elementor? Add the WP Quick View widget to a page or template depending on where you need the quick view button to appear. From the **Post Type** dropdown, select the post type where you want to add the quick view button. The available options are: ![](https://theplusaddons.com/wp-content/uploads/2024/07/wp-quick-view-content.gif) - **Post** - To add a quick view button to a blog post listing [using the custom loop skin](https://theplusaddons.com/docs/create-custom-loop-skin-for-blog-post-in-elementor/). - **Page** - To add a quick view button to a page listing using the custom loop skin. - **Custom Post Type** - To add a quick view button to a custom post type listing [using the custom loop skin](https://theplusaddons.com/docs/create-elementor-custom-post-type-loop-skin/). - **Product** - To [add a quick view button to a product custom skin loop](https://theplusaddons.com/docs/add-a-quick-view-button-to-a-custom-woocommerce-product-skin-in-elementor/). > *Note: The custom post type option name will depend on the custom post type name and the number of items will depend on the number of custom post types you have.* Select the option that matches your requirements. From the **Quickview** dropdown, select how you want to show the quick view content. The available options are: - **Default** - This will show the content in a default format. - **Custom Template** - With this option, you can show content using an Elementor template. Select the option that matches your requirements. ## How to Style the WP Quick View Widget? To style the WP Quick View widget, go to the **Style** tab. **Quick View Icon** - From here, you can style the quick view icon. ![](https://theplusaddons.com/wp-content/uploads/2024/07/wp-quick-view-style.png) **Quick View Loader** - From here, you can style the quick view loader. **Quick View Title** - This option appears only when Default is selected as the Quickview type in the Content tab. From here, you can style the quick view popup heading. **Quick View Description** - This option appears only when Default is selected as the Quickview type in the Content tab. From here, you can style the quick view popup description. **Quick View Button** - This option appears only when Default is selected as the Quickview type in the Content tab. From here, you can style the button in the quick view popup. **Quick View Fancy Box** - From here, you can style the quick view popup. Advanced options remain consistent across all widgets. You can explore all available settings from here. [View Advanced Tab Tutorial](https://docs.posimyth.com/tpae/advanced-tab/) Also, see [how to add a WooCommerce product wishlist in Elementor](https://theplusaddons.com/docs/add-woocommerce-product-wishlist-in-elementor/).