{"id":8592,"date":"2019-06-18T11:40:58","date_gmt":"2019-06-18T11:40:58","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=8592"},"modified":"2024-08-13T08:42:59","modified_gmt":"2024-08-13T08:42:59","slug":"how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/","title":{"rendered":"How to Create a Product Quick View Popup with Click on Widget Trigger Event"},"content":{"rendered":"\n

Receiving the details about an item from a popup window is much more convenient for the customer than switching to a separate page. That’s why “Quick View<\/strong>” buttons are so popular on online store websites. To create a popup with the details about the product you will additionally need a JetPopup plugin, so make sure you installed it.<\/p>\n\n\n\n

Create a Popup<\/h2>\n\n\n\n
\n

First of all, open your WordPress Dashboard and go to the JetPopup > Add New Popup<\/em><\/strong> submenu.<\/p>\n\n\n\n\"JetPopup\n\n\n\n

Give your popup a name, and click the “Publish” button. Afterward, hit the “Edit with Elementor<\/strong>” button.<\/p>\n\n\n\n\"add\n\n\n\n

Pay attention that we leave this popup empty, although, we still have to enable the Loading content with Ajax<\/strong> and Force Loading<\/strong> toggles in the JetPopup Settings<\/strong>, which you can find if you click the gear icon at the very bottom-left corner of the Elementor<\/strong> panel.<\/p>\n\n\n\n\"Jetpopup\n\n\n\n

Click the “Update<\/strong>” button and go back to the WP Dashboard.<\/p>\n<\/div><\/div>\n\n\n\n

Create a Single page template<\/h2>\n\n\n\n
\n

Proceed to the JetPlugins > Jet Woo Template<\/em><\/strong> menu tab and click the “Add New Template<\/strong>” button at the top to create a new template.<\/p>\n\n\n\n\"add\n\n\n\n

In This template is for:<\/strong> dropdown select the “Single” option. Then, give your template a name in the Template Name<\/strong> text field and click the “Create Template<\/strong>” button.<\/p>\n\n\n\n\"add\n\n\n\n

We have to fill this template the way we want our future quick view to look like. It can be an image of the product displayed with the help of the Single Image<\/strong> widget, the name of the product displayed with the help of Single Title<\/strong> widget, some metadata such as SKU, categories; the price, the description, the add to cart button, etc.<\/p>\n\n\n\n\"single\n\n\n\n

Click the green “Publish<\/strong>” button to save the changes.<\/p>\n<\/div><\/div>\n\n\n\n

Create Archive template<\/h2>\n\n\n\n
\n

Exit to Dashboard. Open JetPlugins > JetWooTemplates<\/strong> <\/em>and click the “Add New Template<\/strong>“. Choose the “Archive” type of template. Select the pre-made layout.<\/p>\n\n\n\n\"add\n\n\n\n

Drag and drop the Button<\/strong> widget to the working area. Open the Advanced Settings<\/strong> tab and unfold the JetPopup<\/strong> accordion block. Here you have to turn the Jet Woo Builder Quick View<\/strong> toggle on.<\/p>\n\n\n\n\"button\n\n\n\n

In the Attached Popup<\/strong> dropdown, choose the empty popup template you have created beforehand. Please make sure to select the “Click on Widget” option in the Trigger Type<\/strong> menu feature. <\/p>\n\n\n\n

Move down to the Template<\/strong> dropdown, where you have to select the template of a Single page you have created earlier. When this is done, click the “Publish<\/strong>” button.<\/p>\n<\/div><\/div>\n\n\n\n

Add Products Loop to the Shop page template<\/h2>\n\n\n\n
\n

Open JetPlugins > Jet Woo Templates<\/strong> <\/em>and create a Shop page template. If you have any problems with that – check out our Shop creation tutorial<\/a>. Be aware, that it has to contain a Products Loop<\/strong> widget, so if you haven’t done that before, add it now. Assign the created template to the websites page in the WooCommerce > Settings<\/em><\/strong> <\/em>menu window.<\/p>\n\n\n\n

In the same window move further to the Product Archive<\/strong> section and tick the Custom Product Archive<\/strong> option so that you are able to assign a custom archive page. Finally, select the created archive template in the Product Archive Template<\/strong> dropdown and click the “Save<\/strong>” button at the bottom of the page to save all the changes. <\/p>\n\n\n\n

Now you should proceed to the General<\/strong> block and choose the Elementor Default<\/strong> template.<\/p>\n\n\n\n\"WooCommerce\n<\/div><\/div>\n\n\n\n

Add Products Grid to the Shop page template<\/h2>\n\n\n\n
\n

There\u2019s also an opportunity to add Quick View to the Products Grid<\/strong> widget. <\/p>\n\n\n\n

Firstly, you need to add the Products Grid to your Shop page. In the General settings block enable the Show Quick View option. <\/p>\n\n\n\n\"enabling\n\n\n\n

Then, go to the Advanced settings > JetPopup<\/em><\/strong> and select your empty popup. The next step is to choose Click on Custom Selector Trigger Type and add the following custom selector – .jet-quickview-button <\/em><\/p>\n\n\n\n\"configuring\n\n\n\n

Don\u2019t forget to enable the JetWooBuilder Quick View option and select the needed template below. <\/p>\n\n\n\n\"choosing\n<\/div><\/div>\n\n\n\n

Now go to your shop page and see what it looks like!<\/p>\n","protected":false},"excerpt":{"rendered":"

From this tutorial, you will learn how to create a quick product view using JetWooBuilder and JetPopup plugins.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[484,523],"yoast_head":"\nHow to Create a Product Quick View Popup with Click on Widget Trigger Event | Crocoblock<\/title>\n<meta name=\"description\" content=\"Study a step-by-step guide on how to combine JetPopup with jetWooBuilder plugin by Crocoblock to display a quick view functionality for products.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Product Quick View Popup with Click on Widget Trigger Event | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Study a step-by-step guide on how to combine JetPopup with jetWooBuilder plugin by Crocoblock to display a quick view functionality for products.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-13T08:42:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/jetpopup-menu.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/\",\"name\":\"How to Create a Product Quick View Popup with Click on Widget Trigger Event | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-18T11:40:58+00:00\",\"dateModified\":\"2024-08-13T08:42:59+00:00\",\"description\":\"Study a step-by-step guide on how to combine JetPopup with jetWooBuilder plugin by Crocoblock to display a quick view functionality for products.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Product Quick View Popup with Click on Widget Trigger Event\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Product Quick View Popup with Click on Widget Trigger Event | Crocoblock","description":"Study a step-by-step guide on how to combine JetPopup with jetWooBuilder plugin by Crocoblock to display a quick view functionality for products.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Product Quick View Popup with Click on Widget Trigger Event | Crocoblock","og_description":"Study a step-by-step guide on how to combine JetPopup with jetWooBuilder plugin by Crocoblock to display a quick view functionality for products.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/","og_site_name":"Help Center","article_modified_time":"2024-08-13T08:42:59+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/jetpopup-menu.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/","name":"How to Create a Product Quick View Popup with Click on Widget Trigger Event | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-18T11:40:58+00:00","dateModified":"2024-08-13T08:42:59+00:00","description":"Study a step-by-step guide on how to combine JetPopup with jetWooBuilder plugin by Crocoblock to display a quick view functionality for products.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-product-quick-view-popup-with-click-on-widget-trigger-event\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create a Product Quick View Popup with Click on Widget Trigger Event"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/8592"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=8592"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=8592"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=8592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}