Posted on

WooCommerce: Move / Reorder Checkout Fields (Email, Country, etc.)

We’ve already seen how to disable fields on the checkout page by using a simple snippet.

Given my ultimate goal of trying to do as much as possible without installing heavy-weight plugins, today we’ll take a look at how to move fields around inside the billing & shipping sections.

WooCommerce: move billing/shipping checkout fields around
WooCommerce: move billing/shipping checkout fields around

PHP Snippet: Move / Reorder Fields @ WooCommerce Checkout Page

WooCommerce 3.0 has added a “priority” field to each billing and shipping field. Now moving fields @ checkout is much easier!


/**
 * @snippet       Move / ReOrder Fields @ Checkout Page, WooCommerce version 3.0+
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=19571
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.5.1
 */

add_filter( 'woocommerce_default_address_fields', 'bbloomer_reorder_checkout_fields' );
 
function bbloomer_reorder_checkout_fields( $fields ) {

	// default priorities: 
	// 'first_name' - 10
	// 'last_name' - 20
	// 'company' - 30
	// 'country' - 40
	// 'address_1' - 50
	// 'address_2' - 60
	// 'city' - 70
	// 'state' - 80
	// 'postcode' - 90
 
  // e.g. move 'company' above 'first_name':
  // just assign priority less than 10
  $fields['company']['priority'] = 8;

  return $fields;
}

PHP Snippet: Move / Reorder Email Field @ WooCommerce Checkout Page


/**
 * @snippet       Move / ReOrder Fields @ Checkout Page, WooCommerce version 3.0+
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=19571
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.5.1
 */

add_filter( 'woocommerce_billing_fields', 'bbloomer_move_checkout_email_field', 10, 1 );

function bbloomer_move_checkout_email_field( $address_fields ) {
    $address_fields['billing_email']['priority'] = 5;
    return $address_fields;
}

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

77 thoughts on “WooCommerce: Move / Reorder Checkout Fields (Email, Country, etc.)

  1. Hey Rodolfo!

    Not sure what I’m doing wrong but the field override only happens when the country is changed in checkout.
    For example:

         function bbloomer_move_checkout_email_field( $address_fields ) {
             $address_fields['billing_email']['priority'] = 1;
             return $address_fields;
         }
     
         add_filter( 'woocommerce_billing_fields', 'bbloomer_move_checkout_email_field', 10 , 1 );
    

    I’m using woocommerce 3.5.0

    1. Yes, Emina, thanks for that – see previous comment πŸ™‚

  2. Hi there, just wanted to let you know that this code has stopped working since the recent version of Woocommerce.

    Regards,

    1. Hey Moe, thanks for your comment! Yes, it seems there is a bug with WooCommerce – I just posted the issue here: https://github.com/woocommerce/woocommerce/issues/21751

  3. Hello Rodolfo how are you? I have a problem, the fields that are not by default do not add them to me. What solution could I do? Add a new field to upload a file and I have not been able to reorder it in any way. I await your answer friend! Thanks for your time

    1. Hello Jose, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  4. Hi there,

    Thank you for the code btw – it’s helped me out a lot!

    I’m still trying figure out how to add the account sections to the top, i.e username and password.

    Can you use the same layout for the account section as shown above?

    1. Hey Max – thanks so much for your comment! I’m not 100% sure, but the account fields might be separate from the billing ones so they could only moved in bulk to the very top of the checkout. Try studying the checkout-form template and see if you can spot something there πŸ™‚

  5. Hi Rodolfo, thank, of course I understand, but do you maybe know the hook that I would need to use for my filter? I will try to figure out how to do it myself…
    Maria

    1. Hey Kristina! You should look into the form-edit-address.php file and backtrace to see what filter you should be using πŸ™‚

  6. hello Rodolfo,
    I have reordered und changed/unset a few of my billing and shipping fields on the checkout page. Thank you for your snippet! However, on the “My Account” page that every registered or just signed up user has(to add or edit his addresses), you can still the shipping and billing fields unchanged. Is there a way to also change these?

    thank you!
    Maria

    1. Hello Maria, thanks for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  7. Hi Rudolfo. Just used the top code to put the country field at the top of the form. Woocommerce and wordpress 4.9. worked perfectly.

  8. Is there a way to move the Order Comments (order_comments) field on the Checkout page to the Cart page?
    Reason is because if people use PayPal or Amazon Pay on the Cart page to pay (thus skipping the form), they will not get to the Checkout page at all to leave note/comments…

    1. Vuster, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  9. Dear Rodolfo

    I used this code that you mentioned above but unfortunately, Address_1 always locate above city meanwhile I set priority 42 for city. Can you help me about that?

    it’s the code that I have used:

    $fields[‘state’][‘priority’] = 41;
    $fields[‘city’][‘priority’] = 42;

    Many thanks for your awesome article

    1. Mehdi, thanks so much for your comment! Unfortunately this is custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~R

  10. Hello! Is it possible in woocommerce to display Shipping methods first on the checkout page?

    And based on options (local pickup / shipping), we can control which fields to be displayed for billing address? As I dont want to force my customer to enter full address if he is opting for Local Pickup.

    1. Hey Pyatachok, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

  11. This works only for default flieds.
    Example
    1. add a custom field to billing.

     
    /* Adauga CNP*/
    add_filter( 'woocommerce_checkout_fields' , 'cod_numeric_personal' );
    function cod_numeric_personal( $fields ) {
         $fields['billing']['billing_cnp'] = array(
         'label'     => __('CNP', 'woocommerce'),
        'placeholder'   => _x('CNP', 'placeholder', 'woocommerce'),
        'required'  => false,
        'class'     => array('fizica form-row-wide'),
        'clear'     => true
         );
         return $fields;
    }
    

    2. reorder fields WC 3.0

    add_filter( 'woocommerce_default_address_fields', 'bbloomer_move_checkout_fields_woo_3' );
    function bbloomer_move_checkout_fields_woo_3( $fields ) {
     $fields['billing_cnp']['priority'] = 8;
      return $fields;
    }
    

    The second snipped adds a new field without label, first position of billing

    1. I think i figured out.
      If you want to add a custom field to billing and reorder it

      function wc_imod_billing_fields( $address_fields ) {
              $address_fields['billing_cnp']['placeholder'] = 'CNP';
              $address_fields['billing_cnp']['label'] = 'CNP';
      	$address_fields['billing_cnp']['required'] = true;
      	$address_fields['billing_cnp']['priority'] = 22;
          return $address_fields;
      }
      add_filter( 'woocommerce_billing_fields', 'wc_imod_billing_fields', 10, 1 ); 
      
      
    2. Thanks for your valuable feedback Stefan!

  12. Hey guys.

    Is there an easy way to display the billiing address fields in Shipping session?
    I’m using a multistep plugin, and I wanted my customer to fill address info in second step, which will be the “shipping” session.
    I don’t really ship stuff, as I only sell virtual products.

    I have the Extra Checkout Fields plugin, if I just Disable the fields in Billing and recreate them in Shipping, with same name and all, will it behave properly?

    BR,

    Diego

    1. Hey Diego, thanks for your comment! If you don’t ship stuff, you should disable shipping from the General settings: https://docs.woocommerce.com/document/configuring-woocommerce-settings/#section-1

  13. Hi there. That’s a really straightforward function. It helped me a lot! Thanks.

    However, it seems impossible to me to reorder the billing_postcode | shipping_postcode fields, which I’d like to place right before the country select field as follows:

     
    $fields2['billing']['billing_postcode'] = $fields['billing']['billing_postcode'];
    $fields2['billing']['billing_country'] = $fields['billing']['billing_country'];
    

    It seems WooCommerce 2.6.x will reorder the billing_postcode | shipping_postcode fields according to the locale as set in `wc-address-i18n.js` https://github.com/woocommerce/woocommerce/blob/release/2.6/assets/js/frontend/address-i18n.js#L45

    I’d really I’m not sure how to solve this issue. I’d really appreciate any inputs regarding an alternative method in order to achieve that.

    Best wishes,
    Adriano

    1. Hey Adriano! Hopefully you’re using Woo 3.0.6 by now? πŸ˜€

  14. Hi Rodolfo,
    Great work and thank you for updating and helping everyone out so regularly. πŸ™‚

    This might be a dumb question from a novice (me), but why in the Woocommerce 3.0.4 snippet at the top is there no ’email’ or ‘phone’ fields?
    Did I miss it mentioned somewhere else?
    I would like to move my email and phone fields as they are appearing last in the field order.

    Thank you again.
    Peter.

    1. In addition….
      I tried the 3.0.4 snippet with the field names ’email’ and ‘phone’ and set their respective priorities and they didn’t move. The other fields listed in the snippet however moved ok.

    2. Hey Peter, thanks for your comments! Email and Phone are generated via a different function so they will require a different filter – do a search through the PHP to see if you can find it πŸ™‚

    3. Thanks Rodolfo and Maxim.
      That did the trick.

  15. Hi Rodolfo,

    Thanks for the snippets, they helps me very well!

    I think you need add example for billing fields to Woo 3.x examples

    function ld_wc_filter_billing_fields( $address_fields ) {
        $address_fields['billing_email']['priority'] = 30;
    
        $address_fields['billing_phone']['required'] = false;
        $address_fields['billing_phone']['priority'] = 98;
        return $address_fields;
    }
    add_filter( 'woocommerce_billing_fields', 'ld_wc_filter_billing_fields', 10, 1 );
    
    1. Thank you so much Maxim!

    2. Will this make Email and Phone number on top ?

    3. Was able to bring on top of first and last name
      here is actual code
      function ld_wc_filter_billing_fields( $address_fields ) {
      $address_fields[‘billing_email’][‘priority’] = 9;

      $address_fields[‘billing_phone’][‘required’] = false;
      $address_fields[‘billing_phone’][‘priority’] = 8;
      return $address_fields;
      }
      add_filter( ‘woocommerce_billing_fields’, ‘ld_wc_filter_billing_fields’, 10, 1 );

    4. Thanks Kumar πŸ™‚

  16. Hi Rodolfo,

    I am simply wanting to add email address field in billing to go to the very top of the form fields. I don’t see email as a customisable option in your code above for 3.0? Do I just add the field in there like the others and assign 8 (anything lower than 10)? Very new to this. I do have a child theme and have the functions php window open… I also want to know how to make phone field an optional field, not a required field?

    Much thanks!

    Becky

  17. Hi Rodolfo,
    unfortunately the snippet is not working anymore after the newest update of Woocommerce. Do you know what needs to be changed?

    Thanks!
    Patrick

    1. Hey Patrick, well spotted! I did some research and in fact I found this in the forums: https://wordpress.org/support/topic/reordering-checkout-fields-doesnt-work-anymore-on-3-0-4/.

      So, I took some time to update this article, and now you’ve got the solution at the top of the page πŸ™‚

      Cheers!

    2. Hi Rodolfo,
      thank you so much!
      May I also ask: I need to not only reorder the fields, but also change required to non-required, change label etc…so would I need to add for example:

      add_filter( 'woocommerce_default_address_fields', 'bbloomer_move_checkout_fields_woo_3' );
        
      function bbloomer_move_checkout_fields_woo_3( $fields ) {
       
        $fields['company']['priority'] = 8;
        $fields['company']['required'] =  true;
        $fields['billing_phone']['label'] = 'Telephone';
       
        return $fields;
      }

      Is this correct?
      Thank you!
      Patrick

    3. Hey Rodolfo,
      thanks, but if I compare the two they are actually the same??

      Patrick

    4. Ah πŸ™‚ You’re right! By the way, have you tried your snippet yet?

    5. Yes, it’s working, thank you so much! I really appreciate it!

  18. Hi Rodolfo,

    Long time no see. I think we talk couple years ago. πŸ™‚

    I want to move custom fields defined by one plugin to “woocommerce_checkout_order_review”. Is it possible with a snippet? Thanks.

    1. Hey Robert πŸ™‚ Yes, this is possible, and it will depend on your custom plugin, so unfortunately I don’t have a “universal” snippet that can help. Thank you!

  19. hi
    some of the fields eg first name are half off the left margin on the checkout page any ideas guys
    thanks

    phil

    1. Hey Phil thanks for your comment! Do you have a screenshot? Is this related to my snippet?

  20. Hi Rodolfo,

    Great snippet! Thanx!
    On my webshop every order is “shipped to a different address”, so I would like to hide the “ship to different address” checkbox.
    Do you know how I can fix this?

    Kind regards,

    Rob

  21. Hello Rodolfo,
    I have learned many great snippets from you and wanted to thank you for that. I also have a question and was wondering if you could help: I need to change the layout of the checkout page. I need to move the payment options with the “agree to terms&conditions” checkbox ABOVE the order-review table. The Order button should stay at the bottom though.
    I know this has to be done by overriding the template in a child theme, but I just can’t get this to work as the payment option box is combined together with the order-reviwe table in the template. Maybe there is an option for this via a function, but I am not very well versed in PHP…

    I would love to hear back from you, many thanks!
    Felix

    1. Thanks very much for your comment Felix! Have you tried watching my tutorial at https://businessbloomer.com/customize-checkout-page-woocommerce? That should help you a little πŸ™‚

    2. Hi Rodolfo,
      thank you, but I am really not much further πŸ™ I know I can remove the payment box with

      remove_action( ‘woocommerce_checkout_order_review’, ‘woocommerce_checkout_payment’, 20 );

      and add it somewhere else, but this also removes the terms&condition checkbox as well as the order button, which I want to keep underneath the order-review table

    3. Hey Felix, yes, of course you remove the whole section with that remove_action, so it’s really not the best thing to do in this case. Maybe you should use the template override that I don’t particularly like: https://docs.woocommerce.com/document/template-structure/

    4. Hi Rodolfo,
      yes, liike I mentioned I have tried to get this to work but every time I override these templates I am getting a white screen. I can’t figure out what I need to change in these templates…

    5. Strange, it works on my test site πŸ™‚ Are you pasting this in your functions.php? And when you get a white screen, what error is displayed if you enable WP_DEBUG?

    6. Rodolfo, I am not talinkg about the remove action that I mentioned above. That one is working, but like I said my goal is t o move the payment box WITHOUT the order button ON TOP of the order review table. The terms checkbox should be ON TOP of the paymant box, so that the layout is the following:
      1. Billing address
      2. Shipping address
      3. Terms checkbox
      4. Payment options box
      5. order-review table
      6. order button

      I have tried removing certain parts in the checkout templates and adding them in other ones, but I can’t get it to work like I want to πŸ™

    7. Hey Felix, thanks so much for your follow-up! Sorry that you haven’t been successful at the task – unfortunately this is custom work and I cannot provide a complementary solution here on the blog. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  22. Hello im trying to add a subtitle under the Country lable.
    in the checkout page.

    billing country

    something like this:
    * Country
    bla bla bla
    (Select box)

    how can i do this ? πŸ™‚

    1. Hey Itay, thanks for your comment πŸ™‚ It is a bit off topic though! You should use a checkout filter to edit the label of the field billing_country. You can find more info here: https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/#section-2

  23. Great tutorial! Thank you. Just one thing… when adding this to functions.php it makes the “Order Comments” field disappear.

    I tried adding the following, but it didn’t work:

    $fields2['order']['order_comments']		= $fields['order']['order_comments']

    Any help would be much appreciated.

    1. Gonzalo, thank you so much for your comment (also – I will be visiting Peru soon!). This is pretty strange actually, I’ve tried it and you’re right, it doesn’t work. I’m launching my course tomorrow so maybe I’ll take a look at this next week πŸ™‚ Thank you!

  24. Is it possible user login in my account and reorder same product if yes then how can possible

    1. Hey Abhishek, thanks for your comment! I’m afraid I don’t understand what you’re looking for here – can you maybe provide a screenshot? Thanks πŸ™‚

    2. Hi Rodolfo
      Actually my concern that when user login in WooCommerce account he will find all the old order but in this table he can’t reorder the same product. So need that is reorder the same product is it possible in woocommerce

    3. Hey Abhishek, really sorry but I’m not sure I get what you need. This snippet is to reorder fields on the checkout, no matter if the user is logged in or not. Sorry πŸ™‚

  25. Hi Rodolfo, your are the best woocommerce teacher & development in this world. Amaizing, I love your tutorials. Please I want to move the order & payment info under shipping, on the left column, because the page it is too large and I think itΒ΄s better to see all at the first view. Sorry about my english.
    Thank you very much

    1. Hey Fabiola, thanks for your comment – your English is perfect! If you want to move order and payment info on the left, some custom PHP work will be needed. This is not a great idea as overriding a full template means you will need to re-do the job every time WooCommerce releases a big update.

      Other than that, take a look at the form-checkout.PHP file under woocommerce/templates/checkout, and then follow this official guide by WooCommerce to override it.

      Let me know πŸ™‚

  26. Hi Rodolfo,

    How do you move the ‘your order’ section to the right?

    1. Hello Julian, and thanks for your comment πŸ™‚ Do you mean you want to move the order & payment info under shipping, on the right column? May I ask why?

  27. You are an incredible resource! Thank you so much for sharing your expertise with us. It is much appreciated!

    1. Thank you! I truly appreciate your feedback πŸ™‚

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.