Init HTML

Đổi nhập thành chọn thành phố

Bạn thêm đoạn mã sau vào functions.php, mình để sẵn các tỉnh thành của Việt Nam.

// Đổi nhập thành phố thành chọn thành phố
add_filter( 'woocommerce_default_address_fields' , 'customize_checkout_city_field' );
function customize_checkout_city_field( $address_fields ) {
    $towns_cities_arr = array(
        '0' => __('Thành phố', 'woocommerce'),
        'An Giang' => 'An Giang',
        'Bà Rịa Vũng Tàu' => 'Bà Rịa Vũng Tàu',
        'Bạc Liêu' => 'Bạc Liêu',
        'Bắc Kạn' => 'Bắc Kạn',
        'Bắc Giang' => 'Bắc Giang',
        'Bắc Ninh' => 'Bắc Ninh',
        'Bến Tre' => 'Bến Tre',
        'Bình Dương' => 'Bình Dương',
        'Bình Định' => 'Bình Định',
        'Bình Phước' => 'Bình Phước',
        'Bình Thuận' => 'Bình Thuận',
        'Cà Mau' => 'Cà Mau',
        'Cao Bằng' => 'Cao Bằng',
        'Cần Thơ' => 'Cần Thơ',
        'Đà Nẵng' => 'Đà Nẵng',
        'Điện Biên' => 'Điện Biên',
        'Đắk Lắk' => 'Đắk Lắk',
        'Đắc Nông' => 'Đắc Nông',
        'Đồng Nai' => 'Đồng Nai',
        'Đồng Tháp' => 'Đồng Tháp',
        'Gia Lai' => 'Gia Lai',
        'Hà Giang' => 'Hà Giang',
        'Hà Nam' => 'Hà Nam',
        'Hà Nội' => 'Hà Nội',
        'Hà Tĩnh' => 'Hà Tĩnh',
        'Hải Dương' => 'Hải Dương',
        'Hải Phòng' => 'Hải Phòng',
        'Hậu Giang' => 'Hậu Giang',
        'Hòa Bình' => 'Hòa Bình',
        'TP. Hồ Chí Minh' => 'TP. Hồ Chí Minh',
        'Hưng Yên' => 'Hưng Yên',
        'Khánh Hoà' => 'Khánh Hoà',
        'Kiên Giang' => 'Kiên Giang',
        'Kon Tum' => 'Kon Tum',
        'Lai Châu' => 'Lai Châu',
        'Lạng Sơn' => 'Lạng Sơn',
        'Lào Cai' => 'Lào Cai',
        'Lâm Đồng' => 'Lâm Đồng',
        'Long An' => 'Long An',
        'Nam Định' => 'Nam Định',
        'Nghệ An' => 'Nghệ An',
        'Ninh Bình' => 'Ninh Bình',
        'Ninh Thuận' => 'Ninh Thuận',
        'Phú Thọ' => 'Phú Thọ',
        'Phú Yên' => 'Phú Yên',
        'Quảng Bình' => 'Quảng Bình',
        'Quảng Nam' => 'Quảng Nam',
        'Quảng Ngãi' => 'Quảng Ngãi',
        'Quảng Ninh' => 'Quảng Ninh',
        'Quảng Trị' => 'Quảng Trị',
        'Sóc Trăng' => 'Sóc Trăng',
        'Sơn La' => 'Sơn La',
        'Tây Ninh' => 'Tây Ninh',
        'Thái Bình' => 'Thái Bình',
        'Thái Nguyên' => 'Thái Nguyên',
        'Thanh Hoá' => 'Thanh Hoá',
        'Thừa Thiên Huế' => 'Thừa Thiên Huế',
        'Tiền Giang' => 'Tiền Giang',
        'Trà Vinh' => 'Trà Vinh',
        'Tuyên Quang' => 'Tuyên Quang',
        'Vĩnh Long' => 'Vĩnh Long',
        'Vĩnh Phúc' => 'Vĩnh Phúc',
        'Yên Bái' => 'Yên Bái'
    );

    $address_fields['city']['type'] = 'select';
    $address_fields['city']['class'] = array('form-row-wide');
    $address_fields['city']['label'] = __('Tỉnh / Thành phố', 'woocommerce');
    $address_fields['city']['label_class'] = array('uk-form-label');
    $address_fields['city']['options'] = $towns_cities_arr;
    $address_fields['city']['priority'] = 50;

    return $address_fields;
}

Tự động điền mã bưu điện khi chọn thành phố

Bạn thêm đoạn mã jQuery sau vào footer.php.

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('select#billing_city').on('change', function () {
			var cityArr = new Array(['An Giang', 880000], ['Bà Rịa Vũng Tàu', 790000], ['Bạc Liêu', 260000], ['Bắc Kạn', 960000], ['Bắc Giang', 220000], ['Bắc Ninh', 790000], ['Bến Tre', 930000], ['Bình Dương', 590000], ['Bình Định', 820000], ['Bình Phước', 830000], ['Bình Thuận', 800000], ['Cà Mau', 970000], ['Cao Bằng', 270000], ['Cần Thơ', 900000], ['Đà Nẵng', 550000], ['Điện Biên', 380000], ['Đắk Lắk', 630000], ['Đắc Nông', 640000], ['Đồng Nai', 810000], ['Đồng Tháp', 870000], ['Gia Lai', 600000], ['Hà Giang', 310000], ['Hà Nam', 400000], ['Hà Nội', 100000], ['Hà Tĩnh', 480000], ['Hải Dương', 170000], ['Hải Phòng', 180000], ['Hậu Giang', 910000], ['Hòa Bình', 350000], ['TP. Hồ Chí Minh', 700000], ['Hưng Yên', 160000], ['Khánh Hoà', 650000], ['Kiên Giang', 920000], ['Kon Tum', 580000], ['Lai Châu', 390000], ['Lạng Sơn', 240000], ['Lào Cai', 330000], ['Lâm Đồng', 670000], ['Long An', 850000], ['Nam Định', 420000], ['Nghệ An', 460000], ['Ninh Bình', 430000], ['Ninh Thuận', 660000], ['Phú Thọ', 290000], ['Phú Yên', 620000], ['Quảng Bình', 510000], ['Quảng Nam', 560000], ['Quảng Ngãi', 570000], ['Quảng Ninh', 200000], ['Quảng Trị', 520000], ['Sóc Trăng', 950000], ['Sơn La', 360000], ['Tây Ninh', 840000], ['Thái Bình', 410000], ['Thái Nguyên', 250000], ['Thanh Hoá', 440000], ['Thừa Thiên Huế', 530000], ['Tiền Giang', 860000], ['Trà Vinh', 940000], ['Tuyên Quang', 300000], ['Vĩnh Long', 890000], ['Vĩnh Phúc', 280000], ['Yên Bái', 320000]);
			for (var i = 0; i < cityArr.length; i++) {
				if (cityArr[i][0] == $(this).val()) {
					$('#billing_postcode').val(cityArr[i][1]);
					break;
				}
			}
			setTimeout(function() { $('body').trigger('update_checkout'); }, 1000);
		});
	});
</script>

Chúc các bạn thành công!