如何让WooCommerce自定义字段数据在购物车及订单详情显示？

你当前的代码已经完成了产品页显示自定义字段、将字段数据存入购物车项、同步数据到订单项元数据这三个核心环节，接下来需要补充的是让数据在购物车/结账页面、订单详情页（前后台）、邮件通知中可见，同时可以增强输入验证和购物车项唯一性处理，具体如下：

1. 在购物车页面显示自定义字段值 #

使用woocommerce_after_cart_item_name钩子，在购物车项名称下方输出抽屉高度：

function display_drawer_height_in_cart( $cart_item, $cart_item_key ) {
    if ( isset( $cart_item['drawer_height'] ) ) {
        echo '<small class="drawer-height-info">' . __( 'Drawer Height:', 'woocommerce' ) . ' ' . esc_html( $cart_item['drawer_height'] ) . '</small>';
    }
}
add_action( 'woocommerce_after_cart_item_name', 'display_drawer_height_in_cart', 10, 2 );

2. 在结账页面的订单项中显示 #

通过woocommerce_checkout_cart_item_quantity钩子，让结账页面的订单项也展示抽屉高度：

function display_drawer_height_in_checkout( $quantity_html, $cart_item, $cart_item_key ) {
    if ( isset( $cart_item['drawer_height'] ) ) {
        $quantity_html .= '<br><small>' . __( 'Drawer Height:', 'woocommerce' ) . ' ' . esc_html( $cart_item['drawer_height'] ) . '</small>';
    }
    return $quantity_html;
}
add_filter( 'woocommerce_checkout_cart_item_quantity', 'display_drawer_height_in_checkout', 10, 3 );

3. 增强输入验证（可选） #

当前仅判断非空，可添加数值范围限制，修改add_cart_drawer_data函数：

function add_cart_drawer_data( $cart_item_data, $product_id, $variation_id ) {
    if ( ! isset( $_POST['wcdprdcartnonce'] ) || ! wp_verify_nonce( sanitize_text_field( wp_unslash( (string) $_POST['wcdprdcartnonce'] ) ), 'wcd-add-to-cart' ) ) {
            return $cart_item_data;
    }
    
    // 添加数值范围验证
    $dheight = filter_input( INPUT_POST, 'drawer_height', FILTER_VALIDATE_INT, array(
        'options' => array(
            'min_range' => 10, // 最小高度
            'max_range' => 200 // 最大高度
        )
    ) );
    
    if ( $dheight === false ) {
        wc_add_notice( __( 'Drawer height must be a number between 10 and 200.', 'woocommerce' ), 'error' );
        return $cart_item_data;
    }
    
    if ( !empty( $dheight ) ) {
        $cart_item_data['drawer_height'] = $dheight;
        // 可选：添加唯一键，让同产品不同高度成为独立购物车项
        $cart_item_data['unique_key'] = md5( microtime() . $dheight );
    }
    
    return $cart_item_data;
}
add_filter( 'woocommerce_add_cart_item_data', 'add_cart_drawer_data', 10, 3 );

4. 在前台客户订单详情页显示 #

使用woocommerce_order_item_meta_end钩子，在客户订单详情的订单项中展示数据：

function display_drawer_height_in_order_details( $item_id, $item, $order, $plain_text ) {
    $drawer_height = $item->get_meta( 'Drawer Height' );
    if ( $drawer_height ) {
        $output = __( 'Drawer Height:', 'woocommerce' ) . ' ' . esc_html( $drawer_height );
        echo $plain_text ? " $output" : "<br><small>$output</small>";
    }
}
add_action( 'woocommerce_order_item_meta_end', 'display_drawer_height_in_order_details', 10, 4 );

5. 在后台管理员订单详情页显示 #

默认通过woocommerce_checkout_create_order_line_item添加的元数据会自动显示，但如果需要自定义样式，可使用woocommerce_admin_order_item_values钩子：

function display_drawer_height_in_admin_order( $product, $item, $item_id ) {
    $drawer_height = $item->get_meta( 'Drawer Height' );
    if ( $drawer_height ) {
        echo '<br><strong>' . __( 'Drawer Height:', 'woocommerce' ) . '</strong> ' . esc_html( $drawer_height );
    }
}
add_action( 'woocommerce_admin_order_item_values', 'display_drawer_height_in_admin_order', 10, 3 );

6. 在订单邮件通知中显示 #

通过woocommerce_email_order_meta_fields钩子，让抽屉高度出现在客户和管理员的订单邮件里：

function add_drawer_height_to_email( $fields, $sent_to_admin, $order ) {
    foreach ( $order->get_items() as $item ) {
        if ( $drawer_height = $item->get_meta( 'Drawer Height' ) ) {
            $fields['drawer_height_' . $item->get_id()] = array(
                'label' => __( 'Drawer Height', 'woocommerce' ),
                'value' => $drawer_height,
            );
        }
    }
    return $fields;
}
add_filter( 'woocommerce_email_order_meta_fields', 'add_drawer_height_to_email', 10, 3 );

额外优化：完善产品页输入框HTML #

当前输入框的label未关联，可修改get_user_input函数中的HTML部分，提升可访问性：

$render_html .= '<label for="drawer_height">' . __( 'Drawer Dimension:', 'woocommerce' ) . '</label>';
$render_html .= '<input type="number" id="drawer_height" name="drawer_height" min="10" max="200" placeholder="Enter height...">';

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