本篇文章更新時間:2020/01/07
如有資訊過時或語誤之處,歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉!歡迎入群聊聊~


如標題,剛好這件事最近比較常要做,乾脆先整理成 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 。)


Share:

作者: Chun

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

參與討論

118 則留言

  1. 自動引用通知: WordPress教學 – 自動帶出郵遞區號 – Max的程式語言筆記
  2. 您好,請問用了上述的結帳欄位調整後,商店是否就無法銷售給台灣以外的地區?
    有試著按照教學function檔,但結帳時便無法選擇國別了,該如何再優化呢?謝謝

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

      1. 前輩好,
        我一開始也是遇到「無法下載」的問題,因為我按右鍵,沒有「另存新檔」這個選項。
        後來我嘗試按「另存連結」,就可以下載檔案了。
        因為我之前試過其他文章提供的代碼,問題還真不少,尤其是下拉縣市郵遞區號的選單,其他文章是將js網址放在代碼中,不曉得為什麼總是無法成功,還造成其他的問題。
        而前輩這篇教學則是將「js檔案」放在子主題中,這個作法終於成功了,而且更快,謝謝你提供這麼完整的代碼與教學。
        鞠躬

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

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

        1. 看圖不像是有放到名為「js」的資料夾哦! 請確定一下路徑是主題目錄下 storefront/js/ 這裡!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    1. 目前沒碰到什麼意外就是~ 試試看囉!有問題再麻煩回報

    1. 這邊要調整修改權重,把我這份的權重改低於RY的版本來搭配使用。要動到程式

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

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

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

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

        1. 不會,只是硬改的部分自己也是要記得,免得哪天要用發現找不回

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

  13. 自動引用通知: [WooCommerce] 片段(fragments)互動程式設計要點 - 一介資男
    1. 運送到不同的地址,這個是可以後台設定是否要開啟的功能。設定->運送方式->運送選項,看看是否有勾到「強制運送至客戶帳單地址」這個選項。

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

        1. 透過CSS或是要改輸出結構的做法。不過都很客製化了。

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

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

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

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

          2. 我倒是沒在多站架構下測過,但看程式也照理不影響。實在要特別深入去查證了

  15. 自動引用通知: [WooCommerce] 結帳欄位的本地化功能 Address i18n | 一介資男
  16. 感謝大大的貢獻,目前遇到一個問題,套用之後,不論是否勾選”運送到不同地址”,都會全時顯示兩個資訊區塊,原本是要瀏覽者勾選”運送到不同地址”後才會顯示第二個資訊區塊,請問有解嗎?

        1. 挖勒~ 手邊還真沒有這套可以測試了!目前是沒有發生過這種衝突的說

          1. 剛剛測試出來了,是最後一段會導致這個問題,更新目前最新的 snippet 就好囉! 試試看~

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

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

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

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

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

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

        感謝您!

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

        謝謝您!

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

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

        謝謝您!

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

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

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

    1. Hi, 不確定你的需求是如何,這部分建議有開發經驗或是找有開發經驗的人調整比較合適

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

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

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

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

    1. 我更新過文中的 code 對應目前最新版的綠界物流囉!可以再貼過取代試試看~

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

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

    2. 我更新過文中的 code 對應目前最新版的綠界物流囉!可以再貼過取代試試看~

  23. 利用flatsome添加代碼
    在綠界上面出現
    “”沒有可用的送貨選項。請確認輸入正確的地址,如果需要任何協助,請與我們聯絡。“”

    請問有人有遇到這情況嗎?該怎麼解決,謝謝

  24. 前輩好,
    謝謝你的教學,運作地很好,也很容易上手。
    我想修改你的代碼的placeholder,我改成這樣(只有改placeholder):
    function mxp_custom_override_my_account_billing_fields($fields) {
    //補上欄位定義就好,不需指定權重
    $fields[‘billing_company’] = array(
    ‘type’ => ‘text’,
    ‘label’ => ‘公司名稱’,
    ‘placeholder’ => ‘如需打統編,請填寫正確的公司抬頭’,
    ‘required’ => false,
    ‘class’ => array(‘form-row-wide’),
    ‘label_class’ => array(),
    ‘clear’ => true,
    ‘options’ => array(),
    );
    $fields[‘billing_company_tax_id’] = array(
    ‘type’ => ‘text’,
    ‘label’ => ‘公司統編’,
    ‘placeholder’ => ‘如需打統編,請填寫正確的公司統編’,
    ‘required’ => false,
    ‘class’ => array(‘form-row-wide’),
    ‘label_class’ => array(),
    ‘clear’ => true,
    ‘options’ => array(),
    );
    但是實際沒有出現我改的「如需打統編,請填寫正確的公司統編」
    (其實我在許多placeholder的地方都有改文字,可是都沒有顯示我改的?)
    可以請前輩幫我看一下這個頁面嗎?謝謝你
    https://weing.com.tw/checkout/

    1. 前輩,不好意思,我找到修改placeholder的地方了,在代碼的672~677列,在這裡修改後就能正常顯示了。
      不曉得28、38、77、87、97、107、145、178、200、211、222、233這幾行的placeholder所修改的數值,是否要和672~677列的數值相同?

      1. Hi~ 同樣用途的欄位都可以使用同樣的 placeholder 沒問題哦(有改就同步)

        程式碼內操作到的「結帳欄位」,範圍不只有在結帳的時候,還有包含「我的帳號」頁面內的顧客資訊,這兩邊都有獨立客製化的彈性,所以我就寫一起同一份來調整。

  25. 不好意思,另外想請教:
    我的主題是OceanWP,
    我想將「縣市」、「鄉鎮」、「郵遞區號」這三個欄位並排。
    所以我先將將「郵遞區號」的’priority’與「地址」交換:「郵遞區號」改成’priority’ => 4
    因為我只知道二個欄位並排,前面那個是’form-row-first’,後面那個是’form-row-last’
    所以將「縣市」的’class’改成’form-row-first’
    再將「鄉鎮」的’class’改成’form-row-last’,
    可是不曉得如果「郵遞區號」也要加入一起並排的話,’class’要如何寫?

      1. 謝謝前輩,因為我想要「縣市」、「地址」、「郵遞區號」這三個一列。
        「公司名稱」與「統一編號」這二個一列,於是便想說幫這些欄位個別設定寬度。
        想請教為什麼我寫成下面這樣的CSS無效?
        @media (min-width: 768px){
        .woocommerce .form-row-first #billing_state_field {
        width: 30% !important;
        float: left !important;
        margin-right: 5% !important;
        clear: both !important;
        }
        .woocommerce .form-row-last #billing_city_field {
        width: 30% !important;
        float: left !important;
        margin-right: 5% !important;
        clear: both !important;
        }
        .woocommerce .form-row-last #billing_postcode_field {
        width: 30% !important;
        float: left !important;
        margin-right: 0% !important;
        clear: both !important;
        }
        .woocommerce .form-row-first #billing_company_field {
        width: 55% !important;
        float: left !important;
        margin-right: 5% !important;
        clear: both !important;
        }
        .woocommerce .form-row-last #billing_company_tax_id_field {
        width: 40% !important;
        float: left !important;
        margin-right: 0% !important;
        clear: both !important;
        }
        }

  26. 另外想請教前輩,代碼裡新增的”billing_company_tax_id”這個欄位,下單時有填寫「統一編號」,但是Email通知信裡面卻沒有出現,只出現「公司名稱」。
    請問如果要讓「統一編號」也出現在Email通知信裡面,是要另外加代碼去設定嗎?

      1. 前輩,不好意思,我將「訂單信件中加入客製化欄位」的那段程式碼的「收件人電話」改成「公司統編」,再將「_shipping_phone」都改成「billing_company_tax_id」。
        但是在Code Snippet外掛中新增後,訂單通知信裡面還是沒有出現「公司統編」,不曉得是哪裏改錯了?可以請前輩幫我看一下我修改的代碼嗎?
        我修改的程式碼是這樣:
        add_filter(‘woocommerce_email_order_meta_fields’, ‘mxp_woocommerce_email_order_meta_fields_billing_company_tax_id’, 10, 3);
        function mxp_woocommerce_email_order_meta_fields_billing_company_tax_id($fields, $sent_to_admin, $order) {
        $fields[‘billing_company_tax_id’] = array(
        ‘label’ => __(‘公司統編’),
        ‘value’ => get_post_meta($order->id, ‘_billing_company_tax_id’, true),
        );
        return $fields;
        }

        1. 除錯的順序是先印出來看看 $fields 裡面是否含有 tax_id 的這個屬性,再來就是把 label 與 value 配一個自己指定的值來印出看看!避開呼叫方法失敗的問題,先確認操作方向正確。

  27. 一介前輩你好,
    想請教文章中的那個檔案「jquery.twzipcode.min.js」,能不能直接將裡面的內容複製到CodeSnippet這個外掛裡面(新增一個JS代碼段)?
    因為某些因素,無法將檔案上傳到主題下方的「JS」文件夾裡面。
    謝謝你

    1. 是可以!但這操作不建議就是。要把我程式碼裡的 JS 改寫來符合塞入這個檔案。而且會改造成資料庫要去輸出這個檔案,讓網站慢一點哦。一般來說如果你不會改的話,先想辦法照我的流程來操作吧!網站無法上傳JS檔案也可以研究一下怎用主機的檔案管理介面操作。

      1. 謝謝一介前輩詳細提醒。
        因為我在網站上改用OXYGEN這套編輯器,而它卻禁用主題,所以就算檔案以前已經放在theme/child theme/js裡面,但是主題被禁用,似乎也抓不到資料?

        如果能找到其他方案上傳放置檔案是最好了,不曉得前輩是否有其他方案?

        1. 那你可能要找一下這套編輯器能不能設定載入某個JS檔案了(我沒用過這套)。這塊卡到客製化,能給的建議不多R~

發佈留言

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