instagram rss arrow-down

Are you looking to reorder checkout fields in WooCommerce? If so, this article is intended for you, as it will help you manage WooCommerce checkout fields and understand the basis tricks to enhance your sales. Check out our other article on how you can remove WooCommerce checkout fields.

In this guide, we will cover how to reorder the existing checkout fields using a plugin or with custom code.

Reorder Checkout Fields with Checkout Field Editor Plugin

The Checkout Field Editor plugin starts at $49 and allows users to add significant changes to their checkout pages. As compared to custom codes, this plugin easier to use and yields exceptional results. This is the simplest and easiest approach and you can manage any field through it.

In order to move the email field to the first place before any other field, all you have to do is to drag and drop your email field where you want it to be. This will activate your extension. In addition to it, this extension helps with editing fields in the shipping and billings section. This extension allows you to add new fields as well. In order to change the field attributes, you can use the Checkout Field Editor extension input type and placeholder text, change the position, and even add new fields. The only thing it does not tackle is the order review and purchase options. You also cannot use custom input types.

Using the Checkout Field Editor extension is effective in terms of moving fields and maintaining other updates. The following code will help you move the fields while maintaining the compatibility.

Reorder Checkout Fields by Using Code

Out of all the customizations, moving or reordering fields is a tough nut to crack. As WooCommerce does not offer any official or formal codes for this purpose, random samples are available out there to be utilized. A number of random samples fail to move or reorder fields but there are several methods that are simpler and easy to implement. Using the Checkout Field Editor extension is effective in terms of moving fields and maintaining other updates. The following code will help you move the fields while maintaining the compatibility.

Here is another way how you can change the order of your fields by simply using code into the child theme functions.php.  The WooCommerce filter code utilizes the built-in add_filter (“woocommerce_checkout_fields”). The additional fields in the code are “so-number2”, “account-number2”, “nc2”. The mentioned fields are given a priority and the fields are well-ordered by employing the function ‘custom_order_fields’. 

add_filter("woocommerce_checkout_fields", "custom_order_fields");

function custom_order_fields( $fields ) {
  $order = array(
    "billing_first_name",
    "billing_last_name",
    "billing_email",
    "billing_phone",
    "billing_country",
    "billing_company",
    "billing_address_1",
    "billing_address_2",
    "billing_city",
    "billing_postcode",
    "po-number2",
    "account-number2",
    "nc2",
  );
  foreach( $order as $field ) {
    $ordered_fields[$field] = $fields["billing"][$field];
  }
  $fields['billing'] = $ordered_fields;
  $fields['billing']['billing_first_name']['priority'] = 10;
  $fields['billing']['billing_last_name']['priority'] = 20;
  $fields['billing']['billing_email']['priority'] = 30;
  $fields['billing']['billing_phone']['priority'] = 40;
  $fields['billing']['billing_country']['priority'] = 50;
  $fields['billing']['billing_company']['priority'] = 60;
  $fields['billing']['billing_address_1']['priority'] = 70;
  $fields['billing']['billing_address_2']['priority'] = 80;
  $fields['billing']['billing_city']['priority'] = 90;
  $fields['billing']['billing_postcode']['priority'] = 95;
  $fields['billing']['po-number2']['priority'] = 100;
  $fields['billing']['account-number2']['priority'] = 101;
  $fields['billing']['nc2']['priority'] = 102;
  return $fields;
}

As mentioned before, there are several samples available in this regard but most of them do not yield the needed results. You can move or reorder fields by following the mentioned guide as well. You can put PHP snippets at the bottom of your child theme functions.php file. Furthermore, it also gets a place in your child theme style.css file. As a user, it is your responsibility to ensure that these delicate files are being handled in a proper manner.

3 Plugins to Enhance Checkout Order Fields Further

The best part about WooCommerce is its potential to allow its users to customize their checkout page. You do not have to get heavy plug-ins in order to customize your checkout page when you can use the proposed mechanism to reorder checkout fields and customize checkout pages in WooCommerce.

One Page Checkout

This plugin is a remarkable add-on since it allows users to place their product selection, sales copy, and checkout form together. Placing the aforementioned things on a single page is a great initiative since it enables the customers to go through the entire process without any difficulty. A number of businesses are benefitting from this customization option.

Checkout Add-ons

You can now add extra inputs now with this plugin and enhance the effectiveness of your checkout page. For instance, you can add gift-wrapping options along with upselling options. Adding your own custom checkout field will enhance the effectiveness of your business and will get you more revenue.

WooCommerce Smart Checkout

If you are shopping via mobile phone, WooCommerce Smart Checkout instantly enhances your mobile checkout experience. This will enhance your sales as well. It includes a smooth mobile checkout page. This can also include multi-step checkout and more.

Conclusion

This article offers various techniques and methods to move around fields and help you in reordering checkout fields in WooCommerce. You do not have to get plugins in order to get your work done when you use the aforementioned mechanisms to reorder checkout fields in WooCommerce. The coding solution are effective and work in several cases, but may take you more time. Make sure you fulfill all the requirements before running these codes. If you are looking for a solution on removing checkout fields, head over to our other article on how to how to remove billing fields from WooCommerce

Support New Articles with a Sweet Tee

One comment on “How to Reorder Checkout Fields in WooCommerce (2019)

  • JamesGrisa
    April 28, 2020 | 5:36 am

    Lovely Webpage, Continue the great job. Many thanks!

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

*

*