Clickable WooCommerce Variation Thumbnails

	<?php
		// My own code to create thumbnails of all variations
		if( $product->is_type( 'variable' ) ){
	?>
		<div class="row">
			<div class="col-12">
				<h2>Available Colours</h2>
			</div>
			<?php
				$variations = $product->get_available_variations();

				foreach ( $variations as $variation ) {
					echo '<div class="col-3 mb-2">';
				    echo '<img class="selector_'. $variation['variation_id'] .'" src=' . $variation['image_src'] . '>';
				    foreach($variation['attributes'] as $attributes) {
						    echo $attributes;
						}
					echo '</div>';

			    // var_dump($variation);
				}
			?>
		</div>
		<script type="text/javascript">
	    jQuery(function($){
	    		<?php foreach ( $variations as $variation ) { ?>
	      		<?php foreach($variation['attributes'] as $attributes) { ?>
		          $('.selector_<?php echo $variation['variation_id'] ?>').click(function(){
		          	$('select[name="attribute_colour"] option[value="<?php echo $attributes ?>"]').attr("selected","selected").trigger('change');
		          });
	          <?php } ?>
	        <?php } ?>
	    });
		</script>

		<h2>Product Gallery</h2>
  <?php } ?>