Example of how to add custom fields to WooCommmerce variations admin and display on front end.

wc-add-field-to-variation.php

<?php
/**
 * Plugin Name: Add sample field to variations
 * Plugin URI: https://kathyisawesome.com/
 * Description: Example of how to add custom fields to variations admin and display on front end.
 * Version: 0.1.0
 * Author: helgatheviking
 * Author URI: https://kathyisawesome.com
 * Text Domain: extra-variation-data
 *
 * @package Doc Validation
 */

defined( 'ABSPATH' ) || exit;	

/**
 * Add custom fields to product variation settings
 *
 * @param string $loop
 * @param array $variation_data
 * @param WP_Post $variation
 * @return array
 */
function kia_add_variation_options_other_dimensions( $loop, $variation_data, $variation ){

	$variation_obj = wc_get_product( $variation->ID );

	woocommerce_wp_text_input( array(
		'id' => 'extra_data[' . $loop . ']',
		'class' => 'short',
		'label'       => __( 'Test Data', 'extra-variation-data' ),
		'desc_tip'    => 'true',
		'description' => __( 'Some data to display for this variation.', 'extra-variation-data' ),
		'value'       => $variation_obj->get_meta( '_extra_data', true ),
	) );

}
add_action( 'woocommerce_product_after_variable_attributes','kia_add_variation_options_other_dimensions', 10, 3 );


/**
 * Save product variation custom fields values
 *
 * @param obj $variation_id
 * @param int $i
 */
function kia_save_variation_options_other_dimensions( $variation, $i ) {

	$variation_obj = wc_get_product( $variation_id );

	if ( isset( $_POST['extra_data'][$i] ) ) {
		$variation_obj->update_meta_data( '_extra_data', wc_clean( $_POST['extra_data'][$i] ) );
	}

	$variation_obj->save();

}
add_action( 'woocommerce_admin_process_variation_object','kia_save_variation_options_other_dimensions', 10, 2 );



/**
 * Add data to json encoded variation form.
 *
 * @param  array $data - this is the variation's json data
 * @param  object $product
 * @param  object $variation
 * @return array
 */
function kia_available_variation( $data, $product, $variation ){
	$extra_data  = $variation->get_meta( 'extra_data', true );

	$new_data['extra_data']  = $extra_data ? sprintf( esc_html__( 'Test data: %s', 'extra-variation-data' ), $extra_data ) : '';

	return array_merge( $data, $new_data );

}
add_filter( 'woocommerce_available_variation', 'kia_available_variation', 10, 3 );

/**
 * holder for display link
 */
function kia_custom_variation_data() {
	echo '<div class="woocommerce-variation-extra-data"></div>';
}
add_action( 'woocommerce_single_variation', 'kia_custom_variation_data', 5 );


/**
 * Add scripts to variable products.
 */
function kia_on_found_template_for_variable_add_to_cart() {
	add_action( 'wp_print_footer_scripts', 'kia_variable_footer_scripts', 99 );
}
add_action( 'woocommerce_variable_add_to_cart', 'kia_on_found_template_for_variable_add_to_cart', 30 );


function kia_variable_footer_scripts() { ?>

	<script type="text/template" id="tmpl-variation-template-extra-data">
		<div class="woocommerce-variation-extra_data">{{{ data.variation.extra_data }}}</div>
	</script>

	
	<script type="text/javascript">
		jQuery( document ).ready(function($) {
			$('form.cart')
				.on('found_variation', function( event, variation ) {

					template     = wp.template( 'variation-template-extra-data' );

					$template_html = template( {
						variation: variation
					} );

					$(this).find('.woocommerce-variation-extra-data').html( $template_html ).slideDown();

				})
				.on( 'reset_data', function( event, variation ) {
					$(this).find('.woocommerce-variation-extra-data').slideUp( 200 );
				});
		});
	</script>
<?php

}

Just what I needed, thanks! 🙏