Button, image and color swatches are added by the plugin Variation Swatches for WooCommerce https://wordpress.org/plugins/woo-variation-swatches/
The plugin is not bundled. Instead, it works with the free version from the WordPress repository. But everything displayed on the demo site is possible with the free version.
The color/image swatches work with the default WooCommerce attributes. Let’s see an example.
Product > Attributes setup
In the following list the attribute is named Color. But it could be any other name.
Edit your attribute and select type Color (or Image if you want to add an images instead of a plain color)
If you selected the image Type instead, you will be able to upload an image for the swatch.
Attributes > Terms
Then, edit the attribute terms and select the color for each one
Add variations to products
Assign the Color attribute to your product and select the terms. Use the attribute as variation:
Finally add the variation details. You can add a new product image per variation.
The color/image swatches work like other variation. Product variations are part of the WooCommerce core functionality. The only difference is in the options presentation.
Display swatches on shop/categories
Variation Swatches FREE Version
Go to Appearance > Customize > Shop > Sidebar Filters & Variations and enable Display color/image swatches in catalog
This option is for Variation Swatches for WooCommerce FREE version only.
Variation Swatches PRO Version
If you are using the PRO version go to the Swatches settings go to Swatches > Archive/Shop and enable Show swatches on archive / shop page.
Then, go to Appearance > Customize > Shop > Products Catalog and enable the option Add to Cart always visible