How to edit WooCommerce checkout fields

WooCommerce is a highly rated plugin in WordPress. Using this  Woocommerce checkout fields plugin you can easily develop your E-Commerce website with WordPress.

The default checkout page is great on the WooCommerce shop and it can be because it's a place where you get paid, so it is important to get it just right. But what to do if someone might want to edit WooCommerce checkout fields.

If you are wondering how to edit the WooCommerce checkout page then you are in the right place. Here we discuss how to edit the WooCommerce checkout page. So let’s have a look.

In below example, I edit WooCommerce checkout fields to change the label and placeholder text on the order comments box, as well as make the phone number, not a required field.  Adding a simple function to their theme’s functions.php file of your active child theme (or theme) file allowed me to achieve these results.

<pre>

add_filter( 'woocommerce_checkout_fields' , 'custom_woocommerce_checkout_fields' );

function custom_wc_checkout_fields( $fields ) {

$fields['order']['order_comments']['placeholder'] = 'Enter your placeholder text here.';

$fields['order']['order_comments']['label'] = 'Enter your label here.';

$fields['billing']['billing_phone']['required'] = false;

return $fields;

</pre>

If you want to remove the billing phone field completely from the checkout page then use the following line of code. Just add this line of code in your function.

<pre>

unset($fields['billing']['billing_phone']);

</pre>

Here I listed all the checkout fields that can be customized.

• [‘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’]
• [‘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’]

 

Each of the above fields can be customized with the following properties.

[‘type’]: It mentions what type of field you are displaying. Valid types are text, text area, password, or select.

[‘label’]: It mentions the text that indicates to the customer what to enter into the field.

[‘placeholder’]: It mentions the text that occupies the text box before the customer enters their information. This text “disappears” after the customer clicks in the field and begins typing.

[‘class’]: It mentions The class for the input.

[‘required’]: It’s used for validation. This value can be either true if the field is required or false if the field is not required.

[‘clear’] – This will apply a clear fix to the field or label it is set on. Valid values are true or false.

[‘label_class’] – Allows you to define a custom class for the label element it is set for.

[‘options’] – Allows you to set an array of options for select boxes.

I hope this post is helpful for your Ecommerce Store.

You can also visit the WooCommerce checkout page hooks guide.  It can help to grow your business. If you have any queries or need any help, feel free to contact our experienced developer at Lathiya Solutions, Surat. We are a team of experienced developers who can handle your query easily and quickly grow your business.