In WooCommerce checkout, the default layout places the email and phone fields at the top of the billing address form. However, you may want to rearrange these fields to appear after the first and last name fields for a better user experience. In this post, we’ll guide you through the process of moving the email and phone fields under the first and last name fields on the checkout page.
/**
* Snippet Name: Reposition Email and Phone Fields after First and Last Name Fields
* Snippet Author: wpsnippets.dev
*/
// changing position of email and phone field
function wps_move_email_phone_fields( $fields ) {
$fields['billing']['billing_email']['priority'] = 20;
$fields['billing']['billing_phone']['priority'] = 30;
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wps_move_email_phone_fields', 9999 );
Code Explanation
- This snippet uses the
woocommerce_checkout_fieldsfilter to modify the priority of the email and phone fields in the billing address section. By setting a higher priority value, we move these fields after the first and last name fields.