WooCommerce結帳欄位流程優化，簡化流程才能提高銷售率

文章最後更新日期 2020 年 8 月 25 日

歡迎來到 WooCommerce教學系列，這篇的教學中要來教您如何修改 WooCommerce結帳欄位，優化你的電商網站購物流程

WooCommerce 是 WordPress 常做為購物車網站使用的外掛，在預設的結帳流程中，需要客戶填寫的欄位就高達10個， 在現今講求速度的時代， 通常客戶購買到結帳的這個步驟時，若是看到有一堆的欄位要填寫的話才能完成購買的話 ，我想大部份人看到這個可能就謝謝再聯絡了， 所以電商網站購買流程更是需要簡化再簡化，方便客戶下單購買才是我們網站所要思考的重點

外掛名稱：Checkout Field Editor(免費)

一、安裝woocommerce結帳流程欄位外掛

首先我們先到安裝外掛的地方，搜尋 Checkout Field Editor ，接著安裝並啟用外掛

二、結帳欄位設定

2-1、修改預設結帳欄位

step 2

在WooCommerce 結帳流程中，共會有 3個表單，分別是

1. Billing Fields ：帳單資訊(預設結帳欄位)
2. Shipping Fields：運送資訊 (運到不同地方)
3. Additional Fields ：其他備註

所以我們要針對這三個結帳表單來做個別設定，讓我們先來看一下原本 WooCommerce結帳表單欄位

原本的結帳欄位非常的多，也分的非常的細，所以接下來我們要開始改造這部份

接著對應到Checout field editor 外掛的結帳欄位

step 3

Billing Fields

因為預設的好幾個欄位都是 「必填欄位」，若是沒有取消的話，在結帳時一定會出現錯誤，導致無法結帳

先點選要欄位資料的 「Edit」按鈕之後，再到跳出的視窗中，取消「必填欄位」，並且取 「Enable」(啟用)

將所有不需要的欄位都 「Require」取消必填及「Enable」啟用之後，看到的畫面就會像是下方圖片

在這裡站長只保留地址、電話、Email 這三個欄位

step 4

Shipping Fields

接著修改「運送資訊」欄位，這是結帳欄位中「運送到不同的地址?」的功能，如果客戶要寄到不同地方，要收貨的地址

這裡也要記得將 require必填欄位 取消掉，不然結帳還是會出現錯誤唷

step 5

Additional Fields

如果有需要備改Additional Fields備註欄位的內容，也可以在這裡新增修改

step 6

儲存後，回到前台確認一下，原本 多達10個的結帳欄位，已經被修改為3個，在結帳時是不是方便些

2-2、新增結帳欄位

若你的電商網站比較特殊，或是想要取得客戶更多特定的個人資料，就可以使用新增欄位的方式來達成

step 1

點選 「Add field」按鈕

step 2

接著輸入欄位資訊，這裡一般常使用到 Type(欄位類型) 、Name(欄位名稱)、Label(欄位標題)、Placeholder(提示訊息)，再來設定這個欄位是否必填，再按下Save按鈕就可以囉

三、結論

一個轉換率高的電商網站，是經過不斷的 A/B測試，不斷的優化網站動線，簡化網站結帳流程，如何讓客戶有效的購買，是一個電商網站需要思考的問題

---