在Woocommerce中的帐单明细之前添加新的自定义结帐字段？ [英] Add a new custom checkout field before billing details in Woocommerce?

问题描述

我可以在WooCommerce结帐屏幕上添加一组自定义字段，但需要将其移至结算明细上方。

那怎么办？

根据

---

官方参考文档：自定义结帐字段使用动作和过滤器

I can add a set of custom fields to my WooCommerce checkout screen but need to move it above the 'Billing Details'.

How can that be done?

According to this official WooCommerce documentation, here is an example code to add extra custom checkout fields:

/**
 * 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>';

}

解决方案

Updated: There is only one available hook before checkout billing fields that you can use to add custom fields in checkout form. Try this complete code:

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'] ) );
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

You will get a new field section with yours new custom field (where you can have many also):

---

Official reference docs: Customizing checkout fields using actions and filters

这篇关于在Woocommerce中的帐单明细之前添加新的自定义结帐字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！