Variant Swatches

<?php
$variant_option_name_for_swatch = 'color'; // Change this to match your variant option name.

add_action(
	'render_block',
	function ( $block_content, $block, $wp_block ) use ( $variant_option_name_for_swatch ) {
		// Only target the variant pill block for the specified option.
		if ( empty( $wp_block->context['name'] ) || $variant_option_name_for_swatch !== strtolower( $wp_block->context['name'] ) ) {
			return $block_content;
		}

		if ( 'surecart/product-variant-pill' !== $block['blockName'] ) {
			return $block_content;
		}

		$product = sc_get_product();

		// Find images that match this variant option value.
		$gallery = array_values(
			array_filter(
				$product->gallery,
				function ( $image ) use ( $wp_block ) {
					return strtolower( $image->getMetadata( 'variant_option' ) ) === strtolower( $wp_block->context['value'] );
				}
			)
		);

		$background = ! empty( $gallery[0] ) ? ( $gallery[0]->guid ?? null ) : null;
		if ( empty( $background ) ) {
			return $block_content;
		}

		$processor = new \WP_HTML_Tag_Processor( $block_content );
		$processor->next_tag( 'div' );

		if ( ! empty( $background ) ) {
			$processor->set_attribute(
				'style',
				'background: url(' . esc_url( $background ) . '); background-size: 150%; background-position: center; color:transparent;width: 56px; height: 56px; border-radius: 4px; margin: 5px auto; cursor: pointer; box-sizing: border-box; text-indent: -9999px; border-width: 2px;'
			);
		}

		$processor->add_class( 'sc-variant-color-swatch' );
		$processor->set_attribute( 'data-wp-class--sc-variant-color-swatch--selected', 'state.isOptionSelected' );
		$processor->set_attribute( 'data-wp-class--sc-variant-color-swatch--disabled', 'state.isOptionUnavailable' );

		// Wrap swatch and name in a parent div.
		$updated_html  = '<div class="sc-variant-color-wrapper" style="display:flex; flex-direction:column; align-items:center;">';
		$updated_html .= $processor->get_updated_html();

		// Uncomment to show the variant option name below the image:
		// $variant_name = esc_html( $wp_block->context['value'] ?? '' );
		// $updated_html .= '<div class="sc-variant-color-name" style="font-size: 12px; text-align: center; color:#333; text-transform: capitalize;">' . $variant_name . '</div>';

		$updated_html .= '</div>';

		return $updated_html;
	},
	10,
	3
);

$variant_option_name_for_swatch = 'size'; // Target "Size" variants instead.

$variant_name = esc_html( $wp_block->context['value'] ?? '' );
$updated_html .= '<div class="sc-variant-color-name" style="font-size: 12px; text-align: center; color:#333; text-transform: capitalize;">' . $variant_name . '</div>';

'style',
'background: url(' . esc_url( $background ) . '); background-size: 150%; background-position: center; color:transparent;width: 72px; height: 72px; border-radius: 4px; margin: 5px auto; cursor: pointer; box-sizing: border-box; text-indent: -9999px; border-width: 2px;'

/* Selected swatch */
.sc-variant-color-swatch--selected {
    border-color: #00824c;
    box-shadow: 0 0 0 2px #00824c;
}

/* Disabled/unavailable swatch */
.sc-variant-color-swatch--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}