Custom placeholder for all WooCommerce checkout fields Custom placeholder for all WooCommerce checkout fields wordpress wordpress

Custom placeholder for all WooCommerce checkout fields


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


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:enter image description here


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.