WordPress 預設就是一個文章的一個部落格網站,但自從 WooCommerce 開發了一款電商外掛後,只要安裝並啟用之後就立刻進升為電商購物網站,所有的一切基本功能他都已經完成,可以直接上架開店了.

而 WooCommerce 預設的版面都還很陽春,都還需要自行客製修改,例如原始結帳畫面就醜不拉機

但 WooCommerce 也有提供付費美美的外掛供使用者選購,畢竟他也是營利機構要賺錢.

當然也也許多善心人士寫了不少的外掛供你免費安裝,但此類外掛大多還是隱藏一些進階功能讓你付費啟用,有些付費的外觀例如The7, Divi 安裝後也幫使用者美化加強了不少WooCommerce 的功能,在其各自的外觀下會多一個 woocommerce 的目錄夾,就是這些外觀商繼承WooCommerce 外掛進來改善的,例如外觀The7的結帳就改得還不錯,當然細節還是要你自行調整.

但如果你不想花錢,一切都要自己來,當然這樣也可以.
那就要了解 WordPress 的架構,及WooCommerce 的EVENT及API,以下是
原廠的技術文件
https://docs.woocommerce.com/wc-apidocs/hook-docs.html
及函數
http://hookr.io/plugins/woocommerce/3.0.6/functions/
如果沒有範例相信初學者也不知如何下手,所幸有這個網站提供許多客製範例
https://businessbloomer.com/blog/
WooCommerce 購物車雖然做得很完善,跨國及不同類別不同運費及販售軟體提供下載無運費等都可以設定,但對於台灣來講,超商取貨及超商取貨付款的行為他就沒有規劃到,依原使架構即使選擇超商取貨，選定超商後地址還是必輸欄位,這個對於買家來講造成困擾導致可能放棄購買.
因此針對這個問題國外WordPress Blog網站沒有任何範例只能自己硬著頭皮下去改.

選擇超商取貨時,不提供地址無法結帳

我們發現WooCommerce 在進結帳畫面前會去執行 woocommerce_checkout_fields EVENT然後帶入結帳所有欄位的物件

woocommerce_checkout_fields在 class-wc-checkout.php 的位置，有心可以從頭到尾trace這隻結帳程式，而成為專家，但目前就以解決當前問題為優先。
既然WooCommerce 在進結帳畫面前會去執行 woocommerce_checkout_fields EVENT然後帶入結帳所有欄位的物件，那我們就寫一隻外掛程式check_ecpay_shipping()，然後使用add_filter( )塞進EVENT裡讓結帳時跟著被執行，然後再程式裡面使用
if (WC()->session->get( ‘chosen_shipping_methods’ )[0]==’ecpay_shipping’) {…}/*綠界超取=ecpay_shipping,若為其他廠商外掛則自行取的代號*/
判斷如果超商取貨被勾選時就隱藏所有地址欄位，再把連絡電話的標題修改為必須填入090手機電話。

在主題外掛functions.php新增自訂函數 check_ecpay_shipping()

/** 
 檢查若綠界超商取貨則隱藏地址
 */
 function check_ecpay_shipping($fields) {
   if (WC()->session->get( 'chosen_shipping_methods' )[0]=='ecpay_shipping') {
        unset($fields['billing']['billing_company'] );
        unset($fields['billing']['billing_address_1'] );
        unset($fields['billing']['billing_address_2'] );
        unset($fields['billing']['billing_city'] );
        unset($fields['billing']['billing_postcode'] );
        unset($fields['billing']['billing_country'] );
        unset($fields['billing']['billing_state'] );
       $fields['billing']['billing_phone'] = array(
           'label'=>"請填090行動電話",
           'required'=>true);
 }
 return $fields;
}

使用add_filter( )塞進EVENT裡

add_filter( 'woocommerce_checkout_fields',
  'check_ecpay_shipping' ,9999);

選擇超商取貨

地址隱藏了,電話標籤也改了

但是做到這裡還有一個小瑕疵要改進,就是結帳畫面還是可以讓使用者再挑回其他運送方式,這個時候左邊的畫面沒有即時更新

不過此時強行結帳還是過不去擋住了,可見內部地址已經還原只是沒有及時顯示在畫面上,若有改善會再回頭補充…

＜文章提供＞

亞巨多媒體有限公司

亞巨多媒WordPress的架站實例

jean@aibab.tv