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

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

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

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

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

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

WooCommerce 自訂結帳表單

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 自訂結帳表單:前台帳單資訊顯示
前台帳單資訊顯示

如果你想把 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 預設有提供多種 金物流方式,如果要比較符合台灣的使用習慣,可參考 綠界金物流串接


聯絡犬哥網站

在網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 2 個實用資源,可有效幫助大家解決問題。

資源一:犬哥網站(專業 WordPress 網頁設計&SEO 行銷公司)

如果你沒時間自己架站,或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站(WordPress 網頁設計&SEO 行銷公司),請專家協助你會更容易!

我們有多年網頁設計、SEO 網站排名經驗,加上上百個高質感作品、SEO 實戰案例,絕對能滿足您的需求!

犬哥網站|台北網頁設計&SEO 行銷公司
犬哥網站|台北網頁設計&SEO 行銷公司

資源二:WordPress 高手架站課+SEO 排名飆升課(線上課程)

如果想學習更深入的 WordPress 架站技巧,或是想透過 SEO 關鍵字提升網站流量?

可以參考犬哥近期推出的這兩門課程,課程非常的扎實,都是犬哥自己實戰出來的經驗分享,不打高空只教你做出成績!

WordPress 高手架站課&SEO 排名飆升課
WordPress 高手架站課&SEO 排名飆升課
  • WordPress 高手架站課
    從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等豐富內容,一次教會你。
    課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!
  • SEO 排名飆升課
    教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等,大幅提升行銷能力。
    帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

返回頂端