下面的代码我创建完美的作品。我是新的JS，我相信可以改进。我希望这将是有帮助的。创建自定义字段阅读REMI的职位。
说明：用“WC_Product Variable”对象可以显示Custom Fields中的产品变量、
为了显示这些字段，我使用了jquery，span“sku”的内容将作为我们的参考显示在产品页面上。这段代码在“variations.php”文件中。

<?php

// With "WC_Product Variable" object I get the Custom Fields variations.

$product_id = $product->id;
$variation = new WC_Product_Variable( $product_id );
$arrvariations = $variation->get_children ();

// With foreach construct the div that will contain the Custom Fields

foreach ($arrvariations as $varid) {
    $cfvalone = get_post_meta( $varid, '_custom_field_one', true );
    $cfvaltwo = get_post_meta( $varid, '_custom_field_two', true );

// Check the Custom Fields are not empty

    if (!empty($cfvalone) or !empty($cfvaltwo) ) {

        $cfonecont = get_post_meta( $varid, '_custom_field_one', true );
        $cftwocont = get_post_meta( $varid, '_custom_field_two', true );
        $varsku = get_post_meta( $varid, '_sku', true );

// Built the DIV and embed SKU of the variation to be processed later by JS.
?>
    <div class="varskudiv" data-varskudiv="<? echo $varsku;?>" style="display:none;">
        <?php if (!empty($cfonecont)) {?>
            <a href="<? echo $cfonecont;?>">CUSTOM FIELD ONE</a>
        <?php } ?>
        <?php if (!empty($cftwocont)) {?>
            <a href="<? echo $cftwocont;?>">CUSTOM FIELD TWO</a>
        <?php } ?>
    </div>
    <? }}?>
    <br/>
<script>   
jQuery(document).ready(function( $ ) {
    // As we will take the contents of SPAN "sku" to create the JS 
    //we must consider that this SPAN is complete once the screen is loaded.

    $(window).bind("load", function() {
    woosku = $(".sku").text();
    // Now we map the DIV we created "varskudiv" and load those values in an ARRAY
    wooarrsku = $('div.varskudiv').map(function(){
        return $(this).data('varskudiv');
    }).get();
    // Now we make loop, if the values match show the DIV.
    var indexsku;
    for (indexsku = 0; indexsku < wooarrsku.length; indexsku++) {
    if (woosku == wooarrsku[indexsku]) {
        $('.varskudiv[data-varskudiv="'+ woosku +'"]').css( "display", "inline-block" );
        }
    }
    });
    // Once loaded the screen, if the SPAN "sku" changes, start the process again and hide the previous DIV displayed.

    $('.sku').bind("DOMSubtreeModified",function(){
      woosku = $(".sku").text();
        wooarrsku = $('div.varskudiv').map(function(){
            return $(this).data('varskudiv');
        }).get();
        var indexsku;
        for (indexsku = 0; indexsku < wooarrsku.length; indexsku++) {
        if (woosku == wooarrsku[indexsku]) {
            $('.varskudiv[data-varskudiv="'+ woosku +'"]').css( "display", "inline-block" );
            }
        else {$('.varskudiv[data-varskudiv="'+ wooarrsku[indexsku] +'"]').css( "display", "none" );
            }
        }
    });
});
</script>