<p>The State and Country fields are output outside your <code>addressFields</code> loop so will always appear after all of the fields in that loop.</p>

<p>On a recent project I just hard coded each field as it gave me greater control for things like input type, validation messages and layout.</p>

<p>If you wanted to continue using your <code>addressFields</code> array you could add a query to output your country/state select input.</p>

<pre><code>{% if field.key == 'country' %}
  &lt;select class="address-{{ field.key }}" name="{{ modelName }}[{{ field.key }}]"&gt;
    {% for key, option in countries %}
      {% set optionValue = (model ? model.countryId : '') %}
      &lt;option value="{{ key }}" {% if key == optionValue %} selected{% endif %}&gt;{{ option }}&lt;/option&gt;
    {% endfor %}
  &lt;/select&gt;
{% endif %}
</code></pre>

CC BY-SA 3.0
2016-06-13T08:56:22.250Z
2016-06-13T08:56:22.250Z
Luke Pearce
<p>I am trying to order the address fields so that they read </p>

<ul>
<li>Business name</li>
<li>First name</li>
<li>Last name</li>
<li>Company name</li>
<li>Address 1</li>
<li>Address 2</li>
<li>City</li>
<li>State</li>
<li>Zip</li>
<li>Phone</li>
</ul>

<p>I moved some of the items around in the <code>addressFields</code> array but I can't seem to move the Country or the State. Is there a way to do this?</p>

<pre><code>      {% set countries = craft.commerce.countriesList %}
      {% set states = craft.commerce.statesArray %}
      {% set addressFields = [
          { key: 'businessName', label: 'Business Name', required: false },
          { key: 'firstName', label: 'First Name', required: true },
          { key: 'lastName', label: 'Last Name', required: true },
          { key: 'address1', label: 'Address 1', required: false },
          { key: 'address2', label: 'Address 2', required: false },
          { key: 'city', label: 'City', required: false },
          { key: 'zipCode', label: 'Zip Code', required: false },
          { key: 'phone', label: 'Phone', required: false },
      ] %}


      {% set modelName = modelName is defined ? modelName : 'address' %}
      {% set model = address is defined ? address : null %}

      &lt;div class="addressBox {{ modelName }}"&gt;
          {% for field in addressFields %}
              &lt;div class="form-group {% if model and model.getErrors(field.key) %}has-error{% endif %}"&gt;
                  &lt;label for="{{ modelName }}-{{ field.key }}"&gt;{{ field.label }}{{ field.required ? '*' : '' }}&lt;/label&gt;&lt;br/&gt;
                  &lt;input type="text" id="{{ modelName }}-{{ field.key }}" class="u-full-width" name="{{ modelName }}[{{ field.key }}]"
                         value="{{ model ? model[field.key] : '' }}"&gt;      
                  {% if model and model.getErrors(field.key) %}
                      &lt;span class="flash"&gt;{{ model.getErrors(field.key)|join }}&lt;/span&gt;
                  {% endif %}
              &lt;/div&gt;
          {% endfor %}

              &lt;div class="form-group {% if model and model.getErrors('stateId') %}has-error{% endif %}"&gt;
              &lt;label for="{{ modelName }}-stateId"&gt;State&lt;/label&gt;&lt;br/&gt;
              &lt;select class="address-state" name="{{ modelName ~ '[stateId]' }}"&gt;
                  {% set options = (model and states[model.countryId] is defined ? states[model.countryId] : []) %}
                  {% for key, option in options %}
                      {% set optionValue = (model ? model.stateId : '') %}
                      &lt;option value="{{ key }}" {% if key == optionValue %} selected{% endif %}&gt;{{ option }}&lt;/option&gt;
                  {% endfor %}
              &lt;/select&gt;
          &lt;/div&gt;


          &lt;div class="form-group {% if model and model.getErrors('countryId') %}has-error{% endif %}"&gt;
              &lt;label for="{{ modelName }}-countryId"&gt;Country&lt;/label&gt;&lt;br/&gt;
              &lt;select class="address-country" name="{{ modelName ~ '[countryId]' }}"&gt;
                  {% for key, option in countries %}
                      {% set optionValue = (model ? model.countryId : '') %}
                      &lt;option value="{{ key }}" {% if key == optionValue %} selected{% endif %}&gt;{{ option }}&lt;/option&gt;
                  {% endfor %}
              &lt;/select&gt;
              {% if model and model.getErrors('countryId') %}
                  &lt;span class="flash"&gt;{{ model.getErrors('countryId')|join }}&lt;/span&gt;
              {% endif %}
          &lt;/div&gt;



      &lt;/div&gt;

          {% includejs %}
          var states = {{ craft.commerce.statesArray|json_encode|raw }};

          $('select.address-country').change(function ()
          {
              var cid = $(this).val();
              var $states = $(this).closest('.addressBox').find('select.address-state');
              $states.find('option').remove();

              if (states.hasOwnProperty(cid))
              {
                  for (var id in states[cid])
                  {
                      var state = states[cid][id],
                              $option = $('&lt;option/&gt;');

                      $option.attr('value', id).text(state);
                      $states.append($option);
                  }
              }

          });

          $('select').addClass('form-control input-sm');

          {% endincludejs %}
</code></pre>

<plugin-craftcommerce>
Changing the order of address fields
# Changing the order of address fields

(Asked by: username_0 on 2016-06-13)

I am trying to order the address fields so that they read 

Business name
First name
Last name
Company name
Address 1
Address 2
City
State
Zip
Phone

I moved some of the items around in the addressFields array but I can't seem to move the Country or the State. Is there a way to do this?
      {% set countries = craft.commerce.countriesList %}
      {% set states = craft.commerce.statesArray %}
      {% set addressFields = [
          { key: 'businessName', label: 'Business Name', required: false },
          { key: 'firstName', label: 'First Name', required: true },
          { key: 'lastName', label: 'Last Name', required: true },
          { key: 'address1', label: 'Address 1', required: false },
          { key: 'address2', label: 'Address 2', required: false },
          { key: 'city', label: 'City', required: false },
          { key: 'zipCode', label: 'Zip Code', required: false },
          { key: 'phone', label: 'Phone', required: false },
      ] %}


      {% set modelName = modelName is defined ? modelName : 'address' %}
      {% set model = address is defined ? address : null %}

      
          {% for field in addressFields %}
              
                  {{ field.label }}{{ field.required ? '*' : '' }}
                        
                  {% if model and model.getErrors(field.key) %}
                      {{ model.getErrors(field.key)|join }}
                  {% endif %}
              
          {% endfor %}

              
              State
              
                  {% set options = (model and states[model.countryId] is defined ? states[model.countryId] : []) %}
                  {% for key, option in options %}
                      {% set optionValue = (model ? model.stateId : '') %}
                      {{ option }}
                  {% endfor %}
              
          


          
              Country
              
                  {% for key, option in countries %}
                      {% set optionValue = (model ? model.countryId : '') %}
                      {{ option }}
                  {% endfor %}
              
              {% if model and model.getErrors('countryId') %}
                  {{ model.getErrors('countryId')|join }}
              {% endif %}
          



      

          {% includejs %}
          var states = {{ craft.commerce.statesArray|json_encode|raw }};

          $('select.address-country').change(function ()
          {
              var cid = $(this).val();
              var $states = $(this).closest('.addressBox').find('select.address-state');
              $states.find('option').remove();

              if (states.hasOwnProperty(cid))
              {
                  for (var id in states[cid])
                  {
                      var state = states[cid][id],
                              $option = $('');

                      $option.attr('value', id).text(state);
                      $states.append($option);
                  }
              }

          });

          $('select').addClass('form-control input-sm');

          {% endincludejs %}

**Tags:** plugin-craftcommerce


---

## 1 answers

### Answer by username_1 on 2016-06-13. Score: 2

The State and Country fields are output outside your addressFields loop so will always appear after all of the fields in that loop.
On a recent project I just hard coded each field as it gave me greater control for things like input type, validation messages and layout.
If you wanted to continue using your addressFields array you could add a query to output your country/state select input.
{% if field.key == 'country' %}
  
    {% for key, option in countries %}
      {% set optionValue = (model ? model.countryId : '') %}
      {{ option }}
    {% endfor %}
  
{% endif %}


---

