WooCommerce 小技巧 – 2 個外掛自訂「結帳頁面」、最佳化多步驟結帳流程

關於 WooCommerce 小技巧，我們介紹了「懸浮購物車、迅速結帳」以及自訂「我的帳號」頁面。都是嘗試在免費版 WooCommerce 的架構下，透過流程最佳化與 UI 的美化，加強顧客在購物時、管理帳號時的使用者體驗。

接著我們來看看「結帳頁面」，這是顧客在購買商品、完成交易前的最後一步，縱使商品頁面、商店頁面、購物車介面流程做的再精美，往往都會因為「結帳頁面」的不直覺、不貼心導致訂單無法成立、功虧一簣。

這篇文章是以這段時間研究如何自訂 WooCommerce「結帳頁面」，調整、美化結帳流程與使用者體驗，讓顧客能夠更順暢的輸入購買資訊並完成訂單，而不囿限於 WooCommerce 原本缺乏直覺、不具備良好使用者體驗的結帳流程，並提供最佳化多步驟、單一步驟結帳流程體驗的解決方案。

• 使用免費版 Blocksy 佈景主題編輯器，可以迅速建立 WooCommerce 線上購物商店。
• 利用免費版 Checkout Field Editor for WooCommerce 外掛，可以自由調整付款人、收件人資料欄位。
• 利用免費版 Fluid Checkout for WooCommerce 外掛，可以將「結帳頁面」轉化為優雅、流暢的多步驟或單一步驟結帳體驗。

關於如何安裝、使用 Blocksy 佈景主題編輯器，可以參考前面提到的兩篇文章中的步驟說明。

延伸閱讀：
「WooCommerce 小技巧 – 2 種方式做出懸浮購物車、迅速結帳」
「WooCommerce 小技巧 – 自訂「我的帳號」頁面、善用區塊編輯器」

Checkout Field Editor for WooCommerce

WordPress 官方外掛頁面 – Checkout Field Editor (Checkout Manager) for WooCommerce。

安裝外掛

到 WordPress 後台外掛 > 安裝外掛搜尋「Checkout Field Editor」。

點擊「立即安裝」，並「啟用」外掛。

編輯結帳頁面

外掛啟用後，接著到 WordPress 後台的 WooCommerce 並點擊進入 Checkout Form。

Checkout Field Editor 外掛的主要功能就是讓使用者可以自訂「結帳頁面」中付款人、收件人資料的相關欄位。

其中，付款人與收件人的預設欄位內容在 WooCommerce 的設定下是相同的，我們可以根據實際需求逐欄位修改顯示標籤與排序。

改變結帳資訊欄位順序

原本地址的排序上先顯示街道地址 > 鄉鎮市 > 縣 / 市，之後才是郵遞區號，可以改為按照郵遞區號 > 縣 / 市 > 鄉鎮市 / 區，最後才是街道地址的方式排序。

可以透過每一行最前面的「三條橫線」圖示，用滑鼠左鍵按住後拖放到想要的順序位置上。

編輯欄位

大多時候是不需要「公司名稱」的，預設欄位中也沒有「收件人電話」，這些都可以透過外掛移除、停用、新增欄位。

新增欄位

點擊 Checkout Fields 頁籤畫面中的「+ Add field」按鈕之後即可新增欄位，編輯欄位的屬性、名稱、標籤、校驗規則、是否為必填欄位等。

修改欄位

點擊 Checkout Fields 頁籤畫面中每一個欄位最右邊的「Edit」按鈕之後即可修改欄位的設定，通常是修改顯示名稱。

移除 (停用) 欄位

點擊「Remove」按鈕可以移除欄位、「Disable」按鈕可以停用欄位。建議大家使用「Disable」即可，保留欄位資料未來在設定類似欄位時還可以做為參考。

別忘了設定完要按「Save changes」將修改後的狀態儲存下來唷。

當然，這外掛也有個貼心的地方，怕大家修改到忘我，忘了原本 (正確) 的設定是什麼。如果想要將所有欄位設定恢復為最初預設的設定時，可以按下「Reset to default fields」按鈕即可恢復為初始設定狀態。

註：恢復為初始設定狀態後所有新增的欄位也會不見唷，請小心使用。

利用 CSS 修改姓、名欄位順序

WooCommerce「結帳頁面」中預設的姓、名順序是先名 (First Name) 再姓 (Last Name)，並不符合台灣人的習慣。我們可以透過 Code Snippets 工具 WPCodeBox 加入下述 CSS 代碼，指定「姓」在左、「名」在右。

為避免在行動裝置上的欄位顯示錯置，姓、名欄位順序修改只針對電腦與平板。

@media (min-width: 690px) {
    .form-row-last {
        float: left;
    }

    .form-row-first {
        float: right;
    }
}

並使用 WPCodeBox 的 Condition Builder 設定為只在「結帳頁面」執行這段程式碼片段。

以上介紹的都是在 WooCommerce 預設的架構上進行的調整，實務上姓名欄位還有許多不同的調整方式：

1. 只保留「姓」或「名」，另一個隱藏。保留的欄位名稱改為「姓名」、「名字」或「收件人」，讓顧客填入全名。
2. 只保留「姓」，寫程式碼將「姓+名」更新在「姓」的欄位中。

而這些都會改變姓名欄位中儲存資料的邏輯方式，所以我個人是比較不偏好這種處理方式。其中第二點也涉及較為複雜一些的 PHP 程式碼修改。

結帳頁面欄位 – 修改前 (左) vs 修改後 (右)

修改之後看起來是不是順眼很多了呢？

輸入結帳資料時讓顧客先聚焦在個人資訊上，然後再填寫付款人的地址資訊。如果收件人的地址不同時，再填寫另一組收件人的連絡資訊。

Fluid Checkout for WooCommerce

接下來要跟大家介紹的外掛是前陣子碰巧知道的 (運氣真是不錯)。

這個外掛的開發團隊不大，但是設計、功能、整合等各方面品質都很優秀，目前正在初期發展階段 Fluid Checkout 的核心功能開發大致上完成，已經可以提供：

• 多步驟結帳流程
• 單一步驟結帳流程

等主打功能，並在結帳過程中提供許多最佳化的功能考量。

WordPress 官方外掛頁面 – Fluid Checkout for WooCommerce。

安裝外掛

到 WordPress 後台外掛 > 安裝外掛搜尋「Fluid Checkout」。

點擊「立即安裝」，並「啟用」外掛。

簡單設定

接著，從後台的 WooCommerce 選單，進到設定頁面就可以看到新增了一個 Fluid Checkout 頁籤。

設定中最顯眼的就是主打功能，「多步驟結帳流程」以及「單一步驟結帳流程」了。

除此之外，還可以選擇使用 Fluid Checkout 自訂的 header 與 footer，進一步簡化結帳頁面、減少令顧客分心的元素。

此外，其他最佳化功能還包含：

• 預設收合所有「選填」欄位。
• 預設收合「公寓、套房、單元等(選填)」欄位。
• 將「輸入折價碼」的欄位移至結帳流程的步驟中。
• 選擇是否隱藏「Additional Note 訂單備註」欄位。
• 添加禮物選項，可填寫送禮的備註或包裹清單。
• 添加小工具區塊在結帳頁面中。

多步驟結帳流程

多步驟流程的概念在於引導顧客一步一步地完成，提供結帳所需的各種資料，讓客戶在過程中可以明確的知道自己所處的階段在哪。

當然，實務上這部分的討論並沒有定論，因為不同的族群喜歡或能接受的流程不見得相同，最重要的還是在品牌定位、目標族群研究與鎖定的時候，清楚的理解自己的品牌、商店的顧客族群的喜好，再以這為基礎找到適合的功能、外掛來調整自己的線上購物商店。

Fluid Checkout 外掛對於結帳流程的規劃方式是引導客戶先完成收件人資訊，接著處理付款的相關細節。而這確實也讓整體流程變得較為順暢。

(WooCommerce 的預設順序是：付款資訊 > 收件人資訊 > 結帳方式 > 結帳)

步驟 1 – 輸入電子郵件或直接登入帳號

幾乎所有線上購物商店的聯絡方式或帳號建立的方式都是以電子郵件為主，因此第一步就是先輸入電子郵件。

如果已經有帳號，可以在結帳頁面直接登入帳號，不會被系統跳轉至其他頁面。

步驟 2 – 輸入收件人資訊

在這個步驟中完成所有收件人、送貨的相關資訊。

步驟 3 – 輸入連絡電話

接著輸入連絡電話，並確認付款人資訊是否與收件人一致。

步驟 4 – 選擇付款方式、下單購買

最後就是選擇付款方式並完成購買了。

單一步驟結帳流程

承襲相同的設計理念，在單一步驟設定中我們可以看到填寫資料的順序跟多步驟是一樣的，改為單一步驟可以讓習慣快速輸入資料、完成結帳的顧客能更直覺、迅速的完成購買。

其他功能

值得特別一提的是，(電腦版) 在右邊的 Order Summary (您的訂單) 區塊中可以看到 Edit Cart 功能。這是方便顧客到了結帳頁面之後，還想要修改訂單的時候使用，而 WooCommerce 的預設功能中結帳頁面是無法直接回到購物車或是修改訂單的。

而手機版的顯示方式就更為優雅了，在螢幕的最上方會有浮動購物車讓大家可以快速查看 Order Summary (您的訂單) 並且能夠前往購物車修改訂單。

Fluid Checkout 外掛還有很多值得一提的好功能，而這次主要跟大家說明的就是他的多步驟、單一步驟結帳流程了。

關於 Fluid Checkout 更多的說明我們後續會有專門的文章介紹，敬請期待唷！

結語

看了以上的介紹，是不是對做出能提升顧客體驗的「結帳頁面」更有信心了呢？

綜合以上的說明，我們知道了：

• 使用免費版 Blocksy 佈景主題編輯器，可以迅速建立 WooCommerce 線上購物商店。
• 利用免費版 Checkout Field Editor for WooCommerce 外掛，可以自由調整付款人、收件人資料欄位。
• 利用免費版 Fluid Checkout for WooCommerce 外掛，可以將「結帳頁面」轉化成優雅、流暢的多步驟或單一步驟結帳體驗。

希望這些對大家在架設 WooCommerce 網路商店時能幫得上忙。

如果有什麼心得、想法或建議，也歡迎大家留言一起討論唷！