How to Reorder Checkout Fields In WooCommerce

You may need to reorganize the WooCommerce checkout fields from time to time, depending on your website and consumers. Do you want to rearrange the WooCommerce checkout fields on your website?

WooCommerce allows you to reorganize and rearrange various items on your eCommerce website in order to increase conversion rates. The checkout fields inside them may also be adjusted to meet the demands of your website and clients.

Checkout Reordering Fields within a Field Group

To reorder the WooCommerce checkout fields, you can use a number of code snippets on your website. But first, you should know that the fields are divided into four categories:

• shipping – Shipping Address
• billing – Billing Address
• order – Additional information
• account – Account Login

Reorder Checkout fields priority

The fields may be found in the list below. The number following the fields represents their priority.

Billing

Shipping

Move Field

You may use the following code snippet to relocate a checkout field to the top, or first row, of the page.

<?php
add_filter( 'woocommerce_checkout_fields', 'cxc_checkout_billing_company_first' );
function cxc_checkout_billing_company_first( $checkout_fields ) {
	$checkout_fields[ 'billing' ][ 'billing_company' ][ 'priority' ] = 4;
	return $checkout_fields;
}
?>

<?php
add_filter( 'woocommerce_checkout_fields' , 'cxc_checkout_billing_fields_styling', 99 );
function cxc_checkout_billing_fields_styling( $checkout_fields ) {

	$checkout_fields['billing']['billing_first_name']['class'][0] = 'form-row-wide';
	$checkout_fields['billing']['billing_last_name']['class'][0] = 'form-row-wide';
	$checkout_fields['billing']['billing_company']['class'][0] = 'form-row-first';
	$checkout_fields['billing']['billing_country']['class'][0] = 'form-row-last';
	$checkout_fields['billing']['billing_email']['class'][0] = 'form-row-first';
	$checkout_fields['billing']['billing_phone']['class'][0] = 'form-row-last';

	return $checkout_fields;

}
?>

Phone Fields to Another Field Group

The code snippet may do more than simply move a field to the top of the WooCommerce checkout field. You may also alter or create additional code snippets to transfer a field to another group.

<?php
add_filter( 'woocommerce_checkout_fields', 'cxc_billing_phone_another_group' );
function cxc_billing_phone_another_group( $checkout_fields ){

	// 1. We assign a field array to another group here
	$checkout_fields[ 'order' ][ 'billing_phone' ] = $checkout_fields[ 'billing' ][ 'billing_phone' ];

	// 2. Remove a field from a previous location
	unset( $checkout_fields[ 'billing' ][ 'billing_phone' ] );

	return $checkout_fields;

}
?>

Conclusion

These are the many methods for reordering WooCommerce checkout fields on your website. It is a really nice tweak that you may add to your checkout page to ensure your clients’ delight.

We hope you found this tutorial useful. Here are some further articles that may be of interest to you:

How to Create WooCommerce Checkout Billing And Shipping Fields Validation

How to Edit Payment Gateway Title and Description in WooCommerce

How to Create and apply Coupons Programmatically in WooCommerce

FAQ