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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | /** 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:
Copyright protected by Digiprove © 2023Chào ! Bạn thấy nội dung này thế nào?
![[Thủ thuật] Ngăn WordPress scaled (thu nhỏ) kích thước hình ảnh](https://huanvm.com/wp-content/uploads/2022/07/huanvmdotcom-wordpress-tu-dong-thu-nho-hinh-anh-goc.jpg "[Thủ thuật] Ngăn WordPress scaled (thu nhỏ) kích thước hình ảnh 10")
Looking forward to your next post. Keep up the good work!
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.