WooCommerce 台灣地址-縣市-鄉鎮市支援下拉選單,郵遞區號自動對應

WooCommerce原始的結帳欄位位置不符合台灣人習慣,需要配合欄位調整外掛來變更欄位排序。

最適合台灣地址輸入習慣,就是將縣市還有鄉鎮市變成下拉選單,郵遞區號會自動對應,綠界或藍新也可以用這個程式碼,唯一的缺點就是欄位的CSS外型可能跑掉,需要再手動調整CSS。

在主題的functions內下方加入以下程式碼

/**帳單地址與運送地址下拉選單功能**/
add_filter("woocommerce_after_checkout_form", "twzipcodefield_shipping");
function twzipcodefield_shipping() {
$output = '
<script src="https://hellowp.cc/jquery.twzipcode-1.7.14.min.js"></script>
<script>
var $ = jQuery.noConflict();
function updateValue(field){
$("#"+field+"_state").val($(".woocommerce-"+field+"-fields select[name=\'county\']").val());
$("#"+field+"_city").val($(".woocommerce-"+field+"-fields select[name=\'district\']").val());
$("#"+field+"_postcode").val($(".woocommerce-"+field+"-fields input[name=\'zipcode\']").val());
}
$(document).ready(function(){
$(".woocommerce-billing-fields,.woocommerce-shipping-fields").twzipcode({
"detect": function (coords) {
updateValue("billing");
updateValue("shipping");
}
});
function updateField(field){
$(".woocommerce-"+field+"-fields select[name=\'county\']").appendTo($("#"+field+"_state_field"));
$(".woocommerce-"+field+"-fields select[name=\'district\']").appendTo($("#"+field+"_city_field"));
$(".woocommerce-"+field+"-fields input[name=\'zipcode\']").appendTo($("#"+field+"_postcode_field"));
} 
updateField("billing");
updateField("shipping");
$("select[name=\'county\'],select[name=\'district\']").change(function(){updateValue("billing");updateValue("shipping");})
$("input[name=\'zipcode\']").keyup(function(){updateValue("billing");updateValue("shipping");})
$("#billing_postcode,#billing_state,#billing_city,#shipping_state,#shipping_city,#shipping_postcode").hide();
})
</script>';
echo $output;
}

One thought on “WooCommerce 台灣地址-縣市-鄉鎮市支援下拉選單,郵遞區號自動對應

發表迴響