How To Create a WooCommerce Lightbox

June 5, 2019

One of the biggest obstacles consumers face while shopping online is finding product information quickly. In fact, according to a Forrester report, 45% of US online adults will abandon their online purchase if they can’t find a quick answer to their question.

By adding a WooCommerce lightbox with quick view functionality to your online store, you’ll be able to create smooth user flows and deliver a frictionless online shopping experience to your customers. In other words, your customers will be able to find everything they need – products, product details, and pricing information – without having to click through to single product pages.

In this article, we’ll dig deeper into why you might consider using a WooCommerce lightbox plugin on your online store. We’ll also walk you through a step-by-step tutorial to show you how you can create a WooCommerce lightbox with quick view in four easy steps.

Let’s get started!

Why You Need a WooCommerce Lightbox Plugin

As a WooCommerce store owner, you probably already know that customers have to visit individual product pages to learn more about each product. However, this doesn’t always make for an intuitive, user-friendly shopping experience.

With a WooCommerce lightbox plugin, you’re able to let customers:

  • View product images, galleries, and details in a lightbox.
  • Select product options (for example variations and quantities) and add them to their shopping cart.

And the best part is that they can do all of this directly from the main shop page or category pages. You can choose to include information such as the product’s image or gallery, variations and attributes, quantity selectors, add to cart buttons, and additional product details such as its price, reviews, and categories.

As opposed to the default WooCommerce user flow, having a WooCommerce lightbox plugin that also has gallery features allows you to improve your customer’s online shopping experience. It makes it easier to view product images and galleries and quickly find all important WooCommerce product details. This is especially useful for online stores that sell image-centric products such as clothes, jewelry, photography, or gift items.

Here are some of the major benefits of using a plugin to create a lightbox with quick view functionality:

  • Don’t need to edit any php file. Once you install and activate the plugin, it’ll automatically create a quick view lightbox. There’s no need to edit the functions.php file.
  • Custom styling with CSS. You can customize your lightbox to match your brand without having to edit CSS files.
  • Support. You also get access to customer support from the plugin’s developers i.e. Barn2 Media.

How to Use WooCommerce Quick View Pro to Create a Quick View Lightbox

Here’s what you’ll need to create a WooCommerce lightbox with quick view functionality:

  • A WooCommerce-powered store with some products added to it.
  • WooCommerce Quick View Pro — a responsive WooCommerce lightbox plugin.

Step #1: Install and Activate WooCommerce Quick View Pro

Once you’ve purchased the WooCommerce Quick View Pro plugin, log into your WordPress website and install and activate it. Next, head over to the plugin’s settings page (WooCommerce > Settings > Products > Quick view) from the WordPress dashboard.

Activate the plugin license key

Enter the license key you received in the purchase confirmation email in the License key option. Click the Save changes button at the bottom of the screen to proceed.

If you visit your online store’s main shop page, you’ll notice that Quick View buttons have been added directly under the product images. Depending on the theme you’re using, it might look something like this:


And when you click it, it launches a WooCommerce lightbox that displays the product’s image, gallery, name, price, description, SKU, and category.

Step #2: Choose How Customers Launch the WooCommerce Lightbox

With WooCommerce Quick View Pro, you’re able to choose how customers launch the product lightbox. Head over to WooCommerce > Settings > Products > Quick view once again and find the Options section.

You can let customers launch the lightbox either by:

  • Show Quick View button in shop. Clicking the Quick view button directly under each product image. You can also change the button text and choose to show/hide the button icon.
  • Open Quick View by clicking on product name or image in shop. Clicking on the product’s name or image.

You can choose to enable either one of the options or both! It’s also important to keep in mind that, by default, clicking on the product’s name or image will lead customers to the single product page. Enabling the Open Quick View by clicking on product name or image in shop option lets you disable this option.

Step #3: Display Product Images in the Lightbox (With Quick View)

One of the neat features on offer with WooCommerce Quick View Pro is that its lets you choose what you’d like to display in the lightbox.

  • Image-centric products. If you’re selling image-centric products (like clothes, shoes, or jewellery items) you’d want to let customers be able to view product images and galleries in the lightbox with image zoom.
  • Products with specs and details. If you’re selling wholesale products, computer parts, or music, you might want to only display the product details in the lightbox.
  • Customizable products. If you’re selling customizable products or products with variations, you’d want to display both product image and details in the lightbox.

From the plugin’s settings screen, find the Quick View display option and decide whether you’d like to display Image only, Product details only, or Image and product details in the lightbox view.

For example, if you decide to display product details only, your WooCommerce lightbox might look something like this:


And if you decide to display images in the lightbox, you can also choose to display them either as Thumbnails or Bullets. Here’s what your WooCommerce lightbox might look like if you displayed both images and product details with the Gallery thumbnail style option set to Bullets:

Note: If you want to display a product gallery, make sure you add images to the product gallery from the product’s Edit product screen. You can do this for each WooCommerce product you want to display multiple images for.

Add product gallery images from the Edit product screen.

Step #4: Decide Which Products Details to Display

If you choose to display product details (or image and product details) in the WooCommerce lightbox then you also have the option to decide which product details to include in the quick view lightbox.

From the plugin’s settings page, you can use the Product details option to tick which product details appear in the lightbox:

  • Reviews
  • Price
  • Short description
  • Add to cart button
  • Meta information (such as SKUs and categories)

If, for example, you don’t want to display purchasing options, simply leave the Add to cart button checkbox unticked. Your WooCommerce lightbox might look something like this:

Conclusion

A WooCommerce lightbox with quick view allows customers to:

  • Quickly find the product details they’re looking for
  • View product images
  • Select variations
  • Add products to cart

… without having to visit the single product page first.

WooCommerce Quick View Pro allows users to add a lightbox with quick view functionality to their main shop pages and category pages. It also makes it easy to customize the look and feel of the lightbox and how customers interact with it.

Do you agree that a WooCommerce lightbox with quick view functionality improves the customers’ online shopping experience? Share your thoughts in the comments section below!