Move first and last name fields to the contact step

In this article, you are going to learn how to move the “First name” and “Last name” fields to the first step of the checkout process, the “Contact” step.

Currently, it is only possible to achieve this using the code snippet below:

Move first and last name fields below the email field

/**
 * Move billing "first name" and "last name" fields to the contact substep.
 */
function fluidcheckout_move_billing_name_fields_to_contact_substep( $contact_field_ids ) {
	// Fields after existing fields
	$contact_field_ids = array_merge( $contact_field_ids, array( 'billing_first_name', 'billing_last_name' ) );

	return $contact_field_ids;
}
add_filter( 'fc_checkout_contact_step_field_ids', 'fluidcheckout_move_billing_name_fields_to_contact_substep', 10 );

If you are unsure about how to add the code snippet to your website, check our article:
How to safely add code snippets to your WooCommerce website

Move first and last name fields before the email field

It is recommended to keep the email field as the first field on the checkout form to capture that information as soon as possible, however, if you want to display the first and last name fields before the email field, you can use the code snippet below instead.

/**
 * Move billing "first name" and "last name" fields to the contact substep.
 */
function fluidcheckout_move_billing_name_fields_to_contact_substep_before_email( $contact_field_ids ) {
	// Fields before existing fields
	$contact_field_ids = array_merge( array( 'billing_first_name', 'billing_last_name' ), $contact_field_ids );

	return $contact_field_ids;
}
add_filter( 'fc_checkout_contact_step_field_ids', 'fluidcheckout_move_billing_name_fields_to_contact_substep_before_email', 10 );

If you are unsure about how to add the code snippet to your website, check our article:
How to safely add code snippets to your WooCommerce website