How to Add a Product Lightbox or Quickview to Your WooCommerce Store

This guide will provide you with step-by-step instructions for adding a WooCommerce product lightbox or quickview to your online store. We’ll also look at why this is important for increasing revenue and improving customer experience.

The plugin mentioned in this guide is available as part of our All Access Bundle, offering a massive 91% discount:

  • WooCommerce Quickview – Make it easy for your customers to view and add products to their cart, directly from the product listing pages.

Instant Access to All of our WooCommerce Plugins

Save $1000s on our full collection of WooCommerce plugins. Everything you need for your WooCommerce store.

Get the bundle
Instant Access to All of our WooCommerce Plugins thumbnail

If you want to jump to certain points in the article, just click on one of the following links:

Why a WooCommerce product lightbox increases revenue

Put simply, a product lightbox or ‘quickview’ makes it easier for a potential customer to view product information and then add that product to their cart. 

When used well, the reduction in the number of clicks a customer has to make increases the chance of them purchasing. Not only that but if they remain on the shop page, rather than clicking through to the product page, they can keep shopping. As a result, they will increase your average order value as they can purchase more easily from your store.

Here are a few other added benefits:

  • Customers can add products to their cart, directly from the product listing pages.
  • They can easily browse the product gallery without clicking through to the product page.
  • Customers can also use the WooCommerce Quickview to quickly compare similar products without opening multiple tabs.

We’ve outlined why adding a WooCommerce product lightbox is important for your online store, so now it’s time to get it up and running. 

How to add a quick view or product lightbox to your WooCommerce store

The following are step-by-step instructions for adding this feature to your WooCommerce store using a WooCommerce Quickview plugin.

WooCommerce Quickview allows you to add a product lightbox to product listing pages, making it easy for your customers to view and add products to their cart.

To get started, purchase WooCommerce Quickview from the Iconic store: https://iconicwp.com/products/woocommerce-quickview/

Then follow these steps:

  1. Go to Plugins > Add New > Upload Plugin
  2. Choose the zip file you downloaded, upload, and then click ‘Activate’
  3. Once activated, you’ll need to enter your licence key
woocommerce license

Now that we have WooCommerce Quickview installed, we can utilise it in your online store. 

How to customise the WooCommerce Quickview button

woocommerce quickview button

Customising how and where your Quickview button appears is simple. First, we need to decide how we want the lightbox to show:

  1. Go to WooCommerce > Quickview
  2. Click the ‘Quickview Trigger Settings’ tab

It’s at this stage you can pick whether you want to display your product lightbox on hover (when the user’s mouse moves over the product) or with a Quickview button.

woocommerce quickview

Next, we need to activate the button and adjust the settings so that it blends in nicely with your online store.

  1. Scroll down the page and until you get to the ‘Positioning’ section.
  2. Click the ‘Automatically insert Button’ checkbox – this will automatically add the Quickview button to your online store.
    1. If you’d like to add the button into your store manually, you can see our documentation here: docs.iconicwp.com/manually-insert-the-quickview-button
  3. Next, you can adjust the settings of where your button is displayed and how much space it has around it by adjusting the ‘Button position’, ‘Button align’ and ‘Margins’ settings.
woocommerce product lightbox settings

Your button is now positioned and ready to be styled to suit your online store’s branding.

  1. Scroll down to the ‘Styling’ section on the same page.
  2. In this section, you can give your Quickview button an icon, change the wording, colours and style.
  3. Once you’ve styled your button, click the ‘Save Changes’ button at the bottom of the page.

We’ve activated WooCommerce Quickview and styled it to blend with your existing store and theme. Now it’s time to adjust the settings of the Quickview, or lightbox itself.

How to customise the WooCommerce Quickview lightbox

woocommerce product lightbox

Customising the lightbox or popup element of WooCommerce Quickview means that you can tailor your customer’s experience. In order to blend it seamlessly with your online store, go through the following settings:

  1. Click the ‘Popup Settings’ tab.
  2. In the ‘General’ section, you can choose to allow customers to navigate between different products when the lightbox is open.
  3. The ‘Imagery’ section allows you to adjust the settings for your product image gallery, including how fast it scrolls, the buttons you want to use and more.
  4. Next is the ‘Content’ section. It’s here that you can add or remove almost any element of the lightbox. Don’t want the product quantity showing? Remove it.
  5. Once you’ve adjusted all the settings on this page to your liking, click the ‘Save Changes’ button and visit your product listing page to see your new product lightbox in action.
woocommerce quickview settings

Download WooCommerce Quickview

Use Iconic WooCommerce Quickview to add a product preview lightbox to your online store.

Get the plugin
Download WooCommerce Quickview thumbnail

So there we have it, your online store now has a more up-to-date and seamless way for customers to view products. 

Round-up

In this guide, you’ve learned why a WooCommerce product lightbox is a must for your online store and how to set one up quickly and easily with WooCommerce Quickview. 

Tweaking your store for better customer experience will reward you in the long run. By making the buying experience simpler and quicker, customers will be able to explore your store and make purchases without friction. Which also means the likelihood of them buying more also increases.

Sell your products in blog posts, about pages and more with WooCommerce Quickview and a simple sortcode.Click To Tweet

Plugins featured in this guide:

  • WooCommerce Quickview – Make it easy for your customers to view and add products to their cart, directly from the product listing pages.

Interested in getting WooCommerce Quickview and some of our other plugins at Iconic? The plugin mentioned in this guide is available in our All Access Bundle with a huge 91% discount:

Instant Access to All of our WooCommerce Plugins

Save $1000s on our full collection of WooCommerce plugins. Everything you need for your WooCommerce store.

Get the bundle
Instant Access to All of our WooCommerce Plugins thumbnail

Leave a Reply

Your email address will not be published. Required fields are marked *