重點整理
WooCommerce 預設結帳表單有不少台灣用不到的欄位，例如分開的姓、名或國家。安裝 Checkout Field Editor 後，可在 Checkout Form 隱藏或編輯帳單、運送、訂單備註三區欄位；建議用 Disable 隱藏而不是 Remove 刪除，日後要恢復比較方便。
WooCommerce 自訂結帳表單 可以將系統預設的結帳表單欄位做修改，主要目的是精簡結帳表單需填寫資訊，讓顧客在操作結帳時可以有更順暢的結帳流程，另一方面也可以將預設結帳表單一些比較不符合使用需求的欄位做刪除，比如姓名欄位不需要跟國外一樣分為兩欄，或者是地址不需要輸入國家等（如果只在台灣銷售）。
在本篇教學中將說明安裝 WooCommerce 自訂結帳表單外掛，以及結帳、運送、訂單備註三個表單位置編輯的方式，如果說想先瞭解 WooCommerce 結帳基本設定，可以參考：WooCommerce 教學（付款、帳號）- 付款方式、帳戶操作、隱私權設定。
自訂 WooCommerce 結帳欄位安裝外掛與操作教學
第一步：進在外掛安裝介面搜尋 Checkout Field Editor 按照圖片中指示依序點選安裝與啟用。
第二步：在 WooCommerce 子選單中可以找到 Checkout Form 選項，點擊進入。
第三步：下方說明編輯結帳表單介面選項，可對照圖片：
- Name：表單欄位在函數中對應名稱，不能隨意修改，否則表單會出現錯誤。
- Label：表單欄位顯示的名稱。
- Placeholder：欄位中的提示文字。
- Validation Rules：欄位屬性規則。
- Edit：編輯欄位詳細資訊按鈕。
基本尚在修改時主要會用到的只有 2、3、5 項，除非有相關經驗，其它項目都不建議自行嘗試修改。
下圖是網站結帳表單，可以與上圖做對應位置參考。
第四步：將想要禁止的欄位勾選，在上方動作按鈕中選擇 Disable，點選 Save Changes。請注意，Remove 是將欄位直接刪除，為了避免之後如果要重新加入欄位還要再重新設定，因此不使用 Remove，使用 Disable 禁止顯示就好。
回到前台檢視網站，姓氏欄位就會被隱藏了。
第五步：留下來的名字欄位寬度只有 50% 讓整體欄位寬度沒有一致性，可以在網頁上點選右鍵檢查，找到 billing_first_name_field 這個欄位 ID。
第六步：進入外觀的自訂項目中附加 CSS 選項，將下方的樣式代碼貼上，接者點選發布，就能名字欄位改變至 100% 全寬。
第七步：如果要編輯字段欄位詳細資訊，可以點擊 Edit ，在跳出的視窗中可以編輯欄位詳細資訊，Placeholder 可以按個人需求填寫，變數項目以下說明：
- Required：決定此欄位是否為必填項目，打勾後如果沒有填寫將無法傳送表單。
- Clear Row：如果使用新的 WooCommerce 版本（3.5.7 以上）此選項不需要勾選，舊版本用於強制表單欄位換行。
- Enabled：選中會在網站前台顯示此欄位。
第八步：如果要新增其他文字欄位，可以點選 Add field ，Type 可以選擇輸入形式為文字或者選項，Name 的部分 billing_ 前綴詞不能修改，比如説要新增選項欄位，就可以輸入 billing_choice ，注意 billing_ 後面的自訂英文名稱不能與現有的欄位重複。Class 是使用 CSS 更改樣式時所需要的名稱，只能使用英文與特殊符號。下方變數設定與上一步驟相同。
第九步：另外可以使用拖拉方式改變表單欄位順序，如下圖所示。
自訂運送及訂單備註欄位
第一步：點選 Shipping Fields 可以編輯運送表單的欄位，操作方式相同。
第二步：上一步驟中編輯的表單是當顧客勾選運送到不同的地址選項後所出現的運送表單。
第三步：Additional Fields 是可以增加額外的自訂表單欄位，預設中可以設定的是訂單備註，操作方式也相同。
第四步：在較新的 WooCommerce 版本都已經自帶訂單備註欄位，如果說安裝的主題沒有顯示此欄位，才需要在上一步驟中做設定，下圖是 WooCommerce 在 Astra 主題上安裝後系統自動顯示的欄位，並非筆者設定。
修改結帳欄位前要注意什麼？
結帳欄位會影響訂單資料與後續出貨，動手前先確認以下幾點：
- 不要改 Name 欄位：這是程式辨識欄位用的名稱，改掉可能讓訂單資料存不進去或與其他外掛衝突。
- 確認金流與物流需要哪些欄位：超商取貨、電子發票等外掛常會讀取電話、地址欄位，隱藏前先查清楚。
- 先在測試環境操作：改完用不同付款與運送方式各下一筆測試訂單。
- 留意快取：結帳頁不應被頁面快取，若改了看不到變化，先清除快取再確認。
常見問題
WooCommerce 結帳頁面在哪裡設定？
結帳頁面本身是 WooCommerce 安裝時自動建立的「結帳」頁，可在 WooCommerce 設定的進階分頁指定。新版 WooCommerce 預設使用結帳區塊，舊網站則是用 woocommerce_checkout 短代碼（外面加中括號）；要修改欄位則需另外安裝欄位編輯外掛。
Checkout Field Editor 隱藏欄位後沒有效果怎麼辦？
先確認結帳頁用的是區塊版還是短代碼版。部分欄位編輯外掛只支援短代碼版結帳表單，若頁面是結帳區塊，可把頁面內容改回 woocommerce_checkout 短代碼（外面加中括號），或確認外掛說明是否已支援區塊結帳，再清除快取測試。
欄位要用 Disable 還是 Remove？
建議用 Disable。Disable 只是讓欄位不顯示，設定都還保留，日後要恢復只要重新啟用；Remove 會直接刪除欄位，要恢復就得重新建立並設定名稱與驗證規則。
結語
自訂結帳欄位在操作上其實不難，但如果說要新增欄位，對欄位變數名稱設定並不是所有 WordPress 主題都能支援此功能，有部份的主題會出現自訂欄位無法運作的狀況，如果説新增自訂欄位出現問題，可以在編輯表單頁面中點選 Reset to default fields ，讓自訂表單所有欄位回復到預設值再重新設定即可。