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