Steps to add quick view in WooCommerce

Using ShopEngine, a WooCommerce page builder, is the easiest way to add a quick view option to your eCommerce store. Its quick-view module allows you to do that in minutes.

Before following the process, let’s learn the essential sections to include in your quick view popup:

• Product image
• Price
• Description
• Variations like color and size
• CTA

So, here is the step-by-step process to add quick view in WooCommerce:

Step 1: Install the WooCommerce quick view plugin

First, you have to install and activate a quick view solution, ShopEngine. For that, take the following attempts:

• Navigate to Plugins → Add Plugin and search for “ShopEngine”.
• Click the “Install Now” button to install ShopEngine.
• Activate ShopEngine after that.

• Click the “Upload Plugin” button to download ShopEngine Pro.
• Choose a file from your device or media library.
• Install and activate ShopEngine Pro.

Step 2: Enable the Quick View module

In the second step, enable the “Quick View” module of ShopEngine by:

• Visiting ShopEngine → Modules.
• Click on the “Quick View” module.

• Turn on the “Enable the module” toggle.
• Hit the “Save Changes” button.

Step 3: Add a quick view template

Then, create a quick view template with a blank or pre-built design. Add the WooCommerce quick view template by:

• Go to the “Builder Templates” tab and click the “Add New Template” button.
• Configure template settings by filling:
  • Name: Enter the template name.
  • Type: Select template type from the dropdown menu.
  • Applicable Category: Choose a category for the template.
  • Active: Turn on the active button.
  • Sample Designs: Select a pre-built design for Quick view.
• Click the “Edit with Elementor” button.

A new template design tab will pop up from where you have to:

• Select a product from the dropdown menu.
• Press the “Create a New Product” button to add a new product and create a template design following that.
• Click the “Edit with Elementor” button to visit the Elementor editor.

Step 4: Customize the quick view template

In this step, customize the quick-view template to match your brand. For that, you have to:

• Select the section on the right side and customize content and style on the left side.

For example, select the “Product Title” section on the right side, and you can customize:

• HTML Tag: Choose an HTML tag from the dropdown menu.
• Alignment: Select title alignment.
• Title Color: Choose a color for the title.
• Typography: Edit typography for product title.
• Following the similar process, adjust other fields as well.

Step 5: Publish to add quick view 

In the fifth step, hit the “Publish” button to add quick view in WooCommerce.

Step 6: Test the quick view option

After publishing, test how your quick view option looks on the front end. For that:

• Navigate to your shop page.
• Click the “Quick view” button.
• Check how it looks on the popup tab.

FAQs

How to disable Quick View in WooCommerce?

With ShopEngine, turn off the toggle button of the Quick View module from the Builder Templates tab and click the “Save changes” button to disable Quick View in WooCommerce.

Is Quick View mobile responsive and speed optimized? 

Yes, ShopEngine’s Quick View module is a fully device-responsive and lightweight solution.

Wrapping up

This guide is perfect for those who want to add a fast, lightweight, and responsive quick view feature without a complex coding setup. If your focus is on improving the blowing experience, shortening the buying journey, and enhancing the user experience, then ShopEngine’s Quick View module is the right approach.