Adding WooCommerce Variation Swatches to Your WooCommerce Product Tables

WooCommerce color variation swatches plugin

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. 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 WooCommerce with the fabulous free WooCommerce Variation Swatches plugin.

GET WOO PRODUCT TABLE 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.

GET WOO PRODUCT TABLE WOOCOMMERCE VARIATION SWATCHES

Does it work with separate variations?

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.

Does it work with other variation swatches and photo plugins?

We have tested with Woo Product Table 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 Product Table

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

GET THE PLUGIN