如何在WooCommerce结算页的账单详情前添加自定义结算字段？

没问题，我来帮你搞定这个需求！

你提供的示例代码是把自定义字段加到了订单备注区域的后面，这是因为它用了woocommerce_after_order_notes这个动作钩子。要把字段移到「账单详情」区域的上方，只需要换个合适的钩子就行！

修改后的完整代码 #

/**
 * 添加自定义结算字段到账单详情上方
 */
add_action( 'woocommerce_checkout_before_billing', 'my_custom_checkout_field_above_billing' );

function my_custom_checkout_field_above_billing( $checkout ) {
    echo '<div id="my_custom_checkout_field"><h2>' . __('我的自定义字段') . '</h2>';

    woocommerce_form_field( 'my_field_name', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('请填写此字段'),
        'placeholder'   => __('输入内容'),
    ), $checkout->get_value( 'my_field_name' ));

    echo '</div>';
}

/**
 * 保存自定义字段数据到订单（可选但推荐）
 */
add_action( 'woocommerce_checkout_update_order_meta', 'save_my_custom_checkout_field' );

function save_my_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['my_field_name'] ) ) {
        update_post_meta( $order_id, '我的自定义字段', sanitize_text_field( $_POST['my_field_name'] ) );
    }
}

关键说明 #

• 核心修改就是把原来的woocommerce_after_order_notes钩子换成woocommerce_checkout_before_billing，这个钩子刚好对应账单详情区域之前的位置，字段自然就挪上去了。
• 第二部分的代码是额外补充的——它能把用户填写的自定义内容保存到订单元数据里，这样你在后台查看订单时就能看到用户填的内容，实用性拉满。
• 如果需要调整字段类型（比如改成下拉框、单选框）或者样式，直接修改woocommerce_form_field里的参数就行，灵活得很。

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