How to Display Variations with Color (or Size) Buttons

add_filter( 'product_attributes_type_selector', 'rudr_add_attr_type' );

function rudr_add_attr_type( $types ) {
	
	// let's add a color here!
	$types[ 'color_type' ] = 'Color'; // "color_type" // is just a custom slug
	return $types;
	
}

<?php
add_action( 'pa_color_edit_form_fields', 'rudr_edit_fields', 10, 2 );

function rudr_edit_fields( $term, $taxonomy ){

	// do nothing if this term isn't the Color type
	global $wpdb;

	$attribute_type = $wpdb->get_var(
		$wpdb->prepare(
			"
			SELECT attribute_type
			FROM " . $wpdb->prefix . "woocommerce_attribute_taxonomies
			WHERE attribute_name = '%s'
			",
			substr( $taxonomy, 3 ) // remove "pa_" prefix
		)
	);

	// if it is not a color attribute, just do nothing
	if( 'color_type' !== $attribute_type ) {
		return;
	}

	// otherwise let's display our colorpicker field
	// we can use attribute type as a meta key why not
	$color = get_term_meta( $term->term_id, 'color_type', true );

	?>
		<tr class="form-field">
			<th><label for="term-color_type">Color</label></th>
			<td><input type="text" id="term-color_type" name="color_type" value="<?php echo esc_attr( $color ) ?>" /></td>
		</tr>
	<?php

}

add_action( 'edited_pa_color', 'rudr_save_color' );
function rudr_save_color( $term_id ) {
	
	$color_type = ! empty( $_POST[ 'color_type' ] ) ? $_POST[ 'color_type' ] : '';
	update_term_meta( $term_id, 'color_type', sanitize_hex_color( $color_type ) );
	
}

<?php
add_action( 'woocommerce_product_option_terms', 'rudr_attr_select', 10, 3 );

function rudr_attr_select( $attribute_taxonomy, $i, $attribute ) {

	// do nothing if it is not our custom attribute type
	if( 'color_type' !== $attribute_taxonomy->attribute_type ) {
		return;
	}

	// get current values
	$options = $attribute->get_options();
	$options = ! empty( $options ) ? $options : array();
	
	?>
	<select multiple="multiple" data-placeholder="Select color" class="multiselect attribute_values wc-enhanced-select" name="attribute_values[<?php echo $i ?>][]">
		<?php
			$colors = get_terms( 'pa_color', array( 'hide_empty' => 0 ) );
			if( $colors ) {
				foreach ( $colors as $color ) {
					echo '<option value="' . $color->term_id . '"' . wc_selected( $color->term_id, $options ) . '>' . $color->name . '</option>';
				}
			}
		?>
	</select>
	<button class="button plus select_all_attributes">Select all</button>
	<button class="button minus select_no_attributes">Select none</button>
	<?php
}

add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'rudr_swatches_html', 20, 2 );

function rudr_swatches_html( $html, $args ){

	global $wpdb;

	$taxonomy = $args[ 'attribute' ];
	$product = $args[ 'product' ];

	$attribute_type = $wpdb->get_var(
		$wpdb->prepare(
			"
			SELECT attribute_type
			FROM " . $wpdb->prefix . "woocommerce_attribute_taxonomies
			WHERE attribute_name = '%s'
			",
			substr( $taxonomy, 3 ) // remove "pa_" prefix
		)
	);

	// if it is not a color attribute, just do nothing
	if( 'color_type' !== $attribute_type ) {
		return $html;
	}

	// the thing is that we do not remove original dropdown, just hide it
	$html = '<div style="display:none">' . $html . '</div>';

	// then we display the swatches

	// in order to do so we loop all attributes in a taxonomy
	$colors = wc_get_product_terms( $product->get_id(), $taxonomy );

	foreach( $colors as $color ) {
		if( in_array( $color->slug, $args[ 'options' ] ) ) {
			// get the value of a color picker actually
			$hex_color = get_term_meta( $color->term_id, 'color_type', true );
			// add class for a selected color swatch
			$selected = $args[ 'selected' ] === $color->slug ? 'color-selected' : '';

			$html .= sprintf(
				'<span class="swatch %s" style="background-color:%s;" title="%s" data-value="%s"></span>',
				$selected,
				$hex_color,
				$color->name,
				$color->slug
			);
		}
	}

	return $html;

}

.swatch {
	width: 30px;
	height: 30px;
	display: inline-block;
	margin-right: 10px;
	cursor:pointer;
	border: 1px solid #fff;
	outline: 2px solid #fff;
}
.swatch.selected{
	outline: 2px solid #333;
}

$( '.variations_form' ).on( 'click', '.swatch', function ( e ) {
	// clicked swatch
	const el = $( this );
	// original select dropdown with variations
	const select = el.closest( '.value' ).find( 'select' );
	// this specific term slug, i.e color slugs, like "coral", "grey" etc
	const value = el.data( 'value' );

	// do three things
	el.addClass( 'selected' ).siblings( '.selected' ).removeClass( 'selected' );
	select.val( value );
	select.change();

} );