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

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

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

目前功能:

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

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

套用結果如圖: 套用結果

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

使用方法

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

Facebook 外掛功能


Share:

作者: Chun

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

參與討論

75 則留言

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

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

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

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

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

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

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

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

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

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

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

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

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

  6. 請問大大,出現這些錯訊可能問題??
    使用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就整齊了

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

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

  8. 結帳欄位的 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 中

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

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

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

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

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

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

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

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

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

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

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

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

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

發佈留言

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