Add a custom field to WooCommerce Billing form?

Question

I get this code to add a custom field to the WooCommerce Billing form.

The field is shown but the problem is that the field has not label nor placeholder nor class name.

What am I missing here? I added this code to functions.php in my child theme.

/*******************************
  CUSTOM BILLING FIELD
 ******************************** */
add_filter('woocommerce_billing_fields', 'custom_woocommerce_billing_fields');

function custom_woocommerce_billing_fields($fields)
{

    $fields['billing']['billing_options'] = array(
        'label' => __('NIF', 'woocommerce'), // Add custom field label
        'placeholder' => _x('Your NIF here....', 'placeholder', 'woocommerce'), // Add custom field placeholder
        'required' => false, // if field is required or not
        'clear' => false, // add clear or not
        'type' => 'text', // add field type
        'class' => array('my-css')    // add class name
    );

    return $fields;
}

You can add your code for the custombilling field to the `get_default_address_fields()` function in the `class-wc-countries.php` file — Daniel_ZA, Feb 20 '17 at 10:29

score 30 · Accepted Answer · edited Feb 06 '20 at 10:40

30

If you are using woocommerce_billing_fields then you don't need to specify the fields it will be automatically get assign to the billing fields. But if your are using woocommerce_checkout_fields then only you need to specify that you want a field for shipping or billing.

For woocommerce_billing_fields

add_filter('woocommerce_billing_fields', 'custom_woocommerce_billing_fields');

function custom_woocommerce_billing_fields($fields)
{

    $fields['billing_options'] = array(
        'label' => __('NIF', 'woocommerce'), // Add custom field label
        'placeholder' => _x('Your NIF here....', 'placeholder', 'woocommerce'), // Add custom field placeholder
        'required' => false, // if field is required or not
        'clear' => false, // add clear or not
        'type' => 'text', // add field type
        'class' => array('my-css')    // add class name
    );

    return $fields;
}

For woocommerce_checkout_fields

add_filter('woocommerce_checkout_fields', 'custom_woocommerce_billing_fields');

function custom_woocommerce_billing_fields($fields)
{
    $fields['billing']['billing_options'] = array(
        'label' => __('NIF', 'woocommerce'), // Add custom field label
        'placeholder' => _x('Your NIF here....', 'placeholder', 'woocommerce'), // Add custom field placeholder
        'required' => false, // if field is required or not
        'clear' => false, // add clear or not
        'type' => 'text', // add field type
        'class' => array('my-css')   // add class name
    );

    return $fields;
}

Reference:

edited Feb 06 '20 at 10:40

Dharman

30,962
25
85
135

answered Feb 20 '17 at 10:49

Raunak Gupta

10,412
3
58
97

I doesn't work. All fields in Billing form are removed. And the new field is not added. No error is shown. – JPashs Feb 20 '17 at 11:29
@JPashs: I have't tested my code just out form my brain, but there is logical error in your hook and array params you are using `woocommerce_billing_fields` and again adding `['billing']`, as a result you are not getting the desired output. Just replace your hook with this `woocommerce_checkout_fields` and keep your mentioned function is question then also it'll work. – Raunak Gupta Feb 20 '17 at 11:38
I tried this: http://pastebin.com/raw/JrnHfuVT but not working yet. Can you please tell what am I missing and change the code in your answer. So that I can accept your answer. Thanks. – JPashs Feb 20 '17 at 11:49
It works. Thanks. But I created a new order filling this new field and then after I checked the order as admin in dashboard and I don't see the value sent for this field. I need to see the sent value in the order. What else do I need to do here? – JPashs Feb 20 '17 at 12:31
The new field is neither in the Edit/user page. I need to integrate the new field everywhere: Orders, User Profile, ...Let me know if this is another question and I will create a new question. Thanks. – JPashs Feb 20 '17 at 12:39
I figured it out. Thanks. – JPashs Feb 20 '17 at 14:20
Hi @JPashs, please can you share your solution? – Davey Dec 15 '17 at 12:29
3

Actually the field is saved, there is just no display of it. Adding an action for example to the admin order data will do the trick `add_action( 'woocommerce_admin_order_data_after_shipping_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 ); function my_custom_checkout_field_display_admin_order_meta($order){ echo '
'.__('Custom field title').': ' . get_post_meta( $order->get_id(), '_shipping_custom_field', true ) . '
'; }` – Victor Lazov Jan 24 '18 at 10:33
Hey there thanks so much for the solution! So the solution works however how would I add multiple new fields ? Only the last one is changing and I need to add like 5 new fields. Also how would one go about changing the order of the fields presented ? – RawalD Oct 25 '21 at 17:52
Its possible add a upload file field? – JJMontalban Nov 01 '21 at 16:47
@JJMontalban: Yes it is possible. I will try to provide an update ans within a day or two. – Raunak Gupta Nov 03 '21 at 08:13
@RawalD: I will try to provide an update ans within a day or two. – Raunak Gupta Nov 03 '21 at 08:13
@RaunakGupta Thanks alot Raunak i got it to work after some tinkering – RawalD Nov 03 '21 at 13:14
@RaunakGupta Thanks a lot and nice code. I have found anothers tutorials with upload file in checkout but not in Woocommerce account pages (`/my-account`, `/edit-address`, etc.). I need I have tried adding `woocommerce_account_dashboard` hook and `wp_insert_attachment` & `update_user_meta` functions. But But something fails me. I need customer can upload and edit the field himself and also be accessible by the admin from backend – JJMontalban Nov 04 '21 at 09:22
Any idea @RaunakGupta? – JJMontalban Nov 08 '21 at 10:52

Add a custom field to WooCommerce Billing form?

1 Answers1