Showing variation swatches for the Shop/Archive Pages is super easy with the Smart Swatches Pro plugin.
1) From your WordPress Dashboard Menu, navigate to Smart Swatches > Shop Page.
2) Here you will find the Shop/Archive Page Swatches option. Enable it. Other options will appear below for the configuration.
3) The final output with the default configuration would be something like below: