How to add quick view popups to your product tables
WooCommerce Product Table fully integrates with our Quick View Pro plugin. You can use this to add links or buttons to your product tables which allow customers to view more images, product information and/or purchase options in a quick view popup window.
Why use Quick View Pro with Product Table?
There are lots of benefits to adding WooCommerce quick view popups to your product tables:
- If you have too many variations or add-ons to fit neatly into the table, you can let customers select options and add to the cart from the quick view popup instead.
- You can let customers view an image gallery with multiple images in the quick view popup, without having to access the single product page.
- The quick view popup supports image zoom, so customers can view close up versions of your product images without visiting a separate page.
- It can increase the average order value by keeping customers on the product table page throughout the buying process, encouraging them to buy more products.
- You can show extra product information such as the short description in the quick view popup, without taking customers to the individual product pages.
- If your table is loading slowly due to the number of variations, then you can speed it up by removing the add to cart column and adding quick view popups instead. The variations will load for each individual product when the customer opens the quick view popup, reducing the amount of data being loaded in the product table. This is a simple and effective way to improve performance.
- The quick view popup supports some third party plugins that may not work within the product table itself, such as WooCommerce Product Bundles, WooCommerce Deposits and the variable subscriptions in WooCommerce Subscriptions.
Add quick view buttons to the product table
Once you have installed Quick View Pro, you will have access to a new quick_view column in your product table. This adds a Quick View button for each product. You can use this column in addition or instead of the buy column.
To use this, simply add quick_view to your list of columns. You can find full documentation on how to choose your product table columns in this article.
The following shortcode will show a table with the product image, name, price, quick view button, and add to cart form:
[product_table columns="image,name,price,quick_view,buy"]
Renaming the quick view buttons
If you have added a quick_view column to the product table, then the button text will be 'Quick view' by default. You can change this to anything you like and show/hide the quick view 'eye' icon in the button. For example, you may wish to show a quick view icon in the button without any text, or reword the button text to 'Configure, 'Customize', 'Read More', 'Select Options' or 'Image Gallery' (depending on how you are using the quick view popups).
You can do this on the Quick View Pro settings page at WooCommerce → Settings → Products → Quick view. This will change the quick view buttons globally throughout your store, including in the product table.
Can I add quick view buttons to product tables, but not in the rest of my store?
Some people choose to add quick view buttons to their product tables, but don't require them in other parts of their store such as the main Shop page and product categories.
You can disable the quick view buttons from other parts of your store via the WooCommerce Quick View Pro settings page at WooCommerce → Settings → Products → Quick view. These settings will not affect the visibility of the quick view buttons in your product tables.
Can I use quick view buttons for separate variations?
When using separate variations, where you list each variation on its own row in the table. Variation dropdowns work perfectly in the quick view lightbox, but we don't recommend adding quick view buttons for separate variations.
If you are using the separate variations option, then the quick view lightbox will simply display the product name and price, without any purchase options. The separate variations can only be purchased directly in the product table. This is because the quick view is based on the single product page, which doesn't list variations separately.
If you wish to choose variations from the quick view lightbox then we suggest disabling separate variations and instead, listing each variable product on a row in the table (either with or without an add to cart column). When a customer clicks on the quick view for a product, they can add its variations to the cart. By default, the quick view will display the variations as dropdowns. If you prefer then you can add a product table containing separate variations for that product to the short description, and this will appear in the quick view lightbox with add to cart buttons for each variation.
Replace links to product pages with a quick view
You can also replace all links to the single product page with quick view links. Customers can normally click on the name column to access the single product page. You can change this so that clicking the product name will open the quick view instead.
Go to the Product Table settings page at WooCommerce → Settings → Products → Product tables and enable the Replace links to the product page with a Quick View option. This will replace all links to the single product page in the product table, including:
- Columns which link to the single product page - you can control this using the links option.
- The add to cart column for any products which cannot be purchased directly from the table. For example, variable products when variations are disabled, or out of stock products.
- The image column. Note: this overrides the image lightbox option.