WooCommerce Change Checkout Field Placeholders

Pre-Requisites

There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution to your active theme’s functions.php or preferably the Code Snippets Plugin.

About this Solution

Changing the checkout form field placeholders is a relatively straight forward task and something you may wish to do based on your business needs. The Address Line 2 field for example is extremely ugly by default and if you have to keep the field, then changing the placeholder is a good idea. Do checkout our other guides on removing checkout fields as this is likely to improve the custom experience. Anyway, now to changing the WooCommerce checkout field placeholder text.

				
					/**
* Snippet Name:     Customise the checkout field placeholders.
* Snippet Author:   ecommercehints.com
*/

add_filter( 'woocommerce_checkout_fields' , 'ecommercehints_change_checkout_placeholders', 9999 );

function ecommercehints_change_checkout_placeholders( $f ) {

   // first name can be changed with woocommerce_default_address_fields as well
   $f['billing']['billing_first_name']['placeholder'] = 'As it appears on your ID';
   
   return $f;

}
				
			

How To Change Other Field Placeholders?

The first parameter in the square brackets on line 11 is the section of the checkout form. On the checkout form, there are three sections by default, the Billing section, the Shipping section, and Order section. To change a billing field placeholder, change the parameter to ‘billing’. To change a shipping field placeholder, change the parameter to ‘shipping’. The following list shows you the second parameter for each section, this being the checkout field ID:

Billing

  • billing_first_name
  • billing_last_name
  • billing_company
  • billing_address_1
  • billing_address_2
  • billing_city
  • billing_postcode
  • billing_country
  • billing_state
  • billing_email
  • billing_phone

Shipping

  • shipping_first_name
  • shipping_last_name
  • shipping_company
  • shipping_address_1
  • shipping_address_2
  • shipping_city
  • shipping_postcode
  • shipping_country
  • shipping_state

Order

  • order_comments
				
					/**
* Snippet Name:     Customise the checkout field placeholders.
* Snippet Author:   ecommercehints.com
*/

add_filter( 'woocommerce_checkout_fields' , 'ecommercehints_change_checkout_placeholders', 9999 );

function ecommercehints_change_checkout_placeholders( $f ) {

   // first name can be changed with woocommerce_default_address_fields as well
   $f['billing']['billing_first_name']['placeholder'] = 'As it appears on your ID';
   
   return $f;

}
				
			

Snippet Benefits

  • Tailor your checkout form place holder fields to meet your business needs.
  • Change the ugly, existing field placeholders to something more user friendly.
WooCommerce Conversion Rate Optimisation (CRO) eBook
100 WooCommerce Conversion Rate Optimisation Tips

Leave a Reply

If you are going to write code in the comments, please wrap it between code tags.

Your email address will not be published. Required fields are marked *

Other Recent Guides

Subscribe To Emails

Get exclusive WooCommerce tips that I only share with email subscribers

Join hundreds of other subscribers