How to add a custom checkout field in specific location on WooCommerce

Question

Im adding a custom address field in checkout with this code:

add_filter( 'woocommerce_checkout_fields' , 'checkout_address_details_fields' );

// Our hooked in function – $fields is passed via the filter!
function checkout_address_details_fields( $fields ) {
    $fields['shipping']['shipping_address_details'] = array(
        'label'     => __('Añade más detalles a tu dirección', 'woocommerce'),
    'placeholder'   => _x('Bloque X Apartemento XXX (Opcional)', 'placeholder', 'woocommerce'),
    'required'  => false,
    'class'     => array('form-row-wide'),
    'clear'     => true
     );

     $fields['billing']['billing_address_details'] = array(
        'label'     => __('Añade más detalles a tu dirección', 'woocommerce'),
    'placeholder'   => _x('Bloque X Apartamento XXX (Opcional)', 'placeholder', 'woocommerce'),
    'required'  => false,
    'class'     => array('form-row-wide'),
    'clear'     => true
    );

     return $fields;
}

It is adding the field correctly, however, the field is added at the end below phone field, I need to add this custom field in the 2nd place, below the Street Address field.

You need to use the "priority" argument (55 in your case), See: [add a custom checkout billing field under the last name in WooCommerce](https://stackoverflow.com/a/61669464/11987538) — 7uc1f3r, Oct 24 '20 at 04:50
To know all the details of the existing fields (including the priority number) you can use the following code `echo '
', print_r( $fields, 1 ), '
';`. Just add this as the first line in the callback function, it can be removed after debugging. — 7uc1f3r, Oct 24 '20 at 04:55

score 3 · Accepted Answer · answered Oct 24 '20 at 04:57

You need to use the "priority" argument to set the correct location of your checkout fields like:

add_filter( 'woocommerce_checkout_fields' , 'checkout_address_details_fields' );
function checkout_address_details_fields( $fields ) {
    $fields['shipping']['shipping_address_details'] = array(
        'label'       => __('Añade más detalles a tu dirección', 'woocommerce'),
        'placeholder' => _x('Bloque X Apartemento XXX (Opcional)', 'placeholder', 'woocommerce'),
        'required'    => false,
        'class'       => array('form-row-wide'),
        'clear'       => true,
        'priority'    => 55, // <===== Here
    );

    $fields['billing']['billing_address_details'] = array(
        'label'       => __('Añade más detalles a tu dirección', 'woocommerce'),
        'placeholder' => _x('Bloque X Apartamento XXX (Opcional)', 'placeholder', 'woocommerce'),
        'required'    => false,
        'class'       => array('form-row-wide'),
        'clear'       => true,
        'priority'    => 55, // <===== Here
    );

    return $fields;
}

It should work.

By the way, is there a way to know the right value for priotity? how did you know it was `55`? — svelandiag, Oct 27 '20 at 21:34
@svelandiag Look in checkout page to the generated html code foe billing and shipping fields section… you will see for each field the priority value increasing 10 by 10… So the value 55 is in between the fields `address_1` and `address_2` — LoicTheAztec, Oct 27 '20 at 22:23

How to add a custom checkout field in specific location on WooCommerce

1 Answers1