自定义WooCommerce单品额外输入字段及数据展示故障排查

问题诊断 #

你当前的代码缺少将前端输入的自定义数据存入购物车项的关键步骤，还使用了已弃用的函数，导致数据无法在购物车、订单及后台同步：

• 未捕获my_personalization的POST数据并关联到购物车商品
• wc_add_order_item_meta属于旧版函数，当前WooCommerce推荐使用woocommerce_checkout_create_order_line_item钩子处理订单元数据

另外，woocommerce_before_add_to_cart_button钩子是完全合适的，这个钩子的位置正好在「数量」和「加入购物车」按钮上方，符合你的需求。

修正后的完整代码 #

将以下代码添加到主题的functions.php文件中：

// 1. 在单品页添加自定义输入字段
function my_personalization_field() {
    $html = '<div class="personalization-field">';
        $html .= '<label for="personalization">个性化定制:</label>';
        $html .= '<input type="text" id="personalization" name="my_personalization" required />';
    $html .= '</div>';

    echo $html;
}
add_action('woocommerce_before_add_to_cart_button', 'my_personalization_field');

// 2. 捕获POST数据并保存到购物车项
function my_save_personalization_to_cart( $cart_item_data, $product_id ) {
    if( isset( $_POST['my_personalization'] ) && !empty( $_POST['my_personalization'] ) ) {
        $cart_item_data['my_personalization'] = sanitize_text_field( $_POST['my_personalization'] );
        // 添加唯一键，确保相同商品不同定制内容视为独立购物车项
        $cart_item_data['unique_key'] = md5( microtime().rand() );
    }
    return $cart_item_data;
}
add_filter( 'woocommerce_add_cart_item_data', 'my_save_personalization_to_cart', 10, 2 );

// 3. 在购物车页面显示定制内容
function my_display_personalization_in_cart( $product_name, $cart_item, $cart_item_key ) {
    if( isset( $cart_item['my_personalization'] ) ) {
        $product_name .= '<br><small>定制内容: ' . esc_html( $cart_item['my_personalization'] ) . '</small>';
    }
    return $product_name;
}
add_filter('woocommerce_cart_item_name', 'my_display_personalization_in_cart', 10, 3);

// 4. 将定制内容同步到订单
function my_add_personalization_to_order( $item, $cart_item_key, $values, $order ) {
    if( isset( $values['my_personalization'] ) ) {
        $item->add_meta_data( '定制内容', $values['my_personalization'] );
    }
}
add_action( 'woocommerce_checkout_create_order_line_item', 'my_add_personalization_to_order', 10, 4 );

// 5. 在后台订单详情页显示定制内容
function my_display_personalization_in_admin_order( $item_id, $item, $product ) {
    if( $meta_value = $item->get_meta( '定制内容' ) ) {
        echo '<p><strong>定制内容:</strong> ' . esc_html( $meta_value ) . '</p>';
    }
}
add_action( 'woocommerce_admin_order_item_values', 'my_display_personalization_in_admin_order', 10, 3 );

代码说明 #

• 步骤1：保留你原有的字段添加逻辑，新增required属性可强制用户填写（可根据需求移除）
• 步骤2：通过woocommerce_add_cart_item_data钩子捕获前端POST的定制数据并存入购物车项；添加唯一键是为了避免相同商品的不同定制内容被合并
• 步骤3：复用你原有的购物车显示逻辑，调整文字为中文更贴合场景
• 步骤4：使用WooCommerce推荐的钩子替代旧版函数，将购物车中的定制数据同步到订单行项目
• 步骤5：新增后台订单显示逻辑，让管理员在订单详情页能看到用户的定制内容

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