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?
![[Hướng dẫn] Sử dụng NGINX, RTMP và HLS làm server streaming videos](https://huanvm.com/wp-content/uploads/2022/11/huanvmdotcom-streaming-video-using-nginx.png "[Hướng dẫn] Sử dụng NGINX, RTMP và HLS làm server streaming videos 12")
