Adding WooCommerce Variation Swatches to Your WooCommerce Product Tables & Quick View

By Updated: October 28, 2019

WooCommerce color variation swatches plugin

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 variations as dropdowns in the add to cart column, or you can list each variation on a separate row in the table.

WooCommerce wholesale quick view pluginOn the other hand, our WooCommerce Quick View Pro plugin adds user-friendly buttons to your store so that customers can read more and add to the cart from a quick view lightbox. This prevents them from needing to visit a separate page for each product.

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

But what if you want to make your variations more visual, so that customers can select variations by clicking on a color swatch or image? 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-based way to select product variations. It makes 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 your variation swatches:

  • 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 image for each variation. For example, you can upload photos or other images to represent each product attribute.
  • Alternatively, you can list each variation option as a button. The name of the attribute appears as the button text.

If you’re looking for WooCommerce color and label variations, 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.

WooCommerce color picker variations

In this screenshot, you can see a WC product with 2 attributes – color and size:

  • 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, the correct variation is instantly selected in the dropdown. It works beautifully with the built-in Woo stock control and inventory management. 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, you can add it to the cart and purchase using the WooCommerce checkout.

WooCommerce Product Table
Get more sales by listing products in a searchable, sortable table view.

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.

WooCommerce Quick View
The quick and easy way for customers to explore and buy your products.

Do product tables and quick view work with with other variation swatches and photo 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. We therefore recommend using WooCommerce Product Table with the free or premium versions of WooCommerce Variation Swatches, and not similar plugins from other companies.

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

Katie Keith

An active member of the global WordPress community, Barn2 Co-Founder Katie loves collaborating with other plugin companies. Her articles have been published on high profile sites including WPTavern, Torque and IndieHackers. She oversees all plugin support and deals with 'Tier 2' support requests about how to use Barn2's plugins in advanced ways.

Please share your thoughts...

Your email address will not be published.