How to Limit Shipping to Only One State With WooCommerce?

WooCommerce settings allow you to set up shipping classes, options, and zones such that it covers 80 to 90% of your shipping requirements. But what if you want to ship within your own state only? So you would want to restrict shipping to a specific state, and thus handle only WooCommerce local deliveries on your store. It is easy to simplify the checkout process by allowing only one state to be displayed in the state dropdown list.

This post helps you to limit shipping to only one state with WooCommerce.

Where to Add Custom Code in WooCommerce?

It is advisable to add the code snippets to the functions.php file of your child theme. Access the file directly from Appearance->Theme File Editor->Locating the child theme’s functions.php from the right sidebar. You can also access it from your theme’s directory file. Insert the following code snippet in functions.php. The alternative & easy option is to install & activate the Code Snippets plugin. You can then add the code as a new snippet via the plugin.

Preliminary Steps

Determine the target country and state(s) for which you want to modify the default state on the cart page and checkout page.

Solution: Limit shipping to only one state on the WooCommerce Checkout & Cart page

Let’s consider an online store that targets customers in a particular region. The below code displays only the ‘New York’ state under the dropdown of the ‘State Field’.

// Add a filter to modify the list of states for the United States
add_filter('woocommerce_states', 'ts_override_woocommerce_states');

function ts_override_woocommerce_states($states) {
    $states['US'] = array(
        'NY' => 'New_York',
        // Add more states as needed
    );
    return $states;
}

// Use JavaScript to update the selected shipping state based on the chosen country
add_action('wp_footer', 'ts_set_shipping_state');

function ts_set_shipping_state() {
    if (is_checkout()) {
        ?>
        <script>
            jQuery(document).ready(function($) {
                $(document.body).on('country_to_state_changed', function() {
                    var selectedCountry = $('#shipping_country').val();
                    var newState = '';

                    // Define the mapping of countries to states here
                    // Add more cases for additional countries if needed
                    switch (selectedCountry) {
                        case 'US':
                            newState = 'NY'; // New York
                            break;
                        // Add more cases as needed
                    }

                    // Set the selected state
                    $('#shipping_state').val(newState).change();
                });
            });
        </script>
        <?php
    }
}

Output 

Cart Page

The code shows ‘New York (NY)’ as the only shipping state option when ‘United States (US)’ is selected in the country dropdown on the cart page.

Checkout Page

The code shows ‘New York (NY)’ as the only shipping state option when ‘United States (US)’ is selected in the country dropdown on the shipping section of the checkout page.

Code Explanation

• The add_filter function is used to attach the ts_override_woocommerce_states function to the woocommerce_states hook and when it is triggered, causes the function to modify the list of states available in WooCommerce for various countries.
• The function ts_override_woocommerce_states($states) is defined to handle the modification of the states array.
• $states[‘US’] = array( ‘NY’ => ‘New York’, // Add more states as needed ); This line of code modifies the states array. Specifically, it adds or overrides the states for the United States (‘US’). In this example, it sets ‘NY’ as the key and ‘New York’ as the value, effectively adding ‘New York’ as a state option for the United States.
• return $states; Finally, the function returns the modified $states array, which will be used to update the list of available states for the United States in the shipping address form.
• add_action(‘wp_footer’, ‘ts_set_shipping_state’);  adds an action to the ‘wp_footer’ hook, which is triggered when the footer of a WordPress page is being generated. When this hook is triggered, it calls the function ts_set_shipping_state to include JavaScript in the footer of the page.
• The function ts_set_shipping_state()  is defined to handle the JavaScript code that dynamically sets the shipping state based on the chosen country during the checkout process.
• if (is_checkout())  condition checks if the current page is the WooCommerce checkout page. If it is not, the code inside the function will not run.
• Inside the JavaScript code (between <script> tags), the code does the following:
  • Listens for the ‘country_to_state_changed’ event. This event is triggered when the customer changes the selected country during the checkout process.
  • Within the event handler, it defines a function called ts_set_shipping_state() which will be used to set the selected shipping state.
  • It retrieves the selected country using $(‘#shipping_country’).val()  and stores it in the variable selectedCountry.
  • It then uses a switch statement to check the value of selectedCountry. In this example, it’s set up to handle the case when the selected country is ‘US’ (United States) and assigns ‘NY’ (New York) as the newState.
  • Finally, it sets the selected state in the shipping address form by setting the value of the shipping state dropdown ($(‘#shipping_state’)) to newState, and triggers a change event to ensure that WooCommerce updates the form accordingly.

Conclusion

The code provided above helps you to allow shipping to only one state. You can modify the code to restrict product availability by state or even to allow multiple states instead of a single state.

Let us know your feedback on how the code was useful or any other queries in the comments section.