線上支援

WooCommerce 結帳欄位客製大全(陸續新增)

在購物車要結帳的時候，要讓顧客可以越省事越好應該是每個站主的目標，像是結帳頁面不要有的跳出連結、盡可能減少必填欄位、以及自動幫顧客帶入某些已知欄位，像是姓名、郵遞區號、送件地址都是能有效提升購物車轉換率的方法。另一方面，WordPress 購物車 WooCommerce 雖然目前是最多人使用的，但它畢竟是舶來品，很多欄位的設計跟台灣常見的習慣有所不同。

因此為了讓有在使用 WooCommerce 的朋友有更完整的欄位客製教學，我們整理了一篇常會需要客製化的項目，說明該如何使用程式碼來進行修改。但可能有朋友會問不是已經有 WooCommerce Checkout Manager 之類可以客製欄位的外掛了嗎？我也是喜歡用外掛解決問題的人，但就是有些事情它做不到，所以還是整理了這篇文章，而且有了程式修改的基礎概念，再搭配外掛使用更是能事半功倍喔！

主要內容如下：

Topic 0

使用網頁編輯軟體

要改網頁就是要用專業又好入門的網頁編輯軟體，它可以幫你除錯、FTP上傳下載、整理方便閱讀的格式，這都是使用一般的文書軟體所做不到的。這邊我推薦免費強大效能又好的 Sublime Text 3，近十年的網頁生涯換過不少主力編輯器，但自從它出了之後，不管換哪套編輯器我電腦裡都會留著一套，因為比效能目前還沒看過有人可以贏過它，所以萬一臨時要修改 code 的話，我非常喜愛使用 Sublime Text 3（以下簡稱 ST3）。

關於 ST3 的教學非常多，但那是提供給前端工程師看的，我們只要下載回來後安裝它，然後再安裝最最重要的 FTP 套件，有了它，要改檔案會非常快速又方便。先從官網下載，把它裝起來後，依照下面步驟說明來安裝 SFTP 套件。

Mac 與 Windows 都有支援

Console 是拿來安裝擴充用的介面

連結網址:https://packagecontrol.io/installation#st3

返回 ST3 然後，把剛剛複製下來的那一大段貼入游標的地方後按 Enter，它就會開始跑跑跑，這動作是在安裝 ST3 的套件管理工具，有了它就可以很容易安裝新的套件

準備來找 SFTP 這支外掛來安裝，先進入 Package Control

輸入關鍵字 Install，就可以看到 Install Package 的指令，這是準備安裝套件的意思，點下去

再輸入關鍵字 SFTP，就可以看到一個名為 SFTP 的套件，我們就是要利用它當程式修改好後，儲存後就能自動直接上傳的功能，點下去就會開始進行安裝

安裝完成後就會出現這個英文說明頁，接下來我們要先用它把在主機上的網站抓回我們的電腦

先在我的電腦中新增一個空白資料夾，這是要來放所有網站檔案的，所以記要得資料夾放在哪裡，資料夾名稱盡量取英文名，新增好後就用 Open 來開啟它

找到空白資料夾，點選 Open

開啟後就可以在左側欄看到你的資料夾名稱，點選右鍵，找到 SFTP/FTP > Map to Remote 後點下去

接下來會出現一個頁籤，未來在編輯網頁的時候新開的檔案都會出現在這邊，sftp-config.json 是設定 FTP 連線的檔案

依序修改此檔案，先把 type 改成 ftp，如果你的主機商有提供 sftp 連線則不須更動，upload_on_save 是指在儲存檔案時自動上傳主機，把它設為 true，最後是輸入 FTP 相關的帳密資訊

改好後存檔即可，sftp-config.json 就會存在你的網站資料夾裡，這個檔案切記不要上傳到主機上，不然 ftp 帳密就被人看光光了

存檔後一樣在資料夾上方點右鍵，找到 Browse Remote，如果 ftp 資訊正確的話，可以看到主機上的檔案列表

成功連線後，會看到主機目錄裡的資料夾，確保是含有 wp-admin、wp-content、wp-includes 資料夾的目錄才是 WordPress 網站目錄，然後點選 Folder actions

點選 Download，ST3 就會開始把整個網站的檔案抓回來到你開的資料夾裡面，這過程需要一些時間

最下方會顯示下載進度，等到完成後就可以在左側欄看到你所有的檔案，點擊任一一個檔案就會出現在右邊的視窗中，以方便進行編輯

到這邊 ST3 的開發環境就已經算是準備好了，你可以隨便修改一個檔案試試看，像是多一個空格或多一行，然後進行儲存(快捷鍵是 ctrl+s or cmd+s)，FTP 就會開始自動上傳，如果你怕改錯想用手動上傳，可以把 sftp-config.json 裡面的 upload_on_save 改成 false，然後修改完後在左側欄你修改的檔案上按右鍵，會看到 upload 的選項，點下去就會上傳。

用 ST3 的另外一個好處是它可以進行全站檔案的搜尋，假設今天你要找某段程式的某個部份，只要點選 Find > Find in Files，就可以輸入關鍵字進行所有檔案的搜尋，而且速度快到令人驚訝，找到你要的字串是在哪一個檔案後，就能方便修改或做其它處理了。

返回目錄

Topic 1

建立子主題

關於 WordPress 子主題的教學非常多，主要概念就是假設你的佈景主題是用買的，或是下載不是你自己從無到有開發的佈景主題，那就可能會遇到需要更新的時候，理論上沒有修改裡面的程式的時候，你就可以放心的更新，

但假設我們今天要修改 WooCommerce 的欄位，就會需要把程式碼寫在佈景主題裡面，所以萬一有更新時，作者不知道你有修改過，他就會以他自己完成的版本來發送更新，這時更新下去的話，之前你的修改就消失無縱了，所以為了避免這個狀況，才有子主題這個機制存在。

下面步驟說明如何實作子主題：

假設你現在用的佈景主題是 Storefront，新增一個空白資料夾叫做 Storefront-child，這就是子主題的資料夾，雖然沒有硬性規定要取這樣的名字，但是為了好辨識通常會取跟現有主題有相關聯的名稱

使用 ST3 開啟你的網站資料夾，然後開啟新檔，在檔案中複製以下文字後將其貼入

/*
Theme Name: Storefont child
Template: storefront
*/
@import url("../storefront/style.css");


• Theme Name： 是在後台外觀 > 佈景主題列表中會顯示的名稱，為了好辨識，命名邏輯也是以與原本主題相關連
• Templage： 是指這子主題的老爸是誰，用父主題資料夾的名稱輸入
• @import url： 這是匯入父主題的 css 檔，一套佈景主題最基本的檔案就是 style.css，匯入之後就可以沿用父主題的 css 而不會造成版面爆走，如果你用的主題不是 storefront，只要替換掉路徑的名稱就好，像是 ../mythemename/style.css

貼入後點選存檔，檔名為 style.css，儲存位置在你的子主題資料夾裡面，也就是 storefront-child 裡面，儲存成功後 SFTP 就會自動上傳到主機

在後台的佈景主題找到你的子主題並且啟用它，這樣就算是完成了子主題的建立

有些佈景主題啟用子主題後，會發生版面錯亂或是找不到 css 無法正確載入的情況，這多半是這個主題的 style.css 是沒有寫任何東西的，所以就算 import 了 style.css 也會沒有用，開發者為了更有邏輯的組織 css 檔，會特別用資料夾去分類他的 css 檔案架構，因此會需要使用 wp_register_script 的函式才能正確載入 css 檔。

如果你遇到了子主題跑版的情形，請先看一下你使用的主題有沒有提供子主題檔，有的話就用他們所提供的子主題，通常你會發現這種類型的子主題資料夾裡除了 style.css 外，還會多一支 funtion.php，而裡面通常就會寫像這樣的語法：

wp_register_style('html5blank', get_template_directory_uri() . '/css/main.css', array(), null, 'all');

這就代表它的主要 css 不是放在 style.css 裡面，而是放在主題目錄下 css 資料夾裡面的 main.css 檔，但因為 WordPress 規定一定要有 style.css，所以它是不得不的存在。

至於 function.php 除了可以利用其它路徑載入檔案外，它還有什麼功能呢？基本上所有與 WordPress 溝通、使用 hook 機制(下面會提到)、控制外掛等目的，都是寫在這支檔案裡面，所以它可以說是佈景主題的核心程式，如果你有自己 Google 試著 debug 的時候，常常看到教學文都會需要把程式碼貼在這支檔案裡面，

而我們這篇文章的主題，修改 WooCommerce 的結帳欄位，也是要把程式寫在這支檔案裡面，父主題有自己的 function.php 而子主題當然也有，而且子主題會直接繼承父主題這支檔案的所有內容，所以回到 ST3，新開一個空白的檔案，命名為 funciton.php 儲存在子主題資料夾中吧～

有了這兩個檔案後，我們的前置作業就算大功告成，接下進來進主題

更多關於子主題的設定細節，請參考 WordPress 子主題官方文件。

返回目錄

Topic 2

WooCommerce hook 機制說明

在開始正式進入修改 WooCommerce 的結帳欄位之前，我們先介紹修改的邏輯。有從上面看下來的朋友肯定會有一個疑問，為何我要修改的是 WooCommerce 這支外掛，而修改的程式卻是要寫在佈景主題裡面？問得非常好(謝謝)，WordPress 為了避免因為更新而造成修改被覆蓋，除了發展出父子主題的方式外，還有一種最常用的 Hook 機制，簡單說就是可以在主題裡面寫好程式碼，然後像掛衣服一樣掛在外掛上面，至於要怎麼掛、掛在哪裡，每支外掛都會有它自己的方式，想更深入了解 Hook 機制可以參考這篇專業文章。

WooCommerce 在很多地方都有先放好「衣架」，在結帳頁面有哪些地方可以掛衣服可以參考下圖，當然，除了結帳頁外，WooCommerce 還有很多其它頁面，所以當今天你想要掛某些程式在 WooCommerce 的某些頁面時，你只要去找那邊的衣架叫什麼名字，就可以很輕鬆的掛上你想要掛的程式。

紅色區域就是可以掛衣服的地方，WooCommerce 有超多的地方可以掛，可以參考 https://businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/

假設你今天想要在「有優惠券嗎?按此輸入您的優惠碼」前加入一段紅色的促銷字，像是「今天結帳享有 66 折優惠喔～」，就看到最上面的衣架名稱叫做 woocommerce_before_checkout_form，在子主題 function.php 的程式碼就可以這樣寫：

add_action('woocommerce_before_checkout_form','add_sale_word',10);
function add_sale_word(){
echo "<p style='color:red;'>今天結帳享有 66 折優惠喔～</p>";
}

加入後的效果如下圖：

促銷文字已順利「掛」上去了

可以發現字已經加進去了，但是我們想要的是比優惠券那段字更上面該怎做呢？這時候就要來看程式的組成。

add_action('woocommerce_before_checkout_form','add_sale_word',10);

add_action 指的是準備開始一個掛衣服的動作，裡面第一個 woocommerce_before_checkout_form 參數還記得嗎？它就是衣架的名稱，而 add_sale_word 是要被掛上去的東西，以及最後一個 10，這個 10 代表著這件衣服被掛上去的順序，如果我們想要比優惠券那段字更上面，只要把這 10 改成 9 看看，就能達成我們要的效果了。

至於 add_sale_word 裡面就是我們想做的事，在這邊我們使用 echo，echo 不是回聲，而是在 php 中輸出東西的語法，在這邊我們輸出一段 html，用的是 p 標籤，並且給他一個 style 紅色，這樣就完成我們要的效果。

而當修改 WooCommerce 結帳欄位最常用到的衣架是 woocommerce_billing_fields ，而第一個範例移除不需要的欄位就是要把程式掛在這這個衣架上。

WooCommerce 的結帳區塊分為「帳單資訊」與「運送資訊」，要針對哪一個欄位進行修改，只要找到這個欄位的英文名稱，做相對應的操作就好，以下是每個欄位的中英文名稱對照：

帳單資訊

• billing_first_name – 名字
• billing_last_name – 姓氏
• billing_company – 公司名稱
• billing_address_1 – 門牌號碼與街道名稱
• billing_address_2 – 公寓，套房，單位等（選填）
• billing_city – 鄉鎮市
• billing_postcode – 郵遞區號
• billing_country – 國家
• billing_state – 縣 / 市
• billing_email – 電子郵件
• billing_phone – 聯絡電話
• order_comments – 訂單備註

運送資訊

• shipping_first_name – 名字
• shipping_last_name – 姓氏
• shipping_company – 公司名稱
• shipping_address_1 – 門牌號碼與街道名稱
• shipping_address_2 – 公寓，套房，單位等（選填）
• shipping_city – 鄉鎮市
• shipping_postcode – 郵遞區號
• shipping_country – 國家
• shipping_state – 縣 / 市
• shipping_email – 電子郵件
• shipping_phone – 聯絡電話

Topic 3

移除不需要的欄位

假設今天我們讓使用者結帳的時候不需要提供公司名稱這個資訊，就可以加入以下的程式碼：

add_filter( 'woocommerce_billing_fields', 'remove_billing_company' );
function remove_billing_company($fields){
unset($fields['billing_company']);
return $fields;
}


使用 unset 這個方法來指定要移除哪一個欄位，中括弧內寫欄位的英文名稱就好，以此類推，要再多移除鄉鎮市欄位就再多複製一筆 unset 那行，然後把中括弧裡面的 billing_companey 替換成 billing_city 即可，注意要小心所有的引號、分號、括弧，只要少了任何一個，程式就會發生錯誤無法執行，請務必小心！

Topic 4

改變必填項目

上面我們從移除不需要的欄位的範例裡學到了如何指定我們要修改的欄位，而每一個欄位都有許多屬性來控制相關的設定，以下就常用屬性用途進行說明：

• type – 欄位的類型，有文字(text)、多行文字欄位(textarea)、密碼(password)、下拉選單(select)
• label – 欄位的名稱
• placeholder – 輸入框裡面的提示文字
• class – 提供給 css 的類別名稱
• required – 設定欄位是否為必填，是(true)、否(false)
• clear – 如果發現攔位都集中在同一行，可以把這選項設為 true 來清除 css float
• label_class – 提供給 css 的欄位名類別名稱
• options – 定義 type 為下拉選單欄位裡面的選項
• priority – 定義欄位的先後順序，值越小越前面

首先我們假設我們希望不一定要必填地址才能送出訂單，因為有提供超商取貨付款的金流方式，所以地址可以不用為必填欄位，這時候可以這樣寫：

add_filter( 'woocommerce_billing_fields', 'custom_billing_address_1_required' );
function custom_billing_address_1_required($fields) {
$fields['billing_address_1'] = array(
'required'=>false
);
return $fields;
}


把衣服掛在 woocommerce_billing_fields 這個衣架上，然後指定欄位名稱 billing_address_1，在它的屬性下把 required 設為 false，這樣地址欄位就會變成非必填的。

Topic 5

改變欄位名稱

接下來，我想把聯絡電話的欄位名稱，改為更具體的名字：行動電話，一樣找到衣架 woocommerce_billing_fields，指定欄位名，把它的屬性 label 改為「行動電話」，記得因為名稱是字串的形式，一定要加引號，而必填屬性為布林值，所以 true 或 false 不用加引號，程式碼範例如下：

add_filter( 'woocommerce_billing_fields', 'custom_billing_phone_label' );
function custom_billing_phone_label($fields) {
$fields['billing_phone'] = array(
'label'=>"行動電話"
);
return $fields;
}


Topic 6

改變欄位寬度

預設的姓名欄位是分成名跟姓兩欄，這不符合台灣人的使用習慣，我們慣用的是姓+名一個欄位就解決，然後改成滿版的寬度，整合上面曾經出現過的寫法，來試著寫出以下的結果。

1. 移除名的欄位
2. 把姓氏欄位名稱改成「您的大名」
3. 把姓氏欄改成滿版寬度，原理是增加 css class: “form-row-wide”

程式碼如下：

add_filter( 'woocommerce_billing_fields', 'custom_name_field' );
function custom_name_field($fields) {
unset($fields['billing_first_name']);
$fields['billing_last_name'] = array(
'label'=>"您的大名",
'class' => array('form-row-wide')
);
return $fields;
}


Topic 7

帶入現有會員資訊

有些會員資料在加入時就已經填寫，結帳時如果可以自動帶入就能更方便使用者減少輸入的欄位，增加購買機率。延續上一個修改，我們把名字的欄位移除，只留下姓氏，但會員資料在填寫時是採用名+姓的方式，那 WooCommerce 在預設情況下「您的大名」欄位就只會自動帶入姓而沒有名，因為名被我們移除掉了。

所以我們要取得登入會員的名字，然後用 javascript 的方式把名跟姓合併後放入「您的大名」這個欄位。我們會需要用到 WordPress 的 API：wp_get_current_user，用它可以取得會員的各種資料，像是帳號名稱，或是我們需要的會員名字，詳細的說明請參考官方文件，程式設計的邏輯為：

1. 判斷會員是已登入，如果有登入才會撈取會員姓氏
2. 使用 wp_get_current_user 取得登入會員的資料
3. 取得 user_lastname
3. 使用 jQuery 把名跟姓放進 billing_last_name 的值 value 裡面

add_filter('woocommerce_before_checkout_form','apply_username_field',10);
function apply_username_field() {
if ( is_user_logged_in() ) {
$current_user = wp_get_current_user();
$lastname = $current_user->user_lastname;
$output = '
<script>
var $ = jQuery.noConflict();
$(document).ready(function(){
$("#billing_last_name").attr("value","'.$lastname.'");
})
</script>';
echo $output;
}
}


這邊用到的衣架是 woocommerce_before_checkout_form，指的是把 javascript 放在結帳表單之前，然後使用 echo 的方式來輸出 javascript，這邊要注意的是單引號跟雙引號不要搞混，單引號是 php 的內容，而雙引號是給 javascript 使用的，$lastname.$firstname 中間的「.」是 php 連結兩個資料的寫法，這樣就能把姓跟名組合在一起。

Topic 8

改變欄位順序

WooCommerce 地址欄位預設是比照美國地區的習慣，是從小鄉鎮填到大地區，但台灣剛好是顛倒，所以我們要把地址相關的欄位，全部重新排序過，目標順序是郵遞區號、縣 / 市、鄉鎮市以及街道地址，這個修改需要注意的是，它的程式邏輯是會把所有欄位都進行排序後再輸出最後結果，所以與地址不相關的欄位也務必記得要列入排序的考量之中，程式邏輯如下：

1、先把需要的欄位存到 $order 裡面
2、指定每個欄位的優先順序(priority)

2017/08/025 新版修改欄位順序寫法

根據在 stackoverflow 查到的資料表示，WooCoomerce 3.0.4 之後的版本不支援先前的寫法，在實驗過後調整為以下寫法，主要拆成兩部份，一個是設定基本資料欄位，另一個是控制地址相關欄位，本以為寫在同一支 function 就可以運作，但爬資料說似乎會受到商店國別的影響而被覆寫欄位順序，所以改分成兩支程式來覆寫。

add_filter("woocommerce_checkout_fields", "new_order_fields");
function new_order_fields($fields) {
$fields["billing"]["billing_last_name"]["priority"] = 10;
$fields["billing"]["billing_email"]["priority"] = 20;
$fields["billing"]["billing_phone"]["priority"] = 30;
$fields["billing"]["billing_country"]["priority"] = 40;
$fields["billing"]['billing_last_name']['class'] = array('form-row-wide');
$fields["billing"]['billing_email']['class'] = array('form-row-wide');
$fields["billing"]['billing_phone']['class'] = array('form-row-wide');
return $fields;
}


每個欄位都有自己的 priority 屬性，數字越小，排得越前面，所以這邊的排序關係跟他是被寫在誰的前面沒有關係，只要 priority 數字比其它人小，縱使被寫在最後一行依舊會出現在結帳頁中的第一個順位。另外也不一定要用十進位，使用十進位是以防未來在某兩個欄位中間要插入其它欄位時，還有空間可以插入，而不用修改其它欄位的 priority。

另外記得要注意的地方，billing_country 這欄位一定要存在，不然會發生資料驗證無法通過的情況，不存在它會一直跳出「請填寫地址進行下一步」的錯誤訊息，縱使你已經填完所有地址資訊。

add_filter( 'woocommerce_default_address_fields', 'new_order_address_fields' );
function new_order_address_fields( $fields ) {
$fields["postcode"]["priority"] = 50;
$fields["state"]["priority"] = 60;
$fields["city"]["priority"] = 70;
$fields["address_1"]["priority"] = 80;
return $fields;
}


地址相關的資訊用另一支程式來掛在另一個名為 woocommerce_default_address_fields 的衣架上，priority 的部份接續上方的數值，這樣才能正確的設定地址欄位的順序。

Topic 9

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

當我們改好輸入地址的順序後，為了更方便訪客可以更快速的輸入地址資訊，我們加入下拉選單來讓訪客可以省下打字的時間，並且減少錯誤輸入的機會。我們希望實現的效果如下：

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

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

add_filter("woocommerce_after_checkout_form", "twzipcodefield");
function twzipcodefield() {
$output = '
<script src="https://hellowp.cc/jquery.twzipcode-1.7.14.min.js"> </script>
<script>
var $ = jQuery.noConflict();
function updateValue(){
$("#billing_state").val($("select[name=\'county\']").val());
$("#billing_city").val($("select[name=\'district\']").val());
$("#billing_postcode").val($("input[name=\'zipcode\']").val());
}
$(document).ready(function(){
$("form.woocommerce-checkout").twzipcode({
"detect": function (coords) {
updateValue();
}
});
$("select[name=\'county\']").appendTo($("#billing_state_field"));
$("select[name=\'district\']").appendTo($("#billing_city_field"));
$("input[name=\'zipcode\']").appendTo($("#billing_postcode_field"));
$("select[name=\'county\'],select[name=\'district\']").change(function(){updateValue();})
$("input[name=\'zipcode\']").keyup(function(){updateValue();})
$("#billing_postcode,#billing_state,#billing_city").hide();
})
</script>';
echo $output;
}

這邊主要是 javascript 的語法居多，最前面是先載入 jquery.twzipcode-1.7.14.min.js 這支程式，然後接下來使用這支程式所產生的下拉選單，把原始的欄位取代掉，而當下拉選單更新時，把選到的縣市結果指定給原始的欄位，藉此達成下拉選單地區連動的功能。

2017/08/07 新增帳單地址與運送地址下拉選單功能

add_filter("woocommerce_after_checkout_form", "twzipcodefield_shipping");
function twzipcodefield_shipping() {
$output = '
<script src="https://hellowp.cc/jquery.twzipcode-1.7.14.min.js"></script>
<script>
var $ = jQuery.noConflict();
function updateValue(field){
$("#"+field+"_state").val($(".woocommerce-"+field+"-fields select[name=\'county\']").val());
$("#"+field+"_city").val($(".woocommerce-"+field+"-fields select[name=\'district\']").val());
$("#"+field+"_postcode").val($(".woocommerce-"+field+"-fields input[name=\'zipcode\']").val());
}
$(document).ready(function(){
$(".woocommerce-billing-fields,.woocommerce-shipping-fields").twzipcode({
"detect": function (coords) {
updateValue("billing");
updateValue("shipping");
}
});
function updateField(field){
$(".woocommerce-"+field+"-fields select[name=\'county\']").appendTo($("#"+field+"_state_field"));
$(".woocommerce-"+field+"-fields select[name=\'district\']").appendTo($("#"+field+"_city_field"));
$(".woocommerce-"+field+"-fields input[name=\'zipcode\']").appendTo($("#"+field+"_postcode_field"));
}
updateField("billing");
updateField("shipping");
$("select[name=\'county\'],select[name=\'district\']").change(function(){updateValue("billing");updateValue("shipping");})
$("input[name=\'zipcode\']").keyup(function(){updateValue("billing");updateValue("shipping");})
$("#billing_postcode,#billing_state,#billing_city,#shipping_state,#shipping_city,#shipping_postcode").hide();
})
</script>';
echo $output;
}

與單純只有帳單地址的 JS 相比，多加了運送地址相關的欄位，但基本邏輯是一樣的。

Topic 10

新增欄位

有時候行銷管道不是每個都採用線上的方式進行時，像是街上發的傳單、公車廣告，或是朋友的介紹，這些管道就比較難用追縱碼的方式來進行追縱，所以就可以在結帳時使用下拉選單的方式請訪客選擇，接下來我們要新增一個下拉選單的欄位叫做「您從何處得知我們？」，包含四個選項，然後在後台的訂單列表頁把這個結果顯示出來。程式邏輯的部份會使用到三個衣架，分別是 woocommerce_before_order_notes、woocommerce_checkout_update_order_meta、woocommerce_admin_order_data_after_billing_address。

1、新增一個下拉選單並新增選項後，把它放在訂單備註的前面
2、當訂單更新時，把這個欄位的值存到訂單的資料表中
3、把資料掛到後台的訂單明細之中


//新增下拉選單
add_action( 'woocommerce_before_order_notes', 'add_select_checkout_field' );
function add_select_checkout_field( $checkout ) {
woocommerce_form_field( 'channel', array(
'type' => 'select',
'class' => array( 'form-row-wide' ),
'label' => '您從何處得知我們？',
'options' => array(
'公車廣告' => '公車廣告',
'街頭文宣' => '街頭文宣',
'友人告知' => '友人告知',
'網路廣告' => '網路廣告'
)
),$checkout->get_value( 'channel' ));
}
//儲存下拉選單的資料
add_action('woocommerce_checkout_update_order_meta', 'update_field_data');
function update_field_data( $order_id ) {
if ($_POST['channel']){
update_post_meta( $order_id, 'channel', esc_attr($_POST['channel']));
}
}
//在後台訂單明細顯示資料
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_order_meta', 10, 1 );
function custom_order_meta($order){
echo '<p><strong>客戶來源:</strong> ' . get_post_meta( $order->id, 'channel', true ) . '</p>';
}


這邊使用「’公車廣告’=> ‘公車廣告’」這樣的寫法來定義下拉選單的內容，雖然看起來好像是一樣的東西寫兩次，但他們有不同的意義，第一個公車廣告是這個欄位所代表的值，也就是會在後台訂單明細中看到的結果，而第二個是使用者會看到的選項，因此只要能方便商店管理者以及使用者辨識，這兩邊長得不一樣也沒關係。

至於這個衣架 woocommerce_admin_order_data_after_billing_address 是掛在如下圖的位置：

顯示在帳單資訊的最下方

Topic 11

三聯式發票欄位

開立發票欄位也是常常用到的功能，我們將新增一個單選方塊，讓買家決定是要捐贈發票還是開立三聯式發票給公司報帳，當選擇三聯式發票後，會顯示公司抬頭與統一編號兩個欄位。程式設計說明如下：

1、為了方便公司抬頭跟統編可以在一起顯示，所以先移除 WooCommerce 內建的公司名稱欄位

add_filter( 'woocommerce_billing_fields', 'remove_defalut_company_name' );
function remove_defalut_company_name($fields) {
unset($fields['billing_company']);
return $fields;
}

2、新增三個欄位，分別是一個單選方塊(radio)與兩個文字輸入框(text)

add_action( 'woocommerce_before_order_notes', 'add_invoice_type' );
function add_invoice_type( $checkout ) {
woocommerce_form_field( 'invoice_type', array(
'type' => 'radio',
'class' => array( 'form-row-wide' ),
'label' => '是否捐贈發票',
'options' => array(
'invoice_no' => '捐贈發票至XXX',
'invoice_yes' => '不捐贈發票',
)
),$checkout->get_value( 'invoice_type' ));
woocommerce_form_field( 'company_name', array(
'type' => 'text',
'class' => array( 'form-row-wide' ),
'label' => '公司抬頭',
),$checkout->get_value( 'company_name' ));
woocommerce_form_field( 'company_id', array(
'type' => 'text',
'class' => array( 'form-row-wide' ),
'label' => '統一編號',
),$checkout->get_value( 'company_id' ));
}

3、在每次提交訂單時，把我們自行新增的三個欄位的值存到資料庫

add_action('woocommerce_checkout_update_order_meta', 'update_invoice_meta');
function update_invoice_meta( $order_id ) {
if ($_POST['invoice_type']){
update_post_meta( $order_id, 'invoice_type', esc_attr($_POST['invoice_type']));
update_post_meta( $order_id, 'company_name', esc_attr($_POST['company_name']));
update_post_meta( $order_id, 'company_id', esc_attr($_POST['company_id']));
}
}

4、在後台顯示發票資訊，而只要當訂單需要三聯式發票時，才會顯示公司抬頭與統編的資料。

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'custom_order_meta_invoice', 10, 1 );
function custom_order_meta_invoice($order){
if( get_post_meta( $order->id, 'invoice_type', true ) == 'invoice_yes' ){
echo '<h3><strong>發票:</strong> 開立三聯式發票</h3>';
echo '<p><strong>公司抬頭:</strong> ' . get_post_meta( $order->id, 'company_name', true );
echo '<br><strong>統一編號:</strong> ' . get_post_meta( $order->id, 'company_id', true ).'</p>';
} else {
echo '<h3><strong>發票:</strong> 捐贈發票至XXX</h3>';
}
}

5、使用 JS 控制前台公司抬頭與統編欄位的隱藏與顯示

add_filter("woocommerce_after_checkout_form", "invoice_container");
function invoice_container(){
$output = '
<style>label.radio{display:inline-block;margin-right:1rem;}</style>
<script>
var $ = jQuery.noConflict();
$(document).ready(function(){
$("#invoice_type_invoice_no").prop("checked", true);
$("#company_name_field,#company_id_field").hide();
$("input[name=invoice_type]").on("change",function(){
if($("#invoice_type_invoice_yes").is(":checked")) {
$("#company_name_field,#company_id_field").fadeIn();
} else {
$("#company_name_field,#company_id_field").fadeOut();
}
})
});
</script>
';
echo $output;
}

最後記得將「捐贈發票至XXX」中的「XXX」修改為捐贈單位。完成後就可以在表單最下面看到如下圖的發票欄位。

預設不顯示公司抬頭與統編欄位

Topic 12

預設顯示密碼欄位

如果網站有提供非會員結帳的功能，又希望讓用戶在結帳完成後同時能成為會員，勢必要能簡化加入會員的流程。在預設情況下「建立帳號」是未勾選，並且輸入密碼欄位是被隱藏的，以下的程式範例可將勾選改成預設，並直接顯示密碼欄位：

add_filter("woocommerce_after_checkout_form", "show_password");
function show_password(){
$output = '
<script>
var $ = jQuery.noConflict();
$(document).ready(function(){
$("#createaccount").prop("checked", true);
$("div.create-account").removeAttr("style");
$("#createaccount").change(function(){
if( $("#createaccount").prop("checked") ) {
$("div.create-account").show();
} else {
$("div.create-account").hide();
}
})
});
</script>';
echo $output;
}

Topic 13

動態顯示運費

習慣上我們會以滿額免運費的方式來吸引顧客加購商品，但某些時候要運送的地區比較遠，縱使滿額還是需要顧客負擔運費，但運費部分可以提供優惠，像是「基本運費 100 元，消費滿 1,000 元運費優惠 50 元」這樣的條件，可以使用以下的語法來實現：


function ods_set_shipping_method_conditional( $rates ) {
$order_total = WC()->cart->get_subtotal();
if( $order_total >= 1000 ) {
unset( $rates['flat_rate:1'] );
} else {
unset( $rates['flat_rate:2'] );
}
return $rates;
}
add_filter( 'woocommerce_package_rates', 'ods_set_shipping_method_conditional', 100 );


$order_totoal 為購物車小計金額，當小計大於等於 1000 的時候，使用 unset 把 flat_rate:1 這個運費條件移除掉，如果未滿 1000 元，則把 flat_rate:2 移除掉。在 WooCommerce 後台設定運費區域時，每種運送方式都會有一個唯一的 value，而 flat_rate:1 跟 flat_rate:2 分別代表基本運費跟優惠運費，後台運費設定如下圖：

至於要如何找到該運送方式的 value 需要在前台開啟開發者工具或是檢查元素來進行檢視，理論上單一費率會是 flat_rate 開頭，冒號後面接的是第幾個運送方式，找尋 value 的方式請參考下圖：

找到 value 後就可以針對購物車金額來決定要顯示的運費方式。

返回目錄
 
Topic 14

其它

業務邏輯百百種，這邊列舉出的項目算是比較常見的需求，但如果你是購物商城的站長，或是有在協助公司經營 WooCommerce 電子商務網站，遇到任何結帳欄位相關的問題都可以在下方留言，或是你也可以許願，像是欄位的填寫限制條件、樣式修改等等，不是「太複雜」的話我們都願意幫忙寫寫看，然後測試過後沒問題，一樣會在這邊分享出來給有相同需要的朋友，所以不用客氣儘管問，你我的問題能幫到更多的人！