Veteran Owned & Operated
I had a client recently request to change some of the default WooCommerce checkout page field labels and placeholders.
Fortunately, WooCommerce provides a handy filter that makes this easy. The woocommerce_checkout_fields filter.
First, we add the filter to our functions.php file like so:
| <?php | |
| // WooCommerce Checkout Fields Hook | |
| add_filter( 'woocommerce_checkout_fields' , 'hjs_wc_checkout_fields' ); | |
| // This example changes the default placeholder text for the state drop downs to "Select A State" | |
| function hjs_wc_checkout_fields( $fields ) { | |
| $fields['billing']['billing_state']['placeholder'] = 'Select A State'; | |
| $fields['shipping']['shipping_state']['placeholder'] = 'Select A State'; | |
| return $fields; | |
| } |
In my example above, I’m changing the state placeholder text to “Select A State” for both the Billing and Shipping Forms.
The way this works is you first add the billing or shipping form field option, for example, ['billing']['billing_first_name'] , then you apply the property that you want to change related to that field. So if I wanted to change the label text for the billing first name field, it would look like this:
$fields['billing']['billing_first_name']['label'] = 'Your First Name';
Below is a list of all the available options that can be modified on both forms.
| <?php | |
| // Billing Field - left side of checkout page | |
| ['billing']['billing_first_name'] | |
| ['billing']['billing_last_name'] | |
| ['billing']['billing_company'] | |
| ['billing']['billing_address_1'] | |
| ['billing']['billing_address_2'] | |
| ['billing']['billing_city'] | |
| ['billing']['billing_postcode'] | |
| ['billing']['billing_country'] | |
| ['billing']['billing_state'] | |
| ['billing']['billing_email'] | |
| ['billing']['billing_phone'] |
| <?php | |
| // Shipping Field - right side of checkout page | |
| ['shipping']['shipping_first_name'] | |
| ['shipping']['shipping_last_name'] | |
| ['shipping']['shipping_company'] | |
| ['shipping']['shipping_address_1'] | |
| ['shipping']['shipping_address_2'] | |
| ['shipping']['shipping_city'] | |
| ['shipping']['shipping_postcode'] | |
| ['shipping']['shipping_country'] | |
| ['shipping']['shipping_state'] | |
| ['account']['account_username'] | |
| ['account']['account_password'] | |
| ['account']['account_password-2'] | |
| ['order']['order_comments'] |
And here is the list of available properties:
| <?php | |
| // These are the specific properties that can be used to customize the checkout fields | |
| ['type'] // Field Type. Valid types are text, textarea, password, or select. | |
| ['label'] // Field Label. Above the input box. | |
| ['placeholder'] // Placeholder text. Inside the input box. | |
| ['class'] // add a class to the field | |
| ['required'] // Display whether field should be required or not. Values either "true" or "false" | |
| ['clear'] // Apply clear fix to the field. Values either "true" or "false" | |
| ['label_class'] // add class to field label | |
| ['options'] // modify select boxes with an array of values |
Leave a Reply