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.