There are two steps in the tutorial:
- Step 1 - Install the plugin Wonder Quick View and Variation Swatches for WooCommerce
- Step 2 - Configure the variation swatches plugin to show color or image selections
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.
2. In the Edit Attribute page, select a type.
3. Go back to the Attributes page, then click Configure terms of the attribute.
4. If you have configured the attribute type as Color, you can edit the term and select a color.