在 WooCommerce 产品附加信息选项卡中显示选定的变体自定义字段值

Question

我已经能够使用以下代码将自定义文本输入字段添加到可变产品的变体中：

// Add custom text input field to admin Product Data > Variations
add_action( 'woocommerce_variation_options_pricing', 'add_custom_field_to_variations', 10, 3 );
function add_custom_field_to_variations( $loop, $variation_data, $variation ) {
    woocommerce_wp_text_input( array(
        'id' => 'custom_field[' . $loop . ']',
        'class' => 'short',
        'label' => __( 'product size', 'woocommerce' ),
        'value' => get_post_meta( $variation->ID, 'custom_field', true )
    ) );
}
 
// Save custom field on product variation save
add_action( 'woocommerce_save_product_variation', 'save_custom_field_variations', 10, 2 );
function save_custom_field_variations( $variation_id, $i ) {
    $custom_field = $_POST['custom_field'][$i];
    if ( isset( $custom_field ) ) 
        update_post_meta( $variation_id, 'custom_field', esc_attr( $custom_field ) );
}
 
// Store custom field value into variation data
add_filter( 'woocommerce_available_variation', 'add_custom_field_variation_data' );
function add_custom_field_variation_data( $variations ) {
    $variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . 
    get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '</span></div>';

    return $variations;
}

代码工作并保存输入的变化值（见下面的屏幕截图）。

现在这是我尝试在附加信息选项卡中获取和显示自定义字段值的代码：

function yourprefix_woocommerce_display_product_attributes($variation_data, $variations){
    $variation_data['custom_field'] = [
        'label' => __('size', 'text-domain'),
        'value' => get_post_meta($variations->ID, 'custom_field', true),
    ];
    return $variation_data;
}
add_filter('woocommerce_display_product_attributes', 'yourprefix_woocommerce_display_product_attributes', 10, 2);

但它没有显示我在变体中输入的值。

感谢任何帮助。

Answer 1

您的代码有点过时，并且有一些错误和遗漏：需要一些额外的 jQuery 代码才能在附加信息选项卡中显示所选变体“大小”自定义字段值。

您应该始终使用明确的 slug 命名自定义字段字段键。

这里是完整的重访代码：

// Admin Product > Variations: Display an input text field
add_action( 'woocommerce_variation_options_pricing', 'add_admin_product_variations_custom_field', 10, 3 );
function add_admin_product_variations_custom_field( $loop, $variation_data, $variation ) {
    woocommerce_wp_text_input( array(
        'id' => 'size[' . $loop . ']',
        'class' => 'short',
        'label' => __( 'product size', 'woocommerce' ),
        'value' => get_post_meta( $variation->ID, '_size', true )
    ) );
}

// Admin Product > Variations: Save input text field submited value
add_action( 'woocommerce_admin_process_variation_object', 'save_admin_product_variations_custom_field', 10, 2 );
function save_admin_product_variations_custom_field( $variation, $i ) {
    if ( isset($_POST['size'][$i]) ) {
        $variation->update_meta_data( '_size', sanitize_text_field($_POST['size'][$i]) );
    }
}

// Frontend Variable products: Link variation custom field value
add_filter( 'woocommerce_available_variation', 'set_available_variation_custom_field', 10, 3 );
function set_available_variation_custom_field( $variation_data, $product, $variation ) {
    return array_merge( $variation_data, array(
        'size' => $variation->get_meta('_size'),
    ) );
}

// Frontend Variable products > additional information tab: Display "Size" label with an empty value
add_filter( 'woocommerce_display_product_attributes', 'Display_custom_field_label_with_empty_value', 10, 3 );
function Display_custom_field_label_with_empty_value( $product_attributes, $product ) {
    $product_attributes[ 'size' ] = array(
        'label' => __('Size', 'text-domain'),
        'value' => '',
    );
    return $product_attributes;
}

// Variable Product (jQuery): Selected variation displays custom field value
add_action( 'woocommerce_before_variations_form', 'custom_variations_js_script' );
function custom_variations_js_script() {
    wc_enqueue_js( "jQuery( function($){
        var sizeObj = $('tr.woocommerce-product-attributes-item--size > td');
        $('form.variations_form').on('show_variation', function(event, data){
            sizeObj.text(data.size);
        }).on('hide_variation', function(){
            sizeObj.text('');
        })
    });" );
}

代码位于活动子主题（或活动主题）的functions.php 文件中。经测试有效。