How to show product variation swatches in WooCommerce quick view popup

Last updated on

This tutorial will guide you how to show product variation swatches in the WooCommerce quick view popup by using the plugin Wonder Quick View and Variation Swatches for WooCommerce.

There are two steps in the tutorial:

You can check the online demo at WooCommerce Quick View Demo, the product "Ship Your Idea".

Step 1 - Install the plugin Wonder Quick View and Variation Swatches for WooCommerce

Wonder Quick View is a premium plugin, you can download the 30-day trial version from the plugin home page https://www.wonderplugin.com/woocommerce-quick-view/, try it, make sure it works for you before upgrading to the Pro version.

You can download the free version of Variation Swatches for WooCommerce at https://wordpress.org/plugins/woo-variation-swatches/.

Step 2 - Configure the variation swatches plugin to show color or image selections

After you have installed and activated the two plugins, the variation swatches in the quick view popup will work straight away.

By default, the variation selections will display as buttons. To change the buttons to colors or images, you can take the following steps:

1. In your WordPress dashboard, go to the left menu Products -> Attributes, hover the mouse over the attribute title, then click the Edit link.

edit-attribute

2. In the Edit Attribute page, select a type.

attribute

3. Go back to the Attributes page, then click Configure terms of the attribute.

configure-terms

4. If you have configured the attribute type as Color, you can edit the term and select a color.

edit-term