WooCommerce：选择商品变体时如何显示用户输入字段？

问题描述 #

我有多款属性一致的可变T恤商品，包含3种变体：基础款、字母组合(Monogram)、全名(Full Name)。希望实现：当用户选择字母组合或全名变体时，自动显示对应的文本输入框，供用户输入个性化内容；选择基础款时则不显示任何输入框。目前已在主题的functions.php中添加了以下代码，需完成后续实现：

// Display custom fields for variations
function custom_variation_fields($loop, $variation_data, $variation) {
    error_log('Display custom fields for variations');

    $product_ids = array(3671, 444); 

    // Check if $variation is an instance of WC_Product_Variation
    if ($variation instanceof WC_Product_Variation && in_array($variation->get_parent_id(), $product_ids)) {
        // Only show custom fields for specified products

        // For "With Monogram" variation
        woocommerce_wp_text_input(array(
            'id' => '_monogram_field[' . $loop . ']',
            'label' => 'Monogram',
            'placeholder' => 'Enter Monogram',
            'desc_tip' => 'true',
            'description' => 'Enter the monogram for this variation.'
        ));

        // For "Full Name" variation
        woocommerce_wp_text_input(array(
            'id' => '_full_name_field[' . $loop . ']',
            'label' => 'Full Name',
            'placeholder' => 'Enter Full Name',
            'desc_tip' => 'true',
            'description' => 'Enter the full name for this variation.'
        ));
    }
}

add_action('woocommerce_variation_options', 'custom_variation_fields', 10, 3);

// Save custom fields for variations
function save_custom_variation_fields($variation_id, $i) {
    error_log('Save custom fields for variations');

    $product_ids = array(3671, 444); 

    if (in_array(wp_get_post_parent_id($variation_id), $product_ids)) {
        // Only save custom fields for specified products

        $monogram = sanitize_text_field($_POST['_monogram_field'][$i]);
        update_post_meta($variation_id, '_monogram_field', $monogram);

        $full_name = sanitize_text_field($_POST['_full_name_field'][$i]);
        update_post_meta($variation_id, '_full_name_field', $full_name);
    }
}

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

// Display custom fields on the frontend above the "Add to Cart" button
function display_custom_fields() {
    error_log('Display custom fields on the frontend');

    global $product;

    $product_ids = array(3671, 444); 

    if ($product->is_type('variable') && in_array($product->get_id(), $product_ids)) {
        // Output the variation ID as a data attribute for JS to use
        echo '<div id="variation-id" data-variation-id="' . esc_attr($product->get_id()) . '"></div>';

        // Output a placeholder for the custom fields
        echo '<div id="custom-fields-container"></div>';
    }
}

解决方案说明 #

你当前的代码是给管理员在后台编辑变体时设置固定字段，并非实现用户前端的个性化输入。需补充前端动态显示逻辑、用户输入保存及订单展示的代码，具体步骤如下：

1. 替换前端字段显示函数 #

将原有display_custom_fields函数替换为以下代码，添加输入框模板并挂载到正确的钩子：

// 前端添加个性化输入框模板与容器
function display_custom_fields() {
    global $product;

    $product_ids = array(3671, 444); 

    if ($product->is_type('variable') && in_array($product->get_id(), $product_ids)) {
        // 隐藏的输入框模板，供JS克隆使用
        echo '<div class="custom-field-template" style="display:none;">
                <div class="monogram-field">
                    <label for="monogram_input">字母组合(Monogram):</label>
                    <input type="text" id="monogram_input" name="monogram_input" placeholder="输入字母组合" required>
                </div>
                <div class="fullname-field">
                    <label for="fullname_input">全名(Full Name):</label>
                    <input type="text" id="fullname_input" name="fullname_input" placeholder="输入全名" required>
                </div>
              </div>';

        // 输入框显示容器
        echo '<div id="custom-fields-container"></div>';
    }
}
add_action('woocommerce_before_add_to_cart_button', 'display_custom_fields');

2. 添加前端JS动态控制逻辑 #

将以下JS代码添加到主题的自定义JS文件中，或通过wp_enqueue_script挂载：

jQuery(document).ready(function($) {
    // 监听变体选中事件
    $('form.variations_form').on('show_variation', function(event, variation) {
        $('#custom-fields-container').empty();
        
        // 根据变体名称匹配显示对应输入框
        if (variation.variation_name.includes('Monogram')) {
            $('.monogram-field').clone().appendTo('#custom-fields-container').show();
        } else if (variation.variation_name.includes('Full Name')) {
            $('.fullname-field').clone().appendTo('#custom-fields-container').show();
        }
        // 基础款不显示任何输入框
    });

    // 变体未选中时清空容器
    $('form.variations_form').on('hide_variation', function() {
        $('#custom-fields-container').empty();
    });
});

3. 保存用户输入到订单项 #

添加以下代码，将用户输入的个性化内容保存到订单元数据：

// 保存用户输入的个性化内容到订单项
function save_custom_field_to_order_item($item_id, $values, $cart_item_key) {
    if (!empty($_POST['monogram_input'])) {
        wc_add_order_item_meta($item_id, '字母组合(Monogram)', sanitize_text_field($_POST['monogram_input']));
    }
    if (!empty($_POST['fullname_input'])) {
        wc_add_order_item_meta($item_id, '全名(Full Name)', sanitize_text_field($_POST['fullname_input']));
    }
}
add_action('woocommerce_add_order_item_meta', 'save_custom_field_to_order_item', 10, 3);

4. 在购物车、订单详情及邮件中显示内容 #

添加以下代码，确保个性化内容在购物车、订单后台和邮件中正常展示：

// 购物车页面显示个性化内容
function display_custom_field_in_cart($item_data, $cart_item) {
    if (!empty($cart_item['monogram_input'])) {
        $item_data[] = array(
            'key' => '字母组合(Monogram)',
            'value' => sanitize_text_field($cart_item['monogram_input'])
        );
    }
    if (!empty($cart_item['fullname_input'])) {
        $item_data[] = array(
            'key' => '全名(Full Name)',
            'value' => sanitize_text_field($cart_item['fullname_input'])
        );
    }
    return $item_data;
}
add_filter('woocommerce_get_item_data', 'display_custom_field_in_cart', 10, 2);

// 订单详情与邮件中显示个性化内容
function display_custom_field_in_order($item, $order, $plain_text) {
    $monogram = wc_get_order_item_meta($item->get_id(), '字母组合(Monogram)', true);
    $fullname = wc_get_order_item_meta($item->get_id(), '全名(Full Name)', true);
    
    if ($monogram) {
        echo '<p><strong>字母组合(Monogram):</strong> ' . esc_html($monogram) . '</p>';
    }
    if ($fullname) {
        echo '<p><strong>全名(Full Name):</strong> ' . esc_html($fullname) . '</p>';
    }
}
add_action('woocommerce_order_item_meta_end', 'display_custom_field_in_order', 10, 3);

注意事项 #

• 确保变体名称中包含Monogram或Full Name关键词，否则JS无法匹配；若变体名称不同，需修改JS中的匹配条件。
• 若不需要后台管理员设置变体字段，可删除你原有代码中的custom_variation_fields和save_custom_variation_fields函数及对应钩子。

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