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

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

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

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

這篇文章,我會分享 Checkout Field Editor 這款外掛,讓它幫助我們達到目標:)


1. Checkout Field Editor 是什麼?

Woocommerce 自訂結帳表單:Checkout Field Editor 外掛教學
Checkout Field Editor 外掛教學

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

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

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

  • 可設定欄位資料,是否顯示在 Email 或是訂單詳情頁面。
  • 刪除多餘的結帳欄位。
  • 啟用 / 禁用結帳欄位。
  • 更改結帳欄位順序。
  • 結帳欄位恢復為預設值。
Woocommerce 自訂結帳表單:Checkout Field Editor 外掛教學
Woocommerce 自訂結帳表單:Checkout Field Editor 外掛教學

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

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


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

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

Woocommerce 自訂結帳表單:安裝啟用 Checkout Field Editor
安裝啟用 Checkout Field Editor

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

有關 WooCommerce 結帳欄位,主要有分為 Billing Fields(帳單區塊)Shipping Fields(運送欄位)Additional Fields(附加欄位),這幾個區塊。

Woocommerce 自訂結帳表單:多個可設定的欄位
多個可設定的欄位

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

Woocommerce 自訂結帳表單:網站前台的結帳欄位(僅部分截圖)
網站前台的結帳欄位(僅部分截圖)

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


3. Billing Fields 帳單欄位

禁用多餘的欄位

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

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

Woocommerce 自訂結帳表單:選擇多餘的欄位,然後禁用
選擇多餘的欄位,然後禁用

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

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

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

拖曳排序欄位

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

Woocommerce 自訂結帳表單:欄位排序
Woocommerce 自訂結帳表單:欄位排序

編輯結帳欄位

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

Woocommerce 自訂結帳表單:編輯欄位
編輯欄位

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

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

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

Woocommerce 自訂結帳表單:編輯欄位
編輯欄位
  • 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 (運送 & 附加欄位)同樣能進行修改,操作方式跟上一章介紹的差不多,只是在前台顯示的位置不同。

Shipping & Additional Fields(運送 & 附加欄位)
Shipping & Additional Fields(運送 & 附加欄位)

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

Shipping & Additional Fields (運送 & 附加欄位),前台顯示
Shipping & Additional Fields (運送 & 附加欄位),前台顯示

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

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

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

Woocommerce 自訂結帳表單:訂單顯示狀態
訂單顯示狀態

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

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


常見問題

Checkout Field Editor 外掛是什麼?


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

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

Checkout Field Editor 有提供免費版嗎?


有的,基本上免費版就能完成大多數需求,如果有更進階的要求,再參考進階版即可。

如何啟用 WooCommerce 金流&物流功能呢?


WooCommerce 預設有提供多種 金物流方式,如果要比較符合台灣的使用習慣,可參考 綠界金物流串接


WordPress 學習資源

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

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

如果你是看我的架站教學,而順利成功架站的,歡迎把作品提交至 WordPress 作品發表會(目前正在大量募集新作品),能幫助你的網站,有更多的曝光機會。

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能配上 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 小犬網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

小犬網站:wordpress教學社團
小犬網站:wordpress教學社團

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top