Rearrange WooCommerce checkout page data fields

With the default WooCommerce checkout form, the UI/UX is not very good.

Below is the code that helps you to rearrange the order of the input fields more convenient for users and the form to look more compact.

/**
Checkout fields
**/
 
add_filter( 'woocommerce_default_address_fields', 'hvm_custom_woocommerce_default_address_fields', 9999 );
function hvm_custom_woocommerce_default_address_fields( $fields ){
 
$fields['address_1']['class'] = array('form-row-wide', 'address-field');
$fields['address_2']['class'] = array('form-row-wide', 'address-field');
 
$fields['address_1']['priority'] = 30;
$fields['address_2']['priority'] = 31;
 
$fields['city']['priority'] = 50;
$fields['postcode']['priority'] = 55;
 
$fields['country']['priority'] = 65;
$fields['state']['priority'] = 60;
 
$fields['postcode']['class'] = array('form-row-last', 'address-field');
$fields['city']['class'] = array('form-row-first', 'address-field');
 
$fields['country']['class'] = array('form-row-last', 'address-field');
$fields['state']['class'] = array('form-row-first', 'address-field');
 
return $fields;
}

/**

Checkout fields

**/

add_filter( 'woocommerce_default_address_fields', 'hvm_custom_woocommerce_default_address_fields', 9999 );

function hvm_custom_woocommerce_default_address_fields( $fields ){

$fields['address_1']['class'] = array('form-row-wide', 'address-field');

$fields['address_2']['class'] = array('form-row-wide', 'address-field');

$fields['address_1']['priority'] = 30;

$fields['address_2']['priority'] = 31;

$fields['city']['priority'] = 50;

$fields['postcode']['priority'] = 55;

$fields['country']['priority'] = 65;

$fields['state']['priority'] = 60;

$fields['postcode']['class'] = array('form-row-last', 'address-field');

$fields['city']['class'] = array('form-row-first', 'address-field');

$fields['country']['class'] = array('form-row-last', 'address-field');

$fields['state']['class'] = array('form-row-first', 'address-field');

return $fields;

}

And results:

Rate this post

Chào ! Bạn thấy nội dung này thế nào?

Hữu ích 274 Tạm được 235

Tags: woocommerce WooCommerce checkout page

Đăng ký

2 Bình luận

Phản hồi nội tuyến

Xem tất cả bình luận

Jaime Rodriguez

13/03/2024 01:03

Looking forward to your next post. Keep up the good work!

Phản hồi

Gary Brock

23/03/2024 08:10

of course like your website but you have to check the spelling on several of your posts. A number of them are rife with spelling issues and I in finding it very troublesome to inform the reality on the other hand I will certainly come back again.