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.
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