Change Washington DC to DC on Estimate Shipping - Shopify

Change Washington DC to DC on Estimate Shipping

Problem:

Sometimes the client has a preference on the naming of a State. For example changing Washington DC to DC.

The state values are generated on Shopify's servers https://help.shopify.com/themes/liquid/filters/url-filters#shopifyasseturl, so the code cannot simply be modified.

The Solution:

Use JS to change the value and then reorder alphabetically.

The Code

  1. Open cart.liquid
  2. Add the following code at the bottom of the page.
  3. Replace option.value with the option that needs changed.
<script>
    $( document ).ready(function() {
        console.log('change value of dc');
       $('#address_province option').each(function( index, option ){              
             if(  option.value  == "Washington DC" ){
                    option.innerHTML = "DC";
             }
       });

     var my_options = $("#address_province option");
      var selected = $("#address_province").val();

     my_options.sort(function(a,b) {
          if (a.text > b.text) return 1;
          if (a.text < b.text) return -1;
          return 0
      })

     $("#address_province").empty().append( my_options );
      $("#address_province").val(selected);

    });
</script>

Leave a comment