Step 1 — First of all, open your WordPress Dashboard and go the JetPopup > Add New Popup block.
Step 2 — Give your popup a name, e.g. A Quick View Popup, and click the Edit with Elementor button.
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.
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.
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.
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.
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.
Step 11 — Drag and drop the Button widget on the working area. Open the Advanced Settings tab > JetPopup accordion block.
Step 12 — Here you have to toggle the Jet Woo Builder Quick View option to Yes.
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.
Step 16 — Find the Products Loop widget in the Elementor panel, drag and drop it to the page. Publish the template.
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.
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.
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.
Step 20 — Now you should proceed to the General block and choose the Elementor Default template.
Step 21 — Now go to your shop page and see how it looks like!
Well done! Hope, it was a helpful tutorial.