How to change the order of fields in the Drupal Commerce Checkout Form

Question

I'm using Drupal Commerce 7.x. I have added some fields to the checkout form in the customer profile. Specifically I've added 'Title' and 'Organization'. I'd like to move some of the fields around because they aren't in the order I'd like, but I can't figure out how to move them.

For example, right now the order is: 1. Country (I def. don't want that first) 2. Full name 3. Address etc.

I want it like this:

1. Full Name
2. Title (new field)
3. Organization (new field)

I tried using a module that does this (just as an example, obviously, since only two fields are listed here). Am I on the right track?

<?php
function CommerceAlter_form_commerce_checkout_form_alter(&$form, 
&$form_state, &$form_id) {
   $order = array('edit-customer-profile-billing-field-title', 
'addressfield-container-inline');
    foreach ($order as $key => $value){
      if (isset($form[$value])){
        $form[$value]['#weight'] = $key;
      }
    }
}

But it didn't do anything.

Note: I was unsure how to reference the fields. The first one above called 'field-title' is the ID for that field and the second listed for addressfield (which is in the form by default) is by class .addressfield-container-inline).

Answer 1

Changing field order on the checkout form can be done by going to admin/commerce/config/checkout

Then just drag the items up and down to arrange them in the order you wish.

Answer 2

Per Commerce module maintainer, there's no good way to move the pieces of the Address composite field. https://www.drupal.org/project/commerce/issues/3016940. The maintainer suggested CSS, but any solution that changes the display but not the code (e.g., flexbox) can be problematic from a semantic and accessibility standpoint. For example, reordering elements visually can create confusion when using screenreaders https://www.w3.org/TR/css-flexbox-1/#order-accessibility.

It's also worth noting that country is intentionally the first field. Some countries use Last name and then First name. So, changing the country to Japan, for example, changes the order of the name fields.