Custom placeholder for all WooCommerce checkout fields

Question

I am trying to add a placeholder to my WooCommerce checkout fields, and it's working perfectly for every field except for the phone and the email fields.

This is the code I am using:

add_filter('woocommerce_default_address_fields', 'override_address_fields');
function override_address_fields( $address_fields ) {
    $address_fields['first_name']['placeholder'] = 'Fornavn';
    $address_fields['last_name']['placeholder'] = 'Efternavn';
    $address_fields['address_1']['placeholder'] = 'Adresse';
    $address_fields['state']['placeholder'] = 'Stat';
    $address_fields['postcode']['placeholder'] = 'Postnummer';
    $address_fields['city']['placeholder'] = 'By';
    $address_fields['phone']['placeholder'] = 'Telefon';
    $address_fields['email']['placeholder'] = 'Email';
    return $address_fields;
}

Where am I going wrong? Why isn't the phone and email putting out any results?

I have taken the IDs from that two fields using my browser developer tool inspector.

Edit:

I have also tried this suggested code:

add_filter('woocommerce_checkout_fields', 'override_checkout_fields');
function override_checkout_fields( $checkout_fields ) {
    $checkout_fields['first_name']['placeholder'] = 'Fornavn';
    $checkout_fields['last_name']['placeholder'] = 'Efternavn';
    $checkout_fields['address_1']['placeholder'] = 'Adresse';
    $checkout_fields['state']['placeholder'] = 'Stat';
    $checkout_fields['postcode']['placeholder'] = 'Postnummer';
    $checkout_fields['city']['placeholder'] = 'By';
    $checkout_fields['phone']['placeholder'] = 'Telefon';
    $checkout_fields['email']['placeholder'] = 'Email';
    return $checkout_fields;
}

And this one too:

add_filter('woocommerce_checkout_fields', 'override_checkout_fields');
function override_checkout_fields( $checkout_fields ) {
    $checkout_fields['billing_first_name']['placeholder'] = 'Fornavn';
    $checkout_fields['billing_last_name']['placeholder'] = 'Efternavn';
    $checkout_fields['billing_address_1']['placeholder'] = 'Adresse';
    $checkout_fields['billing_state']['placeholder'] = 'Stat';
    $checkout_fields['billing_postcode']['placeholder'] = 'Postnummer';
    $checkout_fields['billing_city']['placeholder'] = 'By';
    $checkout_fields['billing_phone']['placeholder'] = 'Telefon';
    $checkout_fields['billing_email']['placeholder'] = 'Email';
    return $checkout_fields;
}

But it doesn't work.

Hello there, I have a working tested answer regarding your question, please try it. Some feed back on it should be appreciated. Thanks — LoicTheAztec, Sep 21 '17 at 22:37
Hi @LoicTheAztec great answer, thanks. Now, how to customize the placeholders in the login fields? `$fields['account']['account_username']['placeholder'] = __( 'Email*', 'woocommerce' );`should work with the filter `woocommerce_checkout_fields`...but it doesn't. — Louis, Jul 23 '20 at 18:16
Actually the question has been posted here : https://stackoverflow.com/questions/57340779/woocommerce-add-placeholder-text-to-login-form-user-field can you give us an answer there ? — Louis, Jul 23 '20 at 18:25
@Louis Your answer can't work on my account login form… I have answered… You can check it and if you like/want, you can upvote the answer. — LoicTheAztec, Jul 23 '20 at 19:23

LoicTheAztec · Accepted Answer · 2020-07-23T19:31:24.073

Looking at the official docs, you will see that there is no 'phone' and 'email' key fields for the default addresses when using woocommerce_default_address_fields filter hook.
Accepted fields keys are:
country, first_name, last_name, company, address_1, address_2, city, state, postcode.

This is why you can get changes using woocommerce_default_address_fields

Email and phone are billing fields and they are available trough woocommerce_checkout_fields filter hook. They are named (see in the documentation) 'billing_phone' and 'billing_phone'…

The correct way to override them is:

add_filter( 'woocommerce_checkout_fields' , 'override_billing_checkout_fields', 20, 1 );
function override_billing_checkout_fields( $fields ) {
    $fields['billing']['billing_phone']['placeholder'] = 'Telefon';
    $fields['billing']['billing_email']['placeholder'] = 'Email';
    return $fields;
}

And for the others fields (billing and shipping):

add_filter('woocommerce_default_address_fields', 'override_default_address_checkout_fields', 20, 1);
function override_default_address_checkout_fields( $address_fields ) {
    $address_fields['first_name']['placeholder'] = 'Fornavn';
    $address_fields['last_name']['placeholder'] = 'Efternavn';
    $address_fields['address_1']['placeholder'] = 'Adresse';
    $address_fields['state']['placeholder'] = 'Stat';
    $address_fields['postcode']['placeholder'] = 'Postnummer';
    $address_fields['city']['placeholder'] = 'By';
    return $address_fields;
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

All code is tested on Woocommerce 3+ and works.

Reference: Customizing checkout fields using actions and filters

For the login form fields: Customize WooCommerce login form user fields

This was the solution! You are amazing, thanks a lot. For everybody with same issues try this out. — eMikkelsen, Sep 25 '17 at 16:09
But what you do if you want an addres field like ADDRESS_1 to be required, i cant figure that one out. Where do you put the required point in. — amir hanif, Jun 11 '18 at 14:50
@amirhanif You might look for `$address_fields['address_1']['required'] = true;` to be placed in the 2nd hooked function (in this answer code). — LoicTheAztec, Jun 11 '18 at 15:10
There is a mistake in this answer. If you want to replace the email placeholder use $fields['billing']['billing_email']['placeholder'] not $fields['billing']['billing_phone']['placeholder'] — Laurent, Feb 22 '19 at 17:16

score 3 · Answer 2 · answered Feb 12 '19 at 18:24

per the official documentation https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/ Here you have the updated code:

 add_filter( 'woocommerce_checkout_fields' , 'override_billing_checkout_fields', 20, 1 );
 function override_billing_checkout_fields( $fields ) {

     $fields['billing']['billing_first_name']['placeholder'] = 'Prénom';
     $fields['billing']['billing_last_name']['placeholder'] = 'Nom';
     $fields['billing']['billing_company']['placeholder'] = 'Nom de la société (optionnel)';
     $fields['billing']['billing_postcode']['placeholder'] = 'Code postal';
     $fields['billing']['billing_phone']['placeholder'] = 'Téléphone';
     $fields['billing']['billing_city']['placeholder'] = 'Ville';


     $fields['shipping']['shipping_first_name']['placeholder'] = 'Prénom';
     $fields['shipping']['shipping_last_name']['placeholder'] = 'Nom';
     $fields['shipping']['shipping_company']['placeholder'] = 'Nom de la société (optionnel)';
     $fields['shipping']['shipping_postcode']['placeholder'] = 'Code postal';
     $fields['shipping']['shipping_phone']['placeholder'] = 'Téléphone';
     $fields['shipping']['shipping_city']['placeholder'] = 'Ville';

     return $fields;
 }

Result:

fyllepo · Answer 3 · 2017-09-20T16:24:48.317

0

Looking through the WooCommerce documentation you may want to try using the woocommerce_checkout_fields filter instead of woocommerce_default_address_fields

Seems more logical as the fields above aren't all address related, and that hook derived from class-wc-countries.php.

Also, note the field names are different based on the context of the page, for example, the billing page fields are named as so:

billing_first_name
billing_last_name
billing_email
billing_phone

Hope that helps! Good luck.

edited Sep 20 '17 at 16:24

answered Sep 20 '17 at 16:09

fyllepo

1,944
2
13
16

Thank you so much for helping out! I tried this at first, but then it just adds no placeholders to any of them. Am I doing it wrong? I edited your psot with the code. – eMikkelsen Sep 20 '17 at 16:16
@eMikkelsen I've edited my original answer, that should be it. – fyllepo Sep 20 '17 at 16:25
Thank you for still helping out. Just tried the above code as well, and changing these fields adding billing_ does not help either. I have attached the full code in the edit in the top. – eMikkelsen Sep 20 '17 at 16:34

Custom placeholder for all WooCommerce checkout fields

3 Answers3

Linked