We recently worked on an e-commerce project for a small Taiwanese online retailer using Woocommerce and needed to re-order and customize the checkout fields to be more suitable for the Taiwanese market. This meant putting the last name before the first name and re-ordering the address fields so that the city address line came before the street address lines. We also created drop down select boxes for City and District. When a customer selects a city, we use JavaScript to load a list of districts in that city.
Lastly we needed to change the validation on the phone input to only accept Taiwanese phone numbers.
We decided to create a plug-in which had a function that would override the WooCommerce checkout fields. We created the plug-in directory with the following files:
In our main file bdigital-checkout.php we added our action and an empty function like so:
<?php
/* Plugin Name: Bdigital Custom Taiwan Checkout */
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
add_filter( 'woocommerce_checkout_fields' , 'bdigital_checkout_fields', 999 );
function bdigital_checkout_fields(){ }
Documentation on changing the checkout order was scarce but we discovered that to do this effectively three things needed to be done:
1) Change the order of the name fields using their CSS class
In WooCommerce by default the name fields are on a single line, we wanted to keep it this way but have the switched around, so we changed the CSS classes in our plugin function.
2) Change the data-priority of the fields
This updates the data-priority attribute for each field set.
3) Reorder the field array with the following function
We added a new function here to keep our code tidy. This re-orders the fields based on what we have put into the array. You can also use this function to remove any unwanted fields - so in this case we will remove State (we will use the second address line to become our district field)
See the code below for how we did this:
function bdigital_checkout_fields(){
...
$fields['billing']['billing_last_name']['priority'] = 4;
$fields['billing']['billing_last_name']['class'] = array('form-row-first');
$fields['billing']['billing_first_name']['priority'] = 8;
$fields['billing']['billing_first_name']['class'] = array('form-row-last');
$fields['shipping']['shipping_last_name']['priority'] = 4;
$fields['shipping']['shipping_last_name']['class'] = array('form-row-first');
$fields['shipping']['shipping_first_name']['priority'] = 8;
$fields['shipping']['shipping_first_name']['class'] = array('form-row-last');
$order = array(
'billing_last_name',
'billing_first_name',
'billing_company',
'billing_city',
'billing_address_2',
'billing_address_1',
'billing_postcode',
'billing_phone',
'billing_email'
);
$priority = 10;
foreach($order as $field){
$fields2['billing'][$field] = $fields['billing'][$field];
$fields2['billing'][$field]['priority'] = $priority;
$priority++;
}
$order = array(
'shipping_last_name',
'shipping_first_name',
'shipping_company',
'shipping_city',
'shipping_address_2',
'shipping_address_1',
'shipping_postcode'
); $priority = 10;
foreach($order as $field){
$fields2['shipping'][$field] = $fields['shipping'][$field];
$fields2['shipping'][$field]['priority'] = $priority;
$priority++;
}
$fields2['order'] = $fields['order'];
$fields2['account'] = $fields['account'];
return $fields2;
}
The next enhancement we made was using a dropdown select for the city and the district. When a customer selects their city, the options for district will change to match the chosen city. We did this using an AJAX call which repopulates the options in the district dropdown.
function bdigital_checkout_fields($fields){
...
$fields['shipping']['shipping_city']['options'] = $cities;
$fields['billing']['billing_address_2']['type'] = 'select';
$fields['billing']['billing_address_2']['options'] = array('' => __('Select District'));
$fields['shipping']['shipping_address_2']['type'] = 'select';
$fields['shipping']['shipping_address_2']['options'] = array('' => __('Select District'));
...
}
add_filter( 'wp_footer', 'bdigital_checkout_script' );
function bdigital_checkout_script( ){
if( ! is_checkout() ) return;
?>
<script type="text/javascript">
jQuery(function($) {
$('#billing_city').on('change', function () {
var city = document.getElementById('billing_city').value;
$.ajax({
url: "<?php echo plugin_dir_url(__FILE__); ?>districts.php",
type: "get",
data: {
'city': city
},
success: function (result) {
document.getElementById('billing_address_2').innerHTML = result;
}
})
})
});
jQuery(function($) {
$('#shipping_city').on('change', function () {
var city = document.getElementById('shipping_city').value;
$.ajax({
url: "<?php echo plugin_dir_url(__FILE__); ?>districts.php",
type: "get",
data: {
'city': city
},
success: function (result) {
document.getElementById('shipping_address_2').innerHTML = result;
}
})
})
});
}
We used an open source JSON list of Taiwans cities, counties and districts as our data source.
Our last enhancement was to change the phone number validation to allow Taiwanese mobiles only. This is to better integrate with the e-Invoice and courier platforms being used.
add_action('woocommerce_checkout_process', 'bdigital_validate_billing_phone');
function bdigita_validate_billing_phone() {
$match = preg_match('/^(?=(09))[0-9]{10}$/', $_POST['billing_phone']);
if ( $_POST['billing_phone'] && !$match) {
wc_add_notice( __( $_POST['billing_phone'].' is not a valid Taiwan phone number.' ), 'error' );
}
}
If you would like to see the whole code or use this plugin for your own Taiwan based e-Commerce site, you can find it on Github here.
