woocommerce_checkout_fields is an action hook in WooCommerce that is used to display and modify the checkout fields on the checkout page. When this hook is triggered, it generates an array of checkout fields that are used to build the checkout form.
This array includes various fields, such as billing details, shipping details, and order notes, and each field is represented by an array of properties. These properties include the field’s label, type, placeholder, default value, required status, and more.
By default, the checkout fields are displayed in a specific order on the checkout page. However, you can modify the order of the fields, their properties, and their appearance using various filters that are attached to this hook.
For example, you can use the woocommerce_checkout_fields hook to modify the order of the fields, hide specific fields, add new fields, or change the properties of existing fields. You can also add custom validation to the checkout fields using this hook.
Use cases of the woocommerce_checkout_fields hook
To change the order of the checkout fields
The priority property determines the order in which the fields are displayed. The higher the priority value, the lower down the field appears on the checkout page.
/**
* Change the order of the checkout fields
*/
function filter_reorder_checkout_fields( $checkout_fields ) {
$checkout_fields['billing']['billing_phone']['priority'] = 15;
$checkout_fields['billing']['billing_email']['priority'] = 25;
return $checkout_fields;
}
add_filter( 'woocommerce_checkout_fields', 'filter_reorder_checkout_fields', 100 );In the code snippet above, the billing_phone field is given a priority value of 15 and the billing_email field is given a priority value of 25. This means that the phone field will appear before the email field on the checkout page.
To change properties of the checkout fields
/**
* Set a class and the readonly attribute to checkout fields
*/
function filter_reorder_checkout_fields( $checkout_fields ) {
// Get the current user object.
$current_user = wp_get_current_user();
// If the current user is logged in, force the email to be the current user's email
if ( $current_user->ID ) {
$checkout_fields['billing']['billing_email']['class'][] = 'hidden-field';
$checkout_fields['billing']['billing_email']['custom_attributes'] = [ 'readonly' => true ];
}
return $checkout_fields;
}
add_filter( 'woocommerce_checkout_fields', 'filter_reorder_checkout_fields', 100 );The code snippet above checks whether the current user is logged in by checking the ID property of the current user object. If the user is logged in, the code adds a CSS class called hidden-field to the billing_email field under the billing key of the $checkout_fields array. This class could be used to hide the email field on the checkout page so that the user’s email cannot be modified during checkout.
Additionally, the code adds a custom_attributes property to the billing_email field with a readonly attribute set to true. This makes the email field read-only so that the user cannot modify their email even if they manage to unhide the field.