WooCommerce offers a great set of default settings for payment and shipping. In some cases, you may want to set up predefined shipping areas for customers to choose from. In this post I will show how you can set that up using code snippets/plugins.
Setting Up Shipping Areas
I’m going to assume that the current areas are not a part of the default WooCommerce checkout fields. We will be adding a new Living area drop down field to the checkout with a code snippet. I’ve prepared the code snippet below to work and add the new field, but if you want to read more about it, this is a great place.
The code snippet below adds the new checkout field. I’ve given it 4 options going from ‘Alpha’ to ‘ Delta’. You can add your own options in that list. Make sure that the slugs do not have spaces or capitals.
Do note that if you change the shipping_living_area in $fields['shipping']['shipping_living_area'] it should be prefixed with shipping_, otherwise it will not automatically save to the database.
The new checkout field:
Display Your Custom Field in the Admin
The new field will be automatically saved to the database, but it will not automatically show up in the admin order area. This is not required and you can skip this if you don’t want or need the Living area field to be displayed in the admin. If you do want to show the new field, the following snippet will enable and display the field in the backend at the order screen.
Resulting into this:
Adding the Custom Field to the Emails
The new custom field also doesn’t show on the order confirmation mails by default. If you do want it to show up, you can use the following code snippet.
That’s it for setting up the new custom shipping field. Next up: setting up shipping rates.
Setting Up Shipping Rates
Next is setting up shipping rates according to the new shipping field. Setting up a custom shipping method can be difficult and time consuming. As far as I know, there is no plugin that supports setting up shipping based on custom shipping fields. Not even my plugin, WooCommerce Advanced Shipping, does that by default.
What you can do with WooCommerce Advanced Shipping is add new conditions very easily. I’ve already done all the work here for you, so you only have to copy/paste the following script. This will add multiple new conditions, one for each shipping field (all RAW shipping fields are added as a new condition here, so there will be some duplicates such as ‘zipcode’).
This will add the shipping field conditions as following:
WooCommerce Advanced Shipping will now allow you to set up shipping rates, according to the new custom shipping field.
Update June ’16
We now have a plugin that allows you to set up custom checkout fields. If you’re not comfortable coding something custom as per the post above, you can take a look at the Advanced Checkout Fields plugin. It also works great with the Advanced Shipping plugin.