在Woocommerce [JavaScript / php]

Question

我试图在产品属性标签中显示一个链接到每个版本ID的自定义字段。

这是用于通过版本ID创建自定义字段的代码

// 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;
}

然后，当选择了相应的变体后，我想在产品属性标签中显示变体id定制字段值。

我尝试将以下内容添加到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-attributes.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>

这是在显示自定义字段，但是它显示的是选项卡中所有版本的所有自定义字段，而不仅仅是从产品的下拉菜单中选择的版本ID。

任何时候我都可以帮忙的人！

我相信我需要添加一些JavaScript才能基于仅选择的变体显示它。