WooCommerce 自訂結帳表單：使用 Checkout Field Editor 客製化欄位

當 架設購物網站，常會遇到結帳表單需客製化設計的需求。

因為 WooCommerce 預設的表單欄位，會有些可能用不到的欄位需要隱藏，或是你的電商網站有特別的結帳欄位需求，都能使用 Checkout Field Editor 客製化結帳表單。更多 WooCommerce 教學。

這篇文章，我會分享 Checkout Field Editor 這款外掛，讓它幫助我們達到目標：）

• 1. Checkout Field Editor 是什麼？
• 2. Checkout Field Editor 安裝＋基本設定
• 3. Billing Fields 帳單欄位
• 4. Shipping ＆ Additional Fields（運送 ＆ 附加欄位）
• 常見問題
• WordPress 學習資源

使用 Checkout Field Editor 客製化結帳表單

---

1. Checkout Field Editor 是什麼？

Checkout Field Editor 是一款能自訂 WooCommerce 結帳頁面欄位的實用外掛，能輕鬆的新增、編輯、刪除、更改顯示順序，幫助站長優化下單流程。

Checkout Field Editor 與大多數 WooCommerce 生態圈有良好相容，而它的開發商 ThemeHigh 也是有名 WooCommerce 週邊外掛開發商，確保良好的軟體品質。

下面列出幾個 Checkout Field Editor 免費版的功能。

• 可設定欄位資料，是否顯示在 Email 或是訂單詳情頁面。
• 刪除多餘的結帳欄位。
• 啟用 / 禁用結帳欄位。
• 更改結帳欄位順序。
• 結帳欄位恢復為預設值。

至於進階版功能，有提供更多欄位類型、邏輯式欄位顯示、根據欄位選擇，向購物車總價添加額外費用、可在更多不同位置顯示表單等 ..。

這裡先不探討進階版功能，下面教學主要對 Checkout Field Editor 免費版，進行使用分享，那我們就開始吧：）

---

2. Checkout Field Editor 安裝＋基本設定

首先，前往 WordPress 外掛 > 安裝外掛，搜尋 Checkout Field Editor，然後進行安裝＋啟用。

接著，前往 WooCommerce > Checkout Form，就能進行結帳欄位的編輯囉。

有關 WooCommerce 結帳欄位，主要有分為 Billing Fields（帳單區塊）、Shipping Fields（運送欄位）、Additional Fields（附加欄位），這幾個區塊。

分別對應網站前台，會看到相關的欄位。

下面就來教大家如何操作囉！

---

3. Billing Fields 帳單欄位

禁用多餘的欄位

首先，我們可把多餘的欄位打勾，然後點 Disable 停用，再點 Save changes 進行儲存。

以下圖來說，我是把姓氏、公司名稱、住址2、鄉鎮市等 .. 欄位給停用，實際可依自己需求調整。

備註：Remove 按鈕是將此欄位移除，會建議先以 Disable（停用）為優先，免得之後要用還需要再建立。

但如果確認欄位之後都用不到了，就可點 Remove 直接移除。

這時如果查看一下前台結帳頁面，可能會看到「 名字 」欄位只顯示一半，下面會教大家怎麼變成全寬。

拖曳排序欄位

多餘的欄位禁用後，可將欄位用拖曳進行排序，然後點 Save changes 儲存。

編輯結帳欄位

在「 名字 」欄位，點選 Edit 編輯。

可設定欄位名稱、文字佔位符、預設文字、Class 樣式、驗證規則等 ..（下面有相關說明）。

Required 是否必填、Enabled 是否開啟、Display in Emails 是否顯示在信件中、Display in Order Detail Pages 是否顯示在訂單明細中，可依自己需求設定。

完成後，點 Save & Close 進行儲存即可。

• Type 欄位類型：有 Text 文字、Password 密碼、Email 信箱、Select 選擇框、Textarea 文字框、Radio 單選鈕等可選，但因為目前是在「 編輯 」狀態所以不能切換，在「 新增 」狀態可以更換。
• Name 欄位代碼：給系統看的欄位 ID，需確保跟其他欄位 ID 沒有重複，要是唯一值。至於命名方式，須保留 billing_ 開頭，可取名像是 billing_demo 等 ..（demo 改為自己想取的）。
• Label 欄位名字：欄位名稱。
• Placeholder 文字站位符：欄位內的文字站位符。
• Default Value 預設文字：預設文字。
• Class 樣式類名：有 3 種顯示類型，分別是 form-row-wide 全寬、form-row-first 前半段、form-row-last 後半段。
• Validation 驗證方式：選擇哪種類型的驗證方式。

新增結帳欄位

如果想自行新增欄位，可點選左上角的 Add Field 新增欄位，至於面板功能就跟「 編輯 」差不多，就不多做介紹。

最後來看一下網站前台的顯示狀況，太棒了～順利修改完畢！

如果你想把 WooCommerce 預設的地址欄位（上圖），改為下拉式選單的方式讓訪客選擇，可參考 縣市欄位下拉選單。

如果想要列印出貨單，可以參考 WooCommerce 訂單匯出外掛教學。

---

4. Shipping ＆ Additional Fields（運送 ＆ 附加欄位）

Shipping ＆ Additional Fields （運送 ＆ 附加欄位）同樣能進行修改，操作方式跟上一章介紹的差不多，只是在前台顯示的位置不同。

修改完後，可看一下 WordPress 前台結帳頁面，顯示區塊差不多就在這：）

以上能依照自己需求設定欄位，至於是否讓「 運送到不同地址 」顯示，可參考  WooCommerce 金流 ＆ 物流設定 相關章節。

但如果有串接第三方金流像是綠界科技，有些外掛像是 RY Tools WooCommerce，就會強制將「 運送到不同地址 」顯示，因為才能順利跑超商取貨之類的物流功能。

最後，可以跑一次訂單流程，完成購買後到後台查看訂單。太好囉，欄位果然也被簡化了：）

有些人可能也會想問，如何客製化會員登入＆註冊表單，假如你是 Elementor 頁面編輯器的使用者，可參考 Elementor 客製化表單。

假如你不是使用 Elementor，那可安裝像是 User Registration 外掛，同樣能客製化會員登入＆註冊表單，最後搭配 條件式的選單 顯示，就能完成：）

---

常見問題

---

WordPress 學習資源

學習 WordPress 網站架設流程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！

接下來，額外分享 3 項架站資源，可有效幫助大家處理網站問題。

資源一：WP 高手架站課（線上課程）

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗，從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等 .. 豐富內容，一次教會你。

課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！

幫你增加網路曝光，提高你的線上營收！

資源二：犬哥數位（專業 WordPress 網頁設計公司）

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位（WordPress 網頁設計公司），請專家製作會更有效率！

資源三：更多犬哥教學資源

如果你在操作過程中遇到問題，可以加入 引力行銷圈 – 犬哥網站（目前有超過 9000+ 團員）。除了有網友一同幫你解惑外，犬哥團隊也會同步在社團幫助大家。

如果你想學更多網頁設計、數位行銷知識，也歡迎追蹤 犬哥網站 IG。或是喜歡看影片學習，可關注 YouTube 頻道。