How To Create A WooCommerce Product Lightbox
Improving your online store’s interface and user flow is one of the easiest ways to increase conversions. Think of it this way: when a customer lands on your site, you want them to be able to find the products they’re looking for as quickly as possible. Right?
With a WooCommerce product lightbox plugin, you can make it easier for visitors to learn more about your products, select available options, and add them to their shopping cart. You can do just that – and much more – with the WooCommerce Quick View Pro plugin! It’s the easiest way to let customers open product images, galleries, details, and purchasing options in a lightbox view.
In this article, I’ll show you exactly how to use a WooCommerce product lightbox plugin to implement quick view functionality in your WooCommerce store. I’ll also explain how you can take things a step further and display products in a table layout. By the time you’re done reading this article, you’ll have a clear idea on how to let shoppers open products in a lightbox quick view box.
Let’s get started!
Why you need a WooCommerce product lightbox plugin
If you have a WooCommerce store then normally, the only way to learn more about each product is to visit an individual page for that product. Having a WooCommerce product lightbox plugin installed on your online store gives you the option to:
- Let customers open product images (including galleries) and product details in a lightbox.
- Allow customers to select available product options and add products to their cart.
The quick view lightbox can be configured to display information like:
- The product image.
- Full product gallery (if available).
- Short product description.
- Product variations and attributes.
- Quantity picker.
- Add to Cart buttons.
- Additional product information including price, reviews, categories, tags, and SKU.
Now that we have a clear understand of why you might want to use a WooCommerce product lightbox plugin on your online store, let’s take a look at how the WooCommerce Quick View Pro plugin lets you do just that.
Introducing the WooCommerce Quick View Pro plugin
WooCommerce Quick View Pro is a product lightbox plugin that makes it easy to add quick view functionality to any Woo-powered store.
You can use it to add Quick View buttons directly to your main shop page or category pages. The plugin also integrates seamlessly with WooCommerce Product Table for products that are best presented in a table layout – more on this later.
With the WooCommerce Quick View Pro plugin, you’re able to:
- Let customers open products in a lightboxWhen a customer clicks on the product or Quick View button, it will launch a quick view lightbox containing the product image. Customers can then hover over the image for a smooth zoom effect.
- Show the entire product gallery in the lightboxYou can also choose to display the entire product gallery in the lightbox. Customers can slide between different images in the gallery and view them with an image zoom effect.
- Display product details and purchase options in a lightbox The plugin also gives online store owners the option to display product details (such as product description, price, and reviews) in the quick view lightbox along with purchase options (such as quantity picker and Add to Cart button).
WC Quick View Pro acts as a WooCommerce product lightbox plugin allowing customers to open products in a lightbox.
For more ideas on how to use a WooCommerce product lightbox plugin on your own online store, be sure to check out some example use cases!
How to create a WooCommerce product lightbox using WooCommerce Quick View Pro
In this section, I’ll show you how you can use the WooCommerce Quick View Pro plugin to let customers:
- Open images (including the full photo gallery) in a product lightbox.
- View product details and purchasing options in a lightbox.
For the purpose of this tutorial, I’ll assume you already have a Woo-powered online store with some products added to it.
Step #1: Install and activate WooCommerce Quick View Pro
The first thing you need to do is get the WooCommerce Quick View Pro plugin and install and activate it to your WP website. Once that’s done, you need to activate the plugin license key. Here’s how:
Head over to WooCommerce -> Settings -> Products -> Quick view from the admin panel and find the License key option.
Enter your license key (that you received in the email upon purchase) and click the Save changes button to proceed.
By default, the plugin adds Quick View buttons to the main shop page and category pages on your online store. Here’s an example of what it looks like:
You’ll notice that the plugin displays the product’s description, image gallery, price, reviews, and meta data in the lightbox view.
Next, I’ll show you how to customize what is displayed in the WooCommerce product lightbox.
Step #2: Choose how customers open the WooCommerce product lightbox
Navigate to WooCommerce -> Settings -> Products -> Quick view from the WP dashboard and scroll down till you reach the Options section.
You can choose to lets customers open the WooCommerce product lightbox by:
- Using the Quick View button that’s positioned directly under each product.
- Clicking on the product’s name or image.
If you decide to go with the first option (i.e. using the Quick View button), you can also change the button text and turn the button icon on or off.
Pro tip: By default, clicking on the product’s name or image will direct customers to the single product page. If you’d like to disable this option, make sure the Open from product name/image checkbox is ticked.
Step #3: Display product image (and full product gallery) in the product lightbox
The WooCommerce Quick View Pro plugin lets you choose what information you’d like to display in the product lightbox. First, I’ll show you how to the controls for displaying the product image (along with the full product gallery) in the WooCommerce product lightbox.
Start off by using the Quick View contents option to decide whether you want image only, product details only, or both image and product details to appear in the product lightbox.
If you decide to go with Image only, your WooCommerce product lightbox might look something like this:
However, if you’d like to display both images (with full gallery) and product details, make sure to select the Image and product details option from the dropdown menu.
Step #4: Choose which product details to display in the WooCommerce product lightbox
If you decided to go with the Image and product details option in Step #3, you can use the Product details option to select which product details appear in the quick view lightbox. The available options you can pick from include:
- Short description
- Add to Cart button
- Meta information (such as categories and SKUs)
For example, if you wanted to display only the reviews and price for your products, your WooCommerce product lightbox might look something like this:
And if you wanted to allow customers to be able to add products to their cart directly from the quick view lightbox, you would select the Show add to cart button option. It would look something like this:
Use WooCommerce Quick View Pro with product tables
The WooCommerce Quick View Pro plugin integrates seamlessly with WooCommerce Product Table. This makes it possible for you to list products in an interactive table layout complete with Quick View buttons.
Whenever a customer browses through your product listings, they’ll be able to open up the product image (and full product gallery) in a WooCommerce product lightbox directly from the table.
Depending on your configuration settings, customers can open the product lightbox by clicking on the Quick View buttons or by clicking on the product name (or image).
When both plugins are installed and activated, you’ll see a Quick View Pro option added to the WooCommerce Product Table settings screen. By ticking the Product links checkbox, all of the product links that appear in your table layout will open the product lightbox instead of directing customers to single product pages.
What this means is that customers can:
- Click on the product name (or image) or Quick View buttons to open the product lightbox.
- View product details – such as reviews, price, and meta data – in the lightbox without having to navigate to the single product page.
- Add products to their cart directly from the product lightbox.
The plugin replaces links to the single product page with product lightboxes. As a result, customers can get information directly from the table. This is much better than having to navigate to the single product page.
Where to get the plugin
Adding WooCommerce product lightbox views to your online store is a great way to let customers:
- view product images and galleries,
- product details, and
- purchase options
… without requiring them to visit the single product page.
With WooCommerce Quick View Pro, you’re able to add this functionality to your main shop page and category pages simply by installing the plugin. And if you’ve created product lists using WooCommerce Product Table, you can add flexible product quick view boxes to table in just a few minutes.
Do you have any questions about how to use a WooCommerce product lightbox plugin with your online store? We’re happy to help so let us know in the comments below!