How to show variant swatches on product items?

In order to display variant swatches one product items on the shop page, you can follow these steps below: 

Step 1 – Create attribute: You require to create a color attribute. You can refer to this document to be aware how to create it.

Step 2 – Activate plugin: now you need to activate the Variation Swatches for WooCommerce – Pro plugin. Going to Plugin > Search for Variation Swatches for WooCommerce – Pro and activate it.

Step 3 – Set up in plugin: From your Dashboard, Going to Swatches Setting > Archive / Shop. In Enable Swatches section, check the box of Show Swatches on Archive / Shop page.

Step 4 – And then, in order to set up Item Styling, Item Hover Styling and Item Select Styling, you can go to Style section.

Step 5 – If you want your site to be like the demo, you need set up Single Variation Image Preview and Catalog Mode in the Special Attributes section as following: 

Step 6 – Finally, click Update to save the changes.

Was this page helpful?