在 Woocommerce 中的计费详细信息之前添加新的自定义结帐字段？

Question

我可以将一组自定义字段添加到我的 WooCommerce 结帐屏幕，但需要将其移动到“帐单详细信息”上方。

如何做到这一点？

根据this official WooCommerce documentation，这是一个添加额外自定义结帐字段的示例代码：

/**
 * Add the field to the checkout
 */
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );

function my_custom_checkout_field( $checkout ) {

echo '<div id="my_custom_checkout_field"><h2>' . __('My Field') . '</h2>';

woocommerce_form_field( 'my_field_name', array(
    'type'          => 'text',
    'class'         => array('my-field-class form-row-wide'),
    'label'         => __('Fill in this field'),
    'placeholder'   => __('Enter something'),
    ), $checkout->get_value( 'my_field_name' ));

echo '</div>';

}

Answer 1

更新：在结帐结算字段之前只有一个可用挂钩，您可以使用它在结帐表单中添加自定义字段。试试这个完整的代码：

add_action( 'woocommerce_checkout_before_customer_details', 'custom_checkout_fields_before_billing_details', 20 );
function custom_checkout_fields_before_billing_details(){
    $domain = 'woocommerce';
    $checkout = WC()->checkout;

    echo '<div id="my_custom_checkout_field">';

    echo '<h3>' . __('My New Fields Section') . '</h3>';

    woocommerce_form_field( '_my_field_name', array(
        'type'          => 'text',
        'label'         => __('My 1st new field', $domain ),
        'placeholder'   => __('Please fill in "my 1st new field"', $domain ),
        'class'         => array('my-field-class form-row-wide'),
        'required'      => true, // or false
    ), $checkout->get_value( '_my_field_name' ) );

    echo '</div>';
}

// Custom checkout fields validation
add_action( 'woocommerce_checkout_process', 'custom_checkout_field_process' );
function custom_checkout_field_process() {
    if ( isset($_POST['_my_field_name']) && empty($_POST['_my_field_name']) )
        wc_add_notice( __( 'Please fill in "My 1st new field".' ), 'error' );
}

// Save custom checkout fields the data to the order
add_action( 'woocommerce_checkout_create_order', 'custom_checkout_field_update_meta', 10, 2 );
function custom_checkout_field_update_meta( $order, $data ){
    if( isset($_POST['_my_field_name']) && ! empty($_POST['_my_field_name']) )
        $order->update_meta_data( '_my_field_name', sanitize_text_field( $_POST['_my_field_name'] ) );
}

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

您将获得一个新的字段部分，其中包含您的新自定义字段（您也可以有很多）：

---

官方参考文档：Customizing checkout fields using actions and filters

Answer 2

WooCommerce 使用挂钩来显示结帐页面元素，例如账单和运输字段。您可以使用它们来添加您自己的自定义内容。您会注意到您发布的第一行代码包含 woocommerce_after_order_notes，这是其中一个钩子。它定义了字段的位置。

如果您想在账单明细之前添加一条消息，您可以使用这个钩子：woocommerce_before_checkout_billing_form

您可以在 https://docs.woocommerce.com/wc-apidocs/hook-docs.html 找到 WooCommerce 挂钩的完整列表