woocommerce下拉選單帶入郵遞區號、縣市

woocommerce下拉選單帶入郵遞區號、縣市

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

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

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

1、郵遞區號輸入後會自動帶入縣/市地區,或是由縣/市欄位的選擇而動態載入郵遞區號
2、鄉鎮市欄位會隨著縣/市的選擇而動態變更,自動帶入該縣/市所屬之地區
3、偵測用戶裝置的地理位置,自動帶入縣市地區資料

地區資料的部份主要使用 essoduke 大大所開發維護的台灣地區資料清單,只要載入已經製做好的地區資料,就能在下拉選單中看到相對應的縣市,程式碼範例如下:

 帳單地址與運送地址下拉選單功能


  1. /**帳單地址與運送地址下拉選單功能**/  
  2. add_filter("woocommerce_after_checkout_form""twzipcodefield_shipping");   
  3. function twzipcodefield_shipping() {   
  4. $output = '   
  5. <script src="https://hellowp.cc/jquery.twzipcode-1.7.14.min.js"></script>   
  6. <script>   
  7. var $ = jQuery.noConflict();   
  8. function updateValue(field){   
  9. $("#"+field+"_state").val($(".woocommerce-"+field+"-fields select[name=\'county\']").val());   
  10. $("#"+field+"_city").val($(".woocommerce-"+field+"-fields select[name=\'district\']").val());   
  11. $("#"+field+"_postcode").val($(".woocommerce-"+field+"-fields input[name=\'zipcode\']").val());   
  12. }   
  13. $(document).ready(function(){   
  14. $(".woocommerce-billing-fields,.woocommerce-shipping-fields").twzipcode({   
  15. "detect": function (coords) {   
  16. updateValue("billing");   
  17. updateValue("shipping");   
  18. }   
  19. });   
  20. function updateField(field){   
  21. $(".woocommerce-"+field+"-fields select[name=\'county\']").appendTo($("#"+field+"_state_field"));   
  22. $(".woocommerce-"+field+"-fields select[name=\'district\']").appendTo($("#"+field+"_city_field"));   
  23. $(".woocommerce-"+field+"-fields input[name=\'zipcode\']").appendTo($("#"+field+"_postcode_field"));   
  24. }    
  25. updateField("billing");   
  26. updateField("shipping");   
  27. $("select[name=\'county\'],select[name=\'district\']").change(function(){updateValue("billing");updateValue("shipping");})   
  28. $("input[name=\'zipcode\']").keyup(function(){updateValue("billing");updateValue("shipping");})   
  29. $("#billing_postcode,#billing_state,#billing_city,#shipping_state,#shipping_city,#shipping_postcode").hide();   
  30. })   
  31. </script>';   
  32. echo $output;   
  33. }  

僅有帳單地址有下拉選單功能


  1.   
  2. /**僅有帳單地址有下拉選單功能**/  
  3. add_filter("woocommerce_after_checkout_form""twzipcodefield_shipping");   
  4. function twzipcodefield_shipping() {   
  5. $output = '   
  6. <script src="https://hellowp.cc/jquery.twzipcode-1.7.14.min.js"></script>   
  7. <script>   
  8. var $ = jQuery.noConflict();   
  9. function updateValue(field){   
  10. $("#"+field+"_state").val($(".woocommerce-"+field+"-fields select[name=\'county\']").val());   
  11. $("#"+field+"_city").val($(".woocommerce-"+field+"-fields select[name=\'district\']").val());   
  12. $("#"+field+"_postcode").val($(".woocommerce-"+field+"-fields input[name=\'zipcode\']").val());   
  13. }   
  14. $(document).ready(function(){   
  15. $(".woocommerce-billing-fields").twzipcode({   
  16. "detect": function (coords) {   
  17. updateValue("billing");   
  18.   
  19. }   
  20. });   
  21. function updateField(field){   
  22. $(".woocommerce-"+field+"-fields select[name=\'county\']").appendTo($("#"+field+"_state_field"));   
  23. $(".woocommerce-"+field+"-fields select[name=\'district\']").appendTo($("#"+field+"_city_field"));   
  24. $(".woocommerce-"+field+"-fields input[name=\'zipcode\']").appendTo($("#"+field+"_postcode_field"));   
  25. }    
  26. updateField("billing");   
  27. $("select[name=\'county\'],select[name=\'district\']").change(function(){updateValue("billing");})   
  28. $("input[name=\'zipcode\']").keyup(function(){updateValue("billing");})   
  29. $("#billing_postcode,#billing_state,#billing_city").hide();   
  30. })   
  31. </script>';   
  32. echo $output;   
  33. }   
  34.   

評論 (0)

此處尚未發表評論

留言

  1. 以遊客身份發表評論。 註冊登入到您的帳戶。
附件 (0 / 3)
分享您的位置