How to Change City Field to a Dropdown in the WooCommerce Shipping Calculator?

When using WooCommerce for your online store, sometimes you may want to provide a fixed number of options for the City field instead of the default text field in the WooCommerce shipping calculator.

This post helps you modify the shipping calculator’s City field based on the dropdown list on the WooCommerce cart page.

Locate the WooCommerce Shipping Calculator Cart Page Template

To edit the shipping calculator page in WooCommerce, you’ll need to locate the template file responsible for rendering the cart page. The default template for the shipping calculator cart page is named shipping-calculator.php. You can find this file in your active theme folder. However, WooCommerce templates can also be overridden in your child theme or a custom WooCommerce template folder.

Here’s how to locate the shipping calculator template file:

1. Access your WordPress installation directory via FTP or your hosting’s file manager.
2. Navigate to wp-content/themes/your-active-theme/woocommerce/ the folder. If you don’t find a woocommerce folder inside your active theme, create one.
3. Look for the shipping-calculator.php file. If it doesn’t exist, you can copy it from the WooCommerce plugin folder at wp-content/plugins/woocommerce/templates/cart/shipping-calculator.php and paste it into your theme’s woocommerce folder.
4. Please search for the woocommerce_shipping_calculator_enable_city filter & make the changes within that ‘if’ structure.

Solution: Editing the Shipping Calculator in the WooCommerce Cart Page

Imagine an online flower delivery store offering services in a metropolitan area with multiple neighborhood cities. Here the customers are presented with the custom cities dropdown in the shipping calculator listing the neighborhood cities only. This makes it easy for customers to select their specific city minimizing the risk of entering incorrect or misspelled city names in a text field.

Below is the code snippet for editing the shipping calculator fields i.e. converting the City text field into a dropdown list.

		<?php if ( apply_filters( 'woocommerce_shipping_calculator_enable_city', true ) ) : ?>
			<p class="form-row form-row-wide" id="calc_shipping_city_field">
            <?php
                // HERE <===== define your array of cities
                $cities = array('Chicago','Ashley','Aledo','Arcola');

                $current_city = esc_attr( WC()->customer->get_shipping_city() );
                ?>
            <select name="calc_shipping_city" id="calc_shipping_city">
                <option value=""><?php _e( 'Select a City&hellip;', 'woocommerce' ); ?></option>
                <?php foreach( $cities as $city ):
                echo '<option value="'.$city.'" '.selected( $current_city, $city ).'>'.$city.'</option>';
                endforeach; ?>
            </select>
        </p>
		<?php endif; ?>

Output

As you can see below, once the code is applied in the template file, the customer can select the City from a dropdown list.

Code Explanation

1. Conditional Check:

The code begins with a conditional check using if ( apply_filters( ‘woocommerce_shipping_calculator_enable_city‘, true ) ). This checks if the option to enable the shipping calculator’s city field is true. This allows for flexibility in enabling or disabling this field based on specific requirements.

2. City Array Definition:

Inside the conditional block, an array called $cities is defined. This array contains a list of city names. In this example, it includes ‘Chicago’,’ Ashley’, ‘Aledo’, and ‘Arcola’. These are the city options that customers can choose from in the shipping calculator.

3. Current City Value:

The code then retrieves the currently selected city for the customer using WC()->customer->get_shipping_city(). This value is stored in the $current_city variable.

4. Dropdown Field Creation:

Next, a dropdown <select> field is created with the name “calc_shipping_city” and the id “calc_shipping_city.” This field will allow customers to select their city from the list of options.

5. Default Option:

An initial <option> element with an empty value is added, displaying the text ‘Select a City…’ as a placeholder. This is the default option shown to the customer.

6. Loop Through Cities:

A foreach the loop iterates through the $cities array. For each city in the array, it creates an <option> element. The code checks whether the current city matches the city in the loop using the selected() function. If there is a match, the “selected” attribute is added to that <option> element, making it the pre-selected option when the page loads.

7. Displaying the Field:

The entire <select> field is enclosed in an <p> element with a unique ID (“calc_shipping_city_field”). This ensures proper styling and formatting of the field.

8. Closing the Conditional Block:

Finally, the endif; of the statement closes the conditional block, ensuring that this code section is executed only when the city field is enabled.

Conclusion

Apart from changing the City field type from text to dropdown, you could also hide the Country & State fields in the WooCommerce shipping calculator as per your needs.

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