How to change the city field to a dropdown in WooCommerce

Today we will show you how to change the city field to a dropdown in WooCommerce. This works great for those of you who need to set up city-based shipping rates. As you may already know, it is possible to achieve this using my Advanced Shipping plugin. However, the downside of this is that your customers can enter their own values for the ‘Shipping Field’ which means that you’d have to enter any type of variation a customer can enter to ensure the correct shipping cost are calculated and shown at the totals.

The chances are that the customer makes a typo or enters a value that is not recognised by the values you set up for the shipping rates. A possible solution to this is to change the default text input field to a dropdown. This way you will have the control which options are available and the customer can enter, and ultimately, this can reduce the error rate at the checkout stage.

Changing the city field to a simple dropdown

The following code snippet will change the city field to a standard dropdown. You are able to set up both the display value to the customer and the so-called ‘index’ or ‘key’ which is what the ‘City’ condition will match against (when using the Advanced Shipping plugin).

The below code needs to go in your theme/child theme’s functions.php file:


<?php
/**
 * Change the checkout city field to a dropdown field.
 */
function city_dropdown_field( $fields ) {

	$city_args = wp_parse_args( array(
		'type' => 'select',
		'options' => array(
			'birmingham' => 'Birmingham',
			'cambridge' => 'Cambridge',
			'leicester'   => 'Leicester',
			'liverpool' => 'Liverpool',
			'london'    => 'London',
			'manchester'  => 'Manchester',			
		),
	), $fields['shipping']['shipping_city'] );

	$fields['shipping']['shipping_city'] = $city_args;
	$fields['billing']['billing_city'] = $city_args; // Also change for billing field

	return $fields;

}
add_filter( 'woocommerce_checkout_fields', 'city_dropdown_field' );

Let’s take this one step further and make the city select searchable…

Making a searchable city dropdown

If you have a large list of cities then it makes sense to add a searchable field, just like how the Country field works. Making it a searchable field can be done with a few additional lines of code.


<?php

// Copy from here

/**
 * Change the checkout city field to a dropdown field.
 */
function jeroen_sormani_change_city_to_dropdown( $fields ) {

	$city_args = wp_parse_args( array(
		'type' => 'select',
		'options' => array(
			'birmingham' => 'Birmingham',
			'cambridge' => 'Cambridge',
			'leicester'   => 'Leicester',
			'liverpool' => 'Liverpool',
			'london'    => 'London',
			'manchester'  => 'Manchester',
		),
		'input_class' => array(
			'wc-enhanced-select',
		)
	), $fields['shipping']['shipping_city'] );

	$fields['shipping']['shipping_city'] = $city_args;
	$fields['billing']['billing_city'] = $city_args; // Also change for billing field

	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', 'jeroen_sormani_change_city_to_dropdown' );

This is how it looks with the searchable field:

Setting up shipping rates based on city

With this example, you can more easily set up rates based on the city field. Now you only have one variation the customer can enter instead of many different variations and prevent possibly typo’s. To setup city-based shipping using the ‘City’ condition, you can now enter the ‘key/index’ values set in the above code to match in the condition against what the user selects.

If you need any help setting this up, we’d love to help. Thanks for reading!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

16 Mistakes Online Merchants Make and How to Avoid Them (infographic)

With more and more consumers switching to online purchases only, there has been a huge boom in e-commerce platforms. With the various different resources online, you can learn any and everything you need to know about building your business online. Yet, this still takes time, research, hard work, and dedication to making your e-commerce store successful.

There is a significant difference between launching your online store to making a tremendous profit off your products or services. Learning how to market your brand, set up your website, create content, and everything else that impacts online sales can be a daunting task to undertake.

Did you know consumers judge your website in 0.05 seconds after landing on your platform? There are many other shocking truths to the success of e-commerce platforms and Fundera has compiled the most common mistakes online merchants make just for you.

If you are starting your own online store, or upgrading your existing one, here are ways to avoid these mistakes check out our infographic below to learn how to avoid these mistakes.

 

16 Mistakes Online Merchants Make & How to Avoid Them

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share