How to Reorder Checkout Fields In WooCommerce

How to Reorder Checkout Fields In WooCommerce
787 Views
3.6
(256)

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

NamePriority
billing_first_name10
billing_last_name20
billing_company30
billing_country40
billing_address_150
billing_address_260
billing_city70
billing_state80
billing_postcode90
billing_phone100
billing_email110

Shipping

NamePriority
shipping_first_name10
shipping_last_name20
shipping_company30
shipping_country40
shipping_address_150
shipping_address_260
shipping_city70
shipping_state80
shipping_postcode90

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;
}
?>
field set
<?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

How do I reorganize WordPress fields?

Drag and drop columns on the table edit page to reorder them, or set the “Order” numeric value in the input. When you save the table and reload it in the front end, the order of the columns will change.

How do I add a WooCommerce checkout field?

Select the field type in the Add New Field section, input a label name, and click Add Field to add a custom field to the WooCommerce checkout.

How useful was this blog?

Click on a star to rate it!

Average rating 3.6 / 5. Vote count: 256

No votes so far! Be the first to rate this blog.

  • CodexCoach

    - Web Development Expert

    CodexCoach is a skilled tech educator known for easy-to-follow tutorials in coding, digital design, and software development. With practical tips and interactive examples, CodexCoach helps people learn new tech skills and advance their careers.

Leave a comment

Your email address will not be published. Required fields are marked *