如何在WooCommerce前端产品标题下动态显示变体自定义字段及SKU

后台添加自定义字段的现有代码 #

// 1. 在产品数据 > 变体 > 单个变体中添加自定义字段输入框
function bbloomer_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
    woocommerce_wp_text_input( array( 
        'id' => 'custom_field[' . $loop . ']', 
        'class' => 'short', 
        'label' => __( '自定义字段', 'woocommerce' ),
        'value' => get_post_meta( $variation->ID, 'custom_field', true )
    ) );      
}
add_action( 'woocommerce_variation_options_pricing', 'bbloomer_add_custom_field_to_variations', 10, 3 ); 

// 2. 保存产品变体时同步保存自定义字段值
function bbloomer_save_custom_field_variations( $variation_id, $i ) {
    $custom_field = $_POST['custom_field'][$i];
    if ( ! empty( $custom_field ) ) {
        update_post_meta( $variation_id, 'custom_field', esc_attr( $custom_field ) );
    } else {
        delete_post_meta( $variation_id, 'custom_field' );
    }
}
add_action( 'woocommerce_save_product_variation', 'bbloomer_save_custom_field_variations', 10, 2 );

// 3. 将自定义字段值存入变体数据（后续会修改此部分）
function bbloomer_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;
}
add_filter( 'woocommerce_available_variation', 'bbloomer_add_custom_field_variation_data' );

需求说明 #

需要将新增的自定义字段与现有SKU字段同时显示在前端产品页面的产品标题下方，且选择不同变体时，对应的自定义字段和SKU字段能动态切换显示。此前尝试未实现字段在标题下方显示的效果。

解决方案 #

需对现有代码进行调整，新增前端显示容器和动态更新逻辑，具体步骤如下：

1. 修改变体数据存储逻辑（传递纯文本值）

替换原有第3部分代码，改为传递纯文本格式的自定义字段和SKU值，方便前端JS处理：

// 3. 将自定义字段和SKU值存入变体数据（纯文本格式）
function bbloomer_add_custom_field_variation_data( $variations ) {
    $variations['custom_field'] = get_post_meta( $variations['variation_id'], 'custom_field', true );
    $variations['variation_sku'] = get_post_meta( $variations['variation_id'], '_sku', true );
    return $variations;
}
add_filter( 'woocommerce_available_variation', 'bbloomer_add_custom_field_variation_data' );

2. 在标题下方添加显示容器

通过WooCommerce钩子在产品标题下方插入SKU和自定义字段的显示容器，默认显示默认变体或产品本身的SKU：

// 在产品标题下方添加SKU和自定义字段显示区域
function display_variation_meta_below_title() {
    global $product;
    // 仅针对可变产品生效
    if ( ! $product->is_type('variable') ) return;

    $default_variation = $product->get_default_variation();
    // 获取默认变体的SKU和自定义字段
    $default_sku = $default_variation ? get_post_meta( $default_variation->get_id(), '_sku', true ) : $product->get_sku();
    $default_custom_field = $default_variation ? get_post_meta( $default_variation->get_id(), 'custom_field', true ) : '';
    ?>
    <div class="variation-meta-below-title" style="margin: 10px 0;">
        <div class="variation-sku">SKU: <span id="current-sku"><?php echo esc_html( $default_sku ); ?></span></div>
        <div class="variation-custom-field">自定义字段: <span id="current-custom-field"><?php echo esc_html( $default_custom_field ); ?></span></div>
    </div>
    <?php
}
add_action( 'woocommerce_single_product_summary', 'display_variation_meta_below_title', 25 );

3. 添加动态更新的JS脚本

监听变体选择事件，当用户切换变体时自动更新SKU和自定义字段内容：

// 添加变体切换时的动态更新脚本
function variation_meta_dynamic_update() {
    global $product;
    if ( ! $product->is_type('variable') ) return;
    ?>
    <script>
        jQuery(document).ready(function($){
            // 监听变体显示事件
            $('form.variations_form').on('show_variation', function(event, variation){
                // 更新SKU显示
                $('#current-sku').text( variation.variation_sku || '<?php echo esc_js( $product->get_sku() ); ?>' );
                // 更新自定义字段显示
                $('#current-custom-field').text( variation.custom_field || '' );
            });
            // 监听变体隐藏事件（未选择变体时重置）
            $('form.variations_form').on('hide_variation', function(){
                $('#current-sku').text('<?php echo esc_js( $product->get_sku() ); ?>');
                $('#current-custom-field').text('');
            });
        });
    </script>
    <?php
}
add_action( 'woocommerce_after_single_product', 'variation_meta_dynamic_update' );

注意事项 #

• 将上述代码添加到当前主题的functions.php文件，或创建独立的自定义插件使用。
• 若主题自定义了产品模板，可根据实际调整woocommerce_single_product_summary钩子的优先级（当前设置为25，确保在标题之后显示）。
• 可通过CSS修改.variation-meta-below-title类的样式，适配页面整体风格。

内容的提问来源于stack exchange，提问作者jackievon51