Adding WooCommerce variation swatches to your WooCommerce Product Tables & Quick View

Today, I'm going to tell you how to add variation swatches to your WooCommerce product tables and quick view lightboxes.

Our WooCommerce Product Table plugin offers a choice of ways to list product variations. You can list product variation swatches for WooCommerce as dropdowns in the add to cart column, or you can list each variation on a separate row in the table. It lets you do all of this without having to use HTML or CSS code.

On the other hand, our WooCommerce Quick View Pro plugin adds user-friendly buttons to your e-commerce store so that customers can read more and add to the cart from a quick view lightbox instead of having to go to the single product page. This prevents them from needing to visit a separate page for each product and simplifies the user flow.

You can use it with the default WooCommerce store layouts, or with customizable product tables.

But what if you want to make your variations more visual, so that customers can select variations by clicking on different swatch types, for example, a color swatch or image swatch? Now you can do this by using our plugins with the fabulous free WooCommerce Variation Swatches plugin.

Get Product Table Get Quick View Get Variation Swatches

What does the WooCommerce Variation Swatches plugin do?

WooCommerce Variation Swatches offers an image swatch-based way to select product variations. It makes the WooCommerce product variations more eye-catching, so that customers can see exactly what they're getting when they click on a variation.

This free WordPress plugin comes with a choice of options for adding different variation swatch types:

• You can use it as a WooCommerce color variation plugin, with each option listed as a color swatch for customers to click on.
• Create unique variation selectors by uploading your own product image or variation image for each variable product. For example, you can upload photos or other variation images to represent each product attribute.
• Alternatively, you can list each available variation option as a button swatch. The attribute name appears as the button text.

If you're looking for WooCommerce color and label swatches, then this is the perfect WP plugin for you.

How does the variation color picker work in WooCommerce Product Table?

When you list variations using the WooCommerce Product Table plugin, there's an option to list variations as a dropdown in the add to cart column. If you use WooCommerce Product Table with the WooCommerce Variation Swatches plugin, then the color swatches, custom images, or buttons will appear underneath the dropdown for each variation in the table.

All you have to do is go to Pages → Add New and insert the WooCommerce Product Table shortcode [product_table] to display the product variations. You can also replace the default WooCommerce shop page with the product table. It will look something like this on the front-end:

In this screenshot, you can see a WC product with 2 global attributes - the Color attribute and the Size attribute:

• The 'color' dropdown has variation color swatches underneath so that customers can click a color instead of using the dropdown.
• The 'size' dropdown has buttons underneath, making it easier for customers to choose their size.

See it in action on our product table variation swatches demo page!

When you click on a color or size swatch of a variable product, the correct variation is instantly selected in the dropdown i.e. it's an AJAX variation. It works beautifully with the built-in Woo stock control and inventory management. Plus, customers don't have to hover over the image to see the available variations. Out of stock variations are visually crosses out (e.g. 'Large' in the screenshot above), so you can instantly see which combinations are available. The stock indicators update as soon as you select a variation, for example if you select 'Pink' in the above example then Large might be shown as available even though it's out of stock in 'White'.

Once you have selected a variation that is in stock from the shop page, you can add it to the cart and purchase using the WooCommerce checkout.

Does it work with separate variations in the product table?

WooCommerce Product Table also comes with an option to list each variation on its own row in the table. This doesn't work with the variation color swatches plugin because each variation is already separated out onto individual rows. The customer simply needs to use the add to cart buttons to add each variation to the cart, and they don't need to use color swatches or buttons.

How do variation swatches work in WooCommerce Quick View?

When you use variation swatches and WooCommerce Quick View Pro together, the swatches automatically appear in the quick view lightbox. This replaces the default variation dropdowns, so the customer must click on a swatch button, color or image in order to select the variation. They can click the add to cart button as usual.

Do product tables and quick view work with other variation swatches for WooCommerce plugins?

We have tested with Woo Product Table and Quick View with a few other WooCommerce variation swatches plugins and this is the only one that we have found to work nicely in the product table – no HTML code or CSS styling needed.

We therefore recommend using WooCommerce Product Table with the free or premium versions of WooCommerce Variation Swatches, and not similar plugins from other companies. It's incredibly easy to configure the plugin's global settings and get started with.

It's compatible with WooCommerce themes (like Storefront, Divi, and Flatsome) as well as page builders like Elementor. Plus, your product tables will look great on mobile devices.

WooCommerce Quick View Pro also works with the WooCommerce Variation Swatches plugin by Get Woo Plugins, so you can use it with either of these.

Get Product Table Get Quick View Get Variation Swatches