在变体产品页面 Woocommerce 中显示自定义字段

Question

我使用以下代码创建了两个不同的自定义字段（感谢 Remi Corso）：

functions.php

添加变体设置

add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );

保存变体设置

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

为变体创建新字段

function variation_settings_fields( $loop, $variation_data, $variation ) {
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_pdf_ficha_tecnica[' . $variation->ID . ']', 
            'label'       => __( 'PDF FICHA TÉCNICA', 'woocommerce' ), 
            'placeholder' => 'http://',
            'desc_tip'    => 'true',
            'description' => __( 'aqui', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_pdf_ficha_tecnica', true )
        )
    );  
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_pdf_ficha_caracteristicas[' . $variation->ID . ']', 
            'label'       => __( 'PDF FICHA CARACTERÍSTICAS', 'woocommerce' ), 
            'placeholder' => 'http://',
            'desc_tip'    => 'true',
            'description' => __( 'aqui', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_pdf_ficha_caracteristicas', true )
        )
    );
}

为变体保存新字段

function save_variation_settings_fields( $post_id ) {
    $text_field = $_POST['_pdf_ficha_tecnica'][ $post_id ];
    if( ! empty( $text_field ) ) {
        update_post_meta( $post_id, '_pdf_ficha_tecnica', esc_attr( $text_field ) );
    }
    $text_field = $_POST['_pdf_ficha_caracteristicas'][ $post_id ];
    if( ! empty( $text_field ) ) {
        update_post_meta( $post_id, '_pdf_ficha_caracteristicas', esc_attr( $text_field ) );
    }
}

这些自定义字段存储 URL 并将显示为链接。我正在寻找显示这些字段，但在找到正确的解决方案时遇到了很多麻烦。

谁能指导我？ 我应该关注文件“variable.php”吗？ JS呢？ 或者我可以通过钩子渲染字段？

提前致谢！

Answer 1

我创建的以下代码完美运行。我是 JS 新手，我确信可以改进。我希望这会有所帮助。要创建自定义字段，请阅读 REMI 的帖子。

说明：使用“WC_Product Variable”对象可以显示产品变体的自定义字段，

为了显示这些字段，我使用了 jquery，范围“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>