WooCommerce allows the developers to alter the features and functionality of the checkout and order form using actions and filters.
In this example, we are gonna alter the default label(placeholders) for some of the form fields.
In the same way, as mentioned in earlier WooCommerce tutorials, like How to remove fields from the form field, we will also use the functions.php file or your child theme to add the code.
Rename form label in WooCommerce
I assume that you have already opened up the functions.php file for editing. Then just paste this code inside:
// Hook in add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' ); // Our hooked in function - $fields is passed via the filter! function custom_override_checkout_fields( $fields ) { $fields['order']['order_comments']['placeholder'] = 'My new placeholder'; $fields['order']['order_comments']['label'] = 'My new label'; return $fields; }
You should notice right away that the code refers to the specific fields by their name and to specific form element group, e.g. “order”. There are 4 groups or form elements “billing, shipping, Account, and Order.
Here’s a full list of fields in the array passed to woocommerce_checkout_fields:
- 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
- Account
- account_username
- account_password
- account_password-2
- Order
- order_comments
This should do it.
Now, you might also need to limit your order to a certain delivery zones, we prepared an article on How to add city and Districts for shipping zones in WooCommerce.
Conclusion
Changing the labels or placeholders for the form elements in WooCommerce is easy. Just find the form elements in the list and add it to the example function code above, paste into the child theme functions file and it should work out of the box.
Feel free to share your impression and comments, or ask for assistance.