Back to contents

How to create a product quick view with JetWooBuilder and JetPopup

In this tutorial, you will learn how to create a product quick view with JetWooBuilder and JetPopup plugins by Crocoblock.

Before we start, please, make sure you have the latest JetWooBuilder and JetPopup versions.

Step 1 — First of all, open your WordPress Dashboard and go the JetPopup > Add New Popup block.

new popup with JetPopup

Step 2 — Give your popup a name, e.g. A Quick View Popup, and click the Edit with Elementor button.

name the popup

Step 3 — Pay attention that we leave this popup empty, although, we still have to enable the Loading content with Ajax and Force Loading options in the JetPopup Settings, which you can find if you click the gear icon at the very bottom-left corner of the Elementor panel.

jetpopup in Elementor

Step 4 — Click the Publish button and go back to the WP Dashboard.

Step 5 — Proceed to the WooCommerce > Jet Woo Template option and click the Add New Template button at the top to create a new template.

jetwoobuilder templates

Step 6 — In the This template is for: dropdown select the Single option. Then, give your template a name in the Template Name text field.

jetwoobuilder single template

Step 7 — 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 widget, the name of the product displayed with the help of Single Title widget, some metadata such as SKU, categories; the price, the description, the add to cart button, etc.

jetwoobuilder template setup

Step 8 — Click the green Publish button to save the changes.

Step 9 — Exit to Dashboard and what you have to do now is to create an archive template.

Step 10 — Open WooCommerce > JetWooTemplates and click the Add New Template. Choose the type of template Archive. Select the pre-made layout.

jetwoobuilder archive template

Step 11 — Drag and drop the Button widget on the working area. Open the Advanced Settings tab > JetPopup accordion block.

button widget

Step 12 — Here you have to toggle the Jet Woo Builder Quick View option to Yes.

button widget settings

Step 13 — In the Attached Popup dropdown, choose the empty popup you have created beforehand (steps 1 – 4). Please make sure to select Click on custom selector trigger type to call Quick View button.

Step 14 — Move down to the Template dropdown, where you have to select the template. Once you’ve created an archive template, you have to Publish it.

Step 15 — Open WooCommerce > Jet Woo Templates and click the Add New Template button. Select the Shop option in the This template for: dropdown. Click the Create Template button.

jetwoobuilder shop template

Step 16 — Find the Products Loop widget in the Elementor panel, drag and drop it to the page. Publish the template.

products loop widget

Step 17 — Now go back to the WP Dashboard and navigate to the WooCommerce > Settings option. Here you have to open the JetWooBuilder tab and scroll down to the Shop Page section.

woocommerce settings

Step 18 — Tick the Custom Shop Page option in order to be able to assign a custom shop page. Next, in the Product Shop Template select the needed template.

custom shop page option

Step 19 — The last step is to move further to the Product Archive section and tick the Custom Product Archive option so that you are able to assign a custom archive page. Finally, select the archive template in the Product Archive Template dropdown and click the Save button at the bottom of the page to save all the changes.

product archive option

Step 20 — Now you should proceed to the General block and choose the Elementor Default template.

Ajax Serch Widget

Step 21 — Now go to your shop page and see how it looks like!

quick view on the frontend

Well done! Hope, it was a helpful tutorial.