Seeing as there is no StackExchange site (or any other forum, that I can tell) made for WooCommerce questions, I'll run the risk of being shot down for being "off-topic".

I need to add a third address section to the checkout form, which I have done. However, I don't know how to get the 'State' select list to filter by country, as happens in the built-in billing and shipping address sections once a country is selected. I can't find any documentation on it, probably because not many people need anything more than the default billing and shipping addresses. Does anyone know how to make the values in the 'State' list dynamically change, based on the selected country?

Edit: the dynamic changing of the State field must be done by JavaScript, but how do you get the same JavaScript that applies to the default fields to apply to custom fields?

  • I think this question shouldn't be consider off-topic as this is related to WordPress. I know it states 'Third party plugins and themes are off topic, they are better asked about at their developers' in the closing comment, but So/SE is common forum and should allow plugin related questions here, as it involves wordpress code and know-hows.... I might be wrong though.
    – PHP Mentor
    Oct 26, 2016 at 6:43

1 Answer 1


Here is some generic js you could use to accomplish this.

This code is intentionally generic, so you will need to make it work for your scenario. You can load up your various states and hide them with the 'js-display-toggle' class. When the appropriate country is chosen from 'base' select menu, then you remove the toggle class and show those state.

(function(d, undefined) {
  'use strict';
  var display = 'js-display-toggle',
    elems = d.getElementsByClassName('items');

  function addToAll() {
    Array.prototype.slice.call(elems, 0).forEach(function(el, i) {

  function delegator(event) {
    switch (event.type) {
      case 'change':
        if (event.target.id === 'base') {
          switch (event.target.options.selectedIndex) {
            case 1:
            case 2:
            case 3:
  d.addEventListener('change', delegator, false);
}(document, undefined));
.js-display-toggle {
  display: none !important;
  visibility: hidden !important;
<!DOCTYPE html>

  <meta charset="utf-8">
  <title>How do you filter the list of states when country is selected?</title>

  <form id="my-form">
    <select id="base">
      <option value="0">select one</option>
      <option value="1">first</option>
      <option value="2">second</option>
      <option value="3">third</option>
    <select id="seleks" class="js-display-toggle items">
      <option value="value1">Value 1</option>
      <option value="value2">Value 2</option>
      <option value="value3">Value 3</option>
    <select id="selectionField" class="js-display-toggle items">
      <option value="CA">California -- CA</option>
      <option value="CO">Colorado -- CO</option>
      <option value="CN">Connecticut -- CN</option>
    <select id="cars" class="js-display-toggle items">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>

  • Hi, colecmc. Thanks for the response. I was thinking more along the lines of leveraging the code that WooCommerce uses in the existing billing and shipping address fields. I just can't see how or where the special code (jQuery or JS) is being applied.
    – eljefejb
    Aug 6, 2015 at 15:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.