WooCommerce 結帳欄位怎麼自訂?用 Checkout Field Editor 新增、隱藏、排序全攻略

結帳頁面是整個購物流程的最後一道關卡,但預設的 WooCommerce 結帳表單往往無法滿足所有業務需求。販售客製化禮品的網路商店,需要讓顧客填寫祝賀詞;服務企業客戶的 B2B 商城,必須收集統一編號以便開立發票;生鮮食品業者則非得讓顧客選擇到貨日不可。這些需求靠原生欄位根本達不到,只能靠外掛擴充。

結帳欄位編輯器(Checkout Field Editor)是目前最直觀的解決方案之一,無需撰寫任何程式碼,即可在 WooCommerce 後台視覺化地新增、隱藏或重新排序結帳欄位。以下以這款外掛為主軸,帶你完整走過設定流程,並說明幾個常見的實際應用情境。

安裝與啟用外掛

進入 WordPress 後台,依序點選「外掛 → 安裝外掛」,搜尋「Checkout Field Editor」,找到 ThemeHigh 所開發的版本後安裝並啟用。免費版已足以應付新增自訂欄位、隱藏預設欄位等核心需求;若需要條件顯示邏輯(依商品類別或購物車金額決定是否顯示欄位),則需升級至付費版。

啟用後,後台選單的「WooCommerce」底下會多出一個「Checkout Form」選項,點進去即可看到三個分頁標籤,分別對應帳單資訊(Billing)、寄送資訊(Shipping),以及額外欄位(Additional)。

後台介面的三個區塊

帳單資訊區塊

帳單區塊內含 WooCommerce 原生的姓名、地址、電話、電子郵件等欄位,每個欄位旁邊都有一組開關,可以切換「啟用」與「必填」狀態。對台灣電商而言,預設欄位裡的「公司名稱」和「地址第二行」通常用不到,直接關閉啟用開關即可,結帳頁面便不會顯示。

寄送資訊區塊

寄送資訊與帳單資訊的欄位類型大致相同,差異在於寄送地址預設有一個「與帳單地址相同」的勾選框。若商店只送達台灣本島,且帳單資訊已收集完整地址,可以考慮將寄送區塊的部分欄位設為非必填,降低顧客的填寫負擔。

額外欄位區塊

這是最適合放置自訂資訊的位置。額外欄位預設為空,由站長自行決定新增哪些欄位。收集備註、統一編號、指定到貨日這類需求,都可以在這裡設定,不影響帳單或寄送地址的既有結構。

新增自訂欄位的操作流程

以新增「統一編號」欄位為例,說明完整操作步驟。

選擇欄位類型

切換至「Billing」分頁後,點擊右下角的「Add Field」按鈕。彈出的設定面板會先要求選擇欄位類型,可選項目包括文字輸入(Text)、電子郵件(Email)、電話(Tel)、密碼(Password)、文字區塊(Textarea)、選單(Select)、多選框(Multiselect)、核取方塊(Checkbox)、日期選擇器(Datepicker)等。統一編號是純文字輸入,選「Text」即可。

填寫欄位屬性

選完類型後,進入屬性設定頁面,需要填寫以下項目:

  • Field Name:欄位的識別碼,只接受英文與底線,例如 billing_tax_id。這個值會存入資料庫,日後若要透過程式碼存取,就需要用到這個識別碼。
  • Label:顯示在結帳頁面上給顧客看的名稱,填「統一編號」即可。
  • Placeholder:輸入框的提示文字,可填「例如:12345678」,引導顧客輸入正確格式。
  • Required:若統一編號為必填,勾選此項;若只在企業客戶下單時才需要,可先不勾,後續配合條件顯示功能處理。
  • Enable:確保此開關為啟用狀態,否則欄位不會出現在前台。

填寫完成後點「Save」,返回欄位列表,新欄位會出現在清單底部。

調整顯示位置

欄位的排列順序直接影響顧客的填寫體驗。在欄位列表中,每一筆欄位左側都有一個拖曳把手(六個點的圖示),長按後即可上下拖動,調整至目標位置。統一編號通常放在公司名稱欄位的正下方,視覺上形成一個企業資訊的小群組,邏輯較為清晰。調整完畢後記得點頁面底部的「Save Changes」,否則順序不會儲存。

常見應用情境

收集顧客備註

顧客備註欄位其實 WooCommerce 原生就有,藏在「Additional」分頁裡,預設標籤是「Order notes」。若想改成更符合台灣語境的名稱,或調整 Placeholder 文字,直接在額外欄位區塊點擊該欄位的設定圖示,修改 Label 和 Placeholder 即可,不需要另外新增備註欄位。

真正需要自行新增的情況,是業務需要收集「不同於訂單備註」的結構化資訊,例如禮品附卡的祝賀詞、指定的包裝方式。這類資訊若混在通用備註裡,後台處理訂單時容易疏漏,分開建立欄位較為妥當。

設定到貨日選擇器

選擇到貨日需要用到日期選擇器(Datepicker)欄位類型。在「Additional」分頁新增欄位時選擇 Datepicker,免費版提供基本的日期選取功能;若需要排除特定日期(如週日不配送)或限制可選範圍(如最快三天後才能到貨),則需要付費版的進階日期設定。

Label 建議填「指定到貨日(可留空由系統安排)」,讓不需要指定日期的顧客知道此欄非強制,有助於降低結帳摩擦。

隱藏不需要的預設欄位

台灣電商最常隱藏的預設欄位,通常是帳單區塊的「Address Line 2(地址第二行)」與「Company(公司名稱)」,以及寄送區塊對應的幾個欄位。操作方式相當直觀,找到欄位後將「Enable」開關切為關閉狀態並儲存即可。欄位不會被刪除,只是不顯示在前台,日後若需要重新啟用也很方便。

值得留意的是,部分欄位在 WooCommerce 的訂單處理邏輯中有特殊用途,例如「Billing Email」和「Billing First Name」不允許隱藏,外掛層面已做了限制,避免站長誤操作導致訂單資料不完整。

欄位資料在後台的呈現

自訂欄位儲存後,每筆訂單的後台詳情頁面會在「帳單資訊」或「寄送資訊」區塊中顯示對應的資料。以統一編號為例,顧客結帳時填入的值會出現在訂單明細裡,方便客服或財務人員直接在後台查閱,無需另外匯出報表。

若日後需要將這些資料串接至第三方系統,欄位識別碼(Field Name 的值)就是對接的關鍵。建議在建立欄位時就採用語意清晰的命名,例如 billing_tax_id 而非 custom_field_01,後續維護時可節省不少時間。

相關文章
標籤: Checkout Field Editor, 結帳欄位, WooCommerce 外掛, 統一編號, 到貨日