如標題,剛好這件事最近比較常要做,乾脆先整理成 snippet 程式碼片段來用!

主要是結帳資訊簡化與最佳化輸入地址和郵遞區號的部分。這塊透過自訂也比使用外掛來管理結帳欄位來的準確以及有效

測試調整欄位的外掛在某些主題下都會有方法權重問題,也是因為不夠準確才會寫這篇

目前功能:

  1. 結帳頁(checkout)、登入後台修改地址頁(my-account)都同步欄位修正
  2. 地址部分採用下拉選單選取地址並自動產生郵遞區號方便填寫(此功能引用並感謝 essoduke 大的 jQuery-TWzipcode專案)

目前更新支援到WooCommerce 3.3 版,2.6 版本的請前往這裡

套用結果如圖: 套用結果

其中地址連動功能: 郵遞區號連動功能

Gist: Link

使用方法

  1. 先將這檔案「jquery.twzipcode.min.js」右鍵另存新檔,並上傳於當前使用主題目錄 js 下(如果沒有就建立,建議使用子主題)
  2. 再將下列 snippet 程式碼片段複製貼上 functions.php 末端,完成!(注意,不要複製到第一行 < ?php 。)

Facebook 外掛功能


Share:

作者: Chun

資訊愛好人士。主張「人人都該為了偷懶而進步」。期許自己成為斜槓到變進度條 100% 的年輕人。[//////////____30%_________]

參與討論

98 則留言

  1. 您好,請問用了上述的結帳欄位調整後,商店是否就無法銷售給台灣以外的地區?
    有試著按照教學function檔,但結帳時便無法選擇國別了,該如何再優化呢?謝謝

    1. 這部分要啟用或不啟用會是看你想銷售的區域而定(或是語言),範疇也離開本篇囉!但方向差不多是這樣,設定語系或地區先,再來套用對應的功能

  2. 請問下如果想要更改縣市選項位置該更動哪裡才好? 謝謝

    1. 在Chrome 開發模式下 console 有出現什麼資訊嗎? 以及有把 jquery.twzipcode.min.js 放到當前主題目錄下的「js」資料夾否~?

          1. 抱歉新手完全會錯意,已經按照步驟完成,非常詳細的一篇好文,感謝前輩的教學分享

  3. 想再詢問一下,安裝這個會影響到付款選項的格子嗎?
    突然發現我的結帳頁面沒有付款選項,只有最後面結帳完才跑出ATM資訊
    設定的綠界信用卡付款選項並沒有出現

    1. 應該是不會才是,最簡單的測試方式就是你把我這些操作先暫時移除測試看看!我只有動到結帳表單而已~

      1. 測試完,並沒有影響結帳功能,我自己設定有誤了,感謝前輩

  4. 如果我的Theme是用Vogue Premium, 那我JS檔案是不是就直接放在Premium 的JS?

    1. 他要放置的地方就是 「主題目錄下/js/這裡」,如果這麼巧主題已經有建立就用他的沒關係,如果沒有就建立!(建議使用子主題哦,不然你主題更新這些都會被洗掉)

  5. 好了之後我要在哪裡輸入上面的Code?

    是這裡嗎:
    woocommerce/includes/class-wc-countries.php

      1. 我把code放倒funcrions.php末端, 但是結帳頁面都沒有變ㄟ

  6. 你好,我想問不知道為什麼安裝完成後整個選擇運送方式的區塊會消失?目前測試用網址是 ans0n.tw

  7. 請問大大,出現這些錯訊可能問題??
    使用Storefront佈景主題,有出現地址選單,但有這些錯訊 麻煩了

    Notice: Undefined index: billing_first_name in /home/ABCD/public_html/wp-content/themes/storefront/functions.php on line 100

    Notice: Undefined index: billing_address_1 in /home/ABCD/public_html/wp-content/themes/storefront/functions.php on line 100

    Notice: Undefined index: billing_postcode in /home/ABCD/public_html/wp-content/themes/storefront/functions.php on line 100

    Notice: Undefined index: billing_email in /home/ABCD/public_html/wp-content/themes/storefront/functions.php on line 100

    Notice: Undefined index: billing_phone in /home/ABCD/public_html/wp-content/themes/storefront/functions.php on line 100

    Notice: Undefined index: billing_company in /home/ABCD/public_html/wp-content/themes/storefront/functions.php on line 100

    Notice: Undefined index: shipping_first_name in /home/ABCD/public_html/wp-content/themes/storefront/functions.php on line 131

    Notice: Undefined index: shipping_address_1 in /home/ABCD/public_html/wp-content/themes/storefront/functions.php on line 131

    Notice: Undefined index: shipping_postcode in /home/ABCD/public_html/wp-content/themes/storefront/functions.php on line 131

    Notice: Undefined index: shipping_company in /home/ABCD/public_html/wp-content/themes/storefront/functions.php on line 131

      1. $billing_fields[$field] = $fields[“billing”][$field];
        $shipping_fields[$field] = $fields[“shipping”][$field];

        1. 剛把 Storefront 主題裝起來測試,看了一下應該是因為主題包過。但似乎不影響功能,應該沒事!換其他主題都正常無錯誤。

          1. 剛剛測試佈景主題shopper也是同錯誤訊息,不知道Chun大用的是哪個主題?謝謝~

            這個東西真的好用!!真的太可惜~

      1. 大大
        我用最偷懶的方式
        把姓名欄改成form-row-wide就整齊了

  8. 大大您好 請教您 , 使用後, Browser 會彈出取用位置座標 ? 是哪段code 會要求 ?

  9. 請問要修改樣式的話要在哪一份css文件寫呢?謝謝

    1. 寫在主題內的客製化CSS中應該沒問題,至於確切的答案可能不一定哦!要看主題的架構來確定。 最直覺的作法就是寫在上面的程式裡也OK

  10. 結帳欄位的 CSS 樣式調整你可以參考元件組成:

    #mxp-billing-zipcode – 這是包在下拉選單最外層的 div id
    #mxp-billing-zipcode [name=”county”] – 縣市
    #mxp-billing-zipcode [name=”district”] – 鄉鎮
    #mxp-billing-zipcode [name=”zipcode”] – 郵遞區號
    先對這幾個設定好樣式 CSS 就可以在畫面中控制樣式。例如:

    #mxp-billing-zipcode {
    width: 100px;
    }

    請問這段要貼在哪裡才能更改呢?

    1. Hi, CSS部分貼在結帳頁面中去設定就可以哦! 不過準確的說是有用到我這段 code 的地方會比較好,如果你會改上面那些程式碼,可以補在 之後,不確定怎捕的話可以試著改在全站都有 include 的 CSS 中

  11. 大大,想請問一下,如果離島不配送
    想要隱藏部分的縣市,該怎麼做修改呢?

    1. jQuery(‘#mxp-billing-zipcode’).twzipcode({
      readonly:true,
      detect: true,
      hideContry:[‘金門縣’,’連江縣’,’澎湖縣’],
      onCountySelect:changecb,
      onDistrictSelect:changecb
      });

      找到上述程式碼中這段,替換成這份。

      1. 大大謝謝,不過我後來是直接把相關縣市的代碼刪除,請問這樣之後會有其他問題嗎?

          1. 大大您好,想再請問一下
            我用的是OceanWP的主題
            在加上了綠界電子發票的外掛後
            結帳頁面就無法正確的運作,有解決的辦法嗎?

    1. 運送到不同的地址,這個是可以後台設定是否要開啟的功能。設定->運送方式->運送選項,看看是否有勾到「強制運送至客戶帳單地址」這個選項。

      1. 非常謝謝您 已經設定完畢 謝謝您分享
        另外 有方便再請教一個問題嗎?
        如果希望把 下拉是選單(郵遞區號) 那一列 放置 “地址”字樣的下方 該怎麼做會比較好呢 謝謝

          1. 那我大致上理解囉 謝謝您的回覆 非常感謝您 謝謝

  12. 感謝大大的程式,目前遇到一個問題,套用之後,使用 Elementor 做的網頁,有許多區塊都會變成空白,請問該如何修正?

    1. 我這些程式不會影響到其他頁面的說!就是結帳頁面而已。你說的網頁是哪些?有沒有範例或是截圖呢?

        1. 你貼的地方是主題下 functions.php 嗎? 然後第一行不用貼哦!我的程式碼有確定只會動到 結帳頁面 ,其他頁面會導致發生問題,還真的要從網站與程式部分下手了。

          1. 了解,謝謝你的回覆,我再研究看看。我是從第二行開始沒錯,貼在子主題 functions.php, 不知是否會是 多網站系統的問題?

  13. 感謝大大的貢獻,目前遇到一個問題,套用之後,不論是否勾選”運送到不同地址”,都會全時顯示兩個資訊區塊,原本是要瀏覽者勾選”運送到不同地址”後才會顯示第二個資訊區塊,請問有解嗎?

          1. 這部分是在程式碼片段中「移除在購物車計算運費的方法」這邊處理的,你可以註解那整段測試看看!我把計算運費的部分不在購物車階段處理

  14. 打擾了 ,想請教一個問題,您提供的程式碼是可以用的,但我發現一個問題,就是若配合綠界物流的話,選完門市後,門市的資訊會是「空的」,且左邊所填的會員欄位會被清空,但我試著把您的程式碼先關掉,則門市選完後就正常,這樣不知是否算是程式碼與綠界有所衝突呢?提供網址參考如下 : https://jwoo.tw/checkout/?add-to-cart=209&quantity=3
    感謝!

  15. 你好,請問如果我想將 shipping_phone 加入到「新訂單」EMAIL 中的「運送地址」,我該怎麼做呢?

  16. 您好,我用您的程式碼一切良好,但原本會顯示載具(包含選擇手機條碼那些欄位)的欄位會消失不見,暫時刪除程式碼後恢復正常。請問有解決方法嗎?
    感謝您!

    1. Hi! 我猜你是用綠界電子發票模組,過去有過類似案例。那模組我看這幾天還有更新,可以先試著更新看看!如果還沒有辦法解決,就可能是別的原因了,都需要去細查。

      1. 您好,在刪除程式碼第142~414行(原程式碼行數)後恢復正常,請問這段程式碼的作用是什麼?

        感謝您!

      2. 您好,在刪除程式碼第142~414行(原程式碼行數)後恢復正常。
        請問該段程式碼作用為何?

        謝謝您!

        1. 因為兩個外掛互搶結帳表單所導致,需要調整外掛中的設定,這部分頗工程,也是當個案來看了

      3. 您好,在刪除程式碼第142~414行(原程式碼行數)後恢復正常。
        請問該段程式碼作用為何?

        謝謝您!

  17. 感謝大大非常有幫助的程式碼,
    我發現shipping欄位的信箱、電話並不會出現在結帳成功的頁面和訂單通知email內,
    請問有解決辦法嗎?謝謝。

      1. 感謝,
        另外最近出現一個新問題,
        按下下單後訂購人地址會被清空,出現”請填寫地址進行下一步.”導致無法下單的循環,
        試過刪掉//移除在購物車計算運費的方法,也是一樣,請問是何問題?謝謝

      2. 送出訂單後地址會消失的問題,
        關掉外掛WooCommerce Blocks就好了。

  18. 使用綠界串接
    沒有使用其他更改表格的外掛
    使用代碼前能正常操作超商取貨及取貨付款

    使用代碼後,正常選完電子地圖的超商後
    會一直跳出

    請選擇取貨門市
    帳單 超商取貨門市名稱 為必填欄位。
    帳單 超商取貨門市地址 為必填欄位。
    帳單 超商取貨門市代號 為必填欄位。

    導致無法送出下單
    但網頁上都有顯示已選取超商的各項資訊
    弄了好久,找不出原因
    還麻煩版大解惑了!

  19. 請問使用WooCommerce3.8.1
    綠界超商選好後 送出訂單會不成功 錯誤訊息是請選擇取貨門市,
    主題Shop Isle

    1. 文中的程式碼用在調整結帳欄位,而綠界超商外掛也會調整,兩者會造成一些衝突需要排除才可以正常使用。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *