WooCommerce – calculate shipping cost by city

In this article I will tell you about my expertise in converting the WooCommerce city field in to a dropdown/select menu as Well I will explain how to use the WooCommerce Advanced shipping in order to calculate the shipping by the chosen city

the plugin can be found here: 1.envato.market/7mezQO

Our Goal

  1. Turn the original WooCommerce city text field in to a Dropdown field.
  2. Calculate different shipping cost to different cities.


  1. WordPress installation.
  2. WooCommerce plugin must be installed.
  3. WooCommerce Advanced Shipping plugin installation
    the plugin can be found here: 1.envato.market/7mezQO

step 1: convert the WooCommerce city text field in to checkout

In order to convert the city text field to a select field, we need to add this code to the functions.php file which belongs to the active theme.
For example, if you are using the twentytwenty theme This file can be found in the next address wp-content/theme/twentytwenty
*I always recommend using a child theme.

you can arrive the functions.php file in a few ways, I recommend do that using an FTP connection using a program like Fillezilla.
But you can do that from the WordPress UI management. just got to Appearance -> Theme Editor as described in the image bellow:

theme editor wordpress management

There you will see the next window:

heads up popup in theme editor

Click I understand and it will be gone.
Now you will see the next window:

You should pay attention to two things:

  1. you have selected the correct theme, in this case I use the Twenty Twenty theme
  2. you have selected the functions.php file.

Pay attention! If you paste the code in the wrong location you can break your site.

What do we have now?

This is what we see now:

the code

This is the code that you need to paste at the end of the functions.php file.

					function change_city_price_dropdown( $fields ) {

	$city_args = wp_parse_args( array(
	    'type' => 'select',
	    'options' => array(
            'Amsterdam'=> 'Amsterdam',
            'Rotterdam' => 'Rotterdam',
            'Hag' => 'Hag'
		'input_class' => array(
	), $fields['shipping']['shipping_city'] );

	$fields['shipping']['shipping_city'] = $city_args;
	$fields['billing']['billing_city'] = $city_args; // Also change for billing field
        $fields['billing']['billing_city']['class'][0] ='update_totals_on_change'; // your class here

	wc_enqueue_js( "
	jQuery( ':input.wc-enhanced-select' ).filter( ':not(.enhanced)' ).each( function() {
		var select2_args = { minimumResultsForSearch: 5 };
		jQuery( this ).select2( select2_args ).addClass( 'enhanced' );
	});" );

	return $fields;

add_filter( 'woocommerce_checkout_fields', 'change_city_price_dropdown' );

Leave a Comment

Your email address will not be published. Required fields are marked *