How to add quick view popups to your product tables
WooCommerce Product Table fully integrates with our other plugin, WooCommerce Quick View Pro. 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 with WooCommerce 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.
How to use Product Table with WooCommerce Quick View Pro
Note: The following instructions will only work if both WooCommerce Product Table and WooCommerce Quick View Pro are installed.
Add quick view buttons to the product table
WooCommerce Product Table comes with a
quick-view column that adds quick view buttons to a new column in the product table. You can either use this column in addition to, or instead of, the
To add a quick view column, add
quick-view to your list of columns. You can find full documentation on how to choose your product table columns in this article. For example, the following list of columns will show columns for product image, name, price, quick view, plus add to cart:
Replace links to the single product page with quick view links
You can replace all the links to the single product page with quick view links. For example, unless you have disabled the links in the product table, then customers can normally click on the name column to access the single product page. You can change this so that clicking on a product name will open up the quick view popup instead.
To do this, go to the WooCommerce Product Table plugin settings page at WooCommerce → Settings → Products → Product Tables and enable the ‘Replace all links to product page with Quick View’ option.
When you enable this option, it will replace ALL links to the single product page in the product table. This includes:
- All 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 product table. For example, this might include variations (if you have not enabled variations) or out of stock products.
- The image column, if you have followed the steps below.
Open quick view by clicking on the product image
By default, clicking on the image column in the product table will open a lightbox containing the main product image. If you would like to open the quick view instead, then you should choose the following settings on WooCommerce → Settings → Products → Product Tables:
- Disable the image lightbox option.
- Enable the ‘Replace all links to product page with Quick View’ option.
- Ensure that the links option is either set to
all(the default), or includes
imagein the list of clickable columns.
How to rename 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 WooCommerce 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 in my 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?
WooCommerce Product Table comes with 2 options for displaying variations in the table: as dropdowns in the add to cart column; or 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.