Отображение пользовательских полей по идентификатору вариации на вкладке «Атрибуты продукта», Woocommerce [JavaScript / php]

Question

Я пытаюсь отобразить настраиваемое поле, связанное с каждым идентификатором варианта, на вкладке атрибутов продукта.

Вот код, используемый для создания настраиваемых полей по идентификатору варианта *

// Test in Additional Info
// -----------------------------------------
// 1. Add custom field input @ Product Data > Variations > Single Variation

add_action( 'woocommerce_variation_options_pricing', 'bbloomer_add_test_cf_to_variations', 10, 3 ); 

function bbloomer_add_test_cf_to_variations( $loop, $variation_data, $variation ) {
woocommerce_wp_text_input( array( 
'id' => 'test_cf[' . $loop . ']', 
'class' => 'short', 
'label' => __( 'Test', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, 'test_cf', true )
) 
);      
}

// -----------------------------------------
// 2. Save custom field on product variation save

add_action( 'woocommerce_save_product_variation', 'bbloomer_save_test_cf_variations', 10, 2 );

function bbloomer_save_test_cf_variations( $variation_id, $i ) {
    $test_cf = $_POST['test_cf'][$i];
    if ( ! empty( $test_cf ) ) {
        update_post_meta( $variation_id, 'test_cf', esc_attr( $test_cf ) );
    } else delete_post_meta( $variation_id, 'test_cf' );
}

// 3. Store custom delivery value into variation data 

add_filter( 'woocommerce_available_variation', 'bbloomer_add_test_cf_variation_data' );

function bbloomer_add_test_cf_variation_data( $variations ) {

    $test = get_post_meta( $variations[ 'variation_id' ], 'test_cf', true );
    if( ! empty( $test ) ) {
    $variations['test_cf'] = '<div>Test: <span>' . get_post_meta( $variations[ 'variation_id' ], 'test_cf', true ) . '</span></div>';
    }
    return $variations;
}

Затем я хотел бы отобразить значения настраиваемого поля идентификатора варианта на вкладке атрибутов продукта, когда выбран соответствующий вариант.

Я попытался добавить следующее в functions.php:

 /**
  * Template hook points at product_attributes.php
  * Adds test Custom Field into Specification tab
  * @template product-attributes.php
  */
   add_action('custom_template_hook', 'display_custom_field' , 10 , 1);
    function display_custom_field($product) {
      // Check if product is variable
      if( $product->is_type( 'variable' ) ){
          // If so, get all available variations!
        $variations = $product->get_available_variations();
            // Loop through variations
          foreach ($variations as $variation) {
              // Check if meta field isn't empty, if not display the field!
            if (!empty(get_post_meta( $variation['variation_id'], 'test_cf', true))) {
                 // get product object from variation ID
                 $product_obj = wc_get_product( $variation['variation_id'] );
              ?>
              <tr class="woocommerce-product-attributes-item">
                <th class="woocommerce-product-attributes-item__label"><div class="woocommerce_custom_field">test <span></th>
                <td class="woocommerce-product-attributes-item__value"><?php echo wp_kses_post( get_post_meta( $variation['variation_id'], 'test_cf', true ) ); ?></td>
              </tr>
              <?
            }
          }
        }
      }

А затем я обновил product-attribute.php, выполнив следующие действия:

<table class="woocommerce-product-attributes shop_attributes">
    <?php foreach ( $product_attributes as $product_attribute_key => $product_attribute ) : ?>
        <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--<?php echo esc_attr( $product_attribute_key ); ?>">
            <th class="woocommerce-product-attributes-item__label"><?php echo wp_kses_post( $product_attribute['label'] ); ?></th>
            <td class="woocommerce-product-attributes-item__value"><?php echo wp_kses_post( $product_attribute['value'] ); ?></td>
        </tr>
    <?php endforeach;
            do_action('custom_template_hook', $product);
    ?>      
</table>

Это отображение настраиваемого поля, однако оно отображает все настраиваемые поля из всех вариантов на вкладкевместо идентификатора варианта, который выбирается в раскрывающемся меню продукта.

Может ли кто-нибудь помочь, поскольку я занимался этим часами!

Я считаю, что мне нужнодобавьте javascript, чтобы иметь возможность показывать его только на основе выбранного варианта.