Change Rename form Labels in WooCommerce

How to change / rename form labels in WooCommerce

Davor 03/08/2020

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

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.

 

Davor Veselinović

I'm Davor, founder of Worda Themes. Working as a Full Stack Developer with more than a decade of experience with WordPress. I build themes and plugins and enjoy writing useful blog posts and share my ideas with others.

Leave a Reply

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