How to reorder checkout fields on WooCommerce order page with code
In this article, we will cover all the details related to reordering the checkout fields on your WooCommerce checkout page without using plugin.
The checkout order fields are used to collect information about your customers’ orders like shipping address or payment data. The data is used to ship the product, process the payment and or optimise the customer experience. The fields are placed just below the order items table but they don’t interfere with the products as they aren’t added on the product page.
Have you ever wondered how can you change the order of fields in WooCommerce checkout page? There are many reasons why you might want to reorder the fields in your WooCommerce checkout page. Many shop owners dislike the default order of fields present in WooCommerce checkout page and they prefer to set their own fields in their own custom order. I hope this article will help you out in setting order of any fields in the WooCommerce checkout page to your own.
This can be helpful when the form for your customers is getting hard to fill in because of long and confusing labels or just because you want the customer to fill in a different information first.
You can of course use a dedicated WooCommerce plugin like WooCommerce checkout fields manager or the WooCommerce checkout field editor but in this article we are going to explore the option of reordering the checkout fields of the WooCommerce checkout form page without using a dedicated WordPress plugin.
With version 3+ of WooCommerce core, there is a new priority argument for the checkout field and similar action functions. This argument makes sure that if we have multiple fields in the checkout then they are arranged by order of importance set value in the “priority” argument.
|
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
add_filter( "woocommerce_checkout_fields", "my_reordering_checkout_fields", 15, 1 ); function my_reordering_checkout_fields( $fields ) { ## ---- Billing Fields ---- ## // Set the order of the fields $billing_order = array( 'billing_first_name', 'billing_last_name', 'billing_email', 'billing_phone', 'billing_company', 'billing_address_1', 'billing_address_2', 'billing_postcode', 'billing_city', 'billing_state', 'billing_country' ); $count = 0; $priority = 10; // Updating the 'priority' argument foreach($billing_order as $field_name){ $count++; $fields['billing'][$field_name]['priority'] = $count * $priority; } // Change the CSS class $fields['billing']['billing_email']['class'] = array('form-row-first'); $fields['billing']['billing_phone']['class'] = array('form-row-last'); $fields['billing']['billing_postcode']['class'] = array('form-row-first'); $fields['billing']['billing_city']['class'] = array('form-row-last'); ## ---- Return the new fields order ---- ## return $fields; } |
Conclusion
Reordering your checkout fields can help increase the number of sales, as it can improve your user experience and make it more convenient for users as they won’t have to search through the entire form to find the field they are looking for. In this tutorial we showed you how to reorder or change labels of the checkout fields on your WooCommerce checkout page.