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.
Finally, click Update to save the changes.