Add a photo swatch selector for SureCart product pages.

style.css

/* Handle swatch style */
.my-variant-color-swatch{ 
  width: 50px; 
  height: 50px; 
  border-radius:9px; 
  outline-offset: 2px; 
  margin: 5px 2px; 
  cursor: pointer; 
  box-sizing: border-box; 
  text-indent: -9999px;
} 

/* Handle selected */
.my-variant-color-swatch--selected{
  outline: 2px solid #32373c;
} 

/* Handle hover */
.my-variant-color-swatch:not(.my-variant-color-swatch--selected):hover{
  outline: 2px solid rgba(0,0,0,0.5);
}

surecart-variant-swatches.php

<?php
/**
 * Hook into render_block to change the output classes.
 */
add_action(
	'render_block',
	function ( $block_content, $block, $wp_block ) {
		// we want to this for color options only.
		$variant_option_name = 'color';
		
		// only our variant pill block for "color".
		if ( empty( $wp_block->context['name'] ) || $variant_option_name !== strtolower( $wp_block->context['name'] ) ) {
			return $block_content;
		}

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

		// get the product.
		$product = sc_get_product();
		
		// only get images for this variant value (https://surecart.com/docs/variant-images/)
		$gallery = array_values(
			array_filter(
				$product->gallery,
				function ( $image ) use ( $wp_block ) {
					return strtolower( $image->variant_option ) === strtolower( $wp_block->context['value'] );
				}
			)
		);
		
		// set the background to the variant image.
		$background = ! empty( $gallery[0] ) ? $gallery[0]->attributes( 'thumbnail' )->src : '';

    		// set the background of this variant option to be the first variant image.
		$block_content = new \WP_HTML_Tag_Processor( $block_content );
		$block_content->next_tag( 'div' );
		$block_content->set_attribute( 'style', 'background: url(' . $background . '); background-size: 150%; background-position: center;' );
		$block_content->add_class( 'my-variant-color-swatch' );
		$block_content->set_attribute( 'data-wp-class--my-variant-color-swatch--selected', 'state.isOptionSelected' );
		$block_content->set_attribute( 'data-wp-class--my-variant-color-swatch--disabled', 'state.isOptionUnavailable' );

		return $block_content->get_updated_html();
	},
	10,
	3
);