WooCommerce 小技巧- 2 個外掛自訂「結帳頁面」、最佳化多 ...

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

改變結帳資訊欄位順序. 原本地址 ... 跳至主要內容Notes計量分析架站筆記WP優惠折扣推薦工具ThriveThemes佈景主題Blocksy佈景主題Cloudways雲端主機BunnyNet超高C/P值CDNFacebookTwitterInstagram「WordPress架站」電子報我們的分析文章著重於如何善用外掛工具、有效達成目的、提升網頁載入速度、行銷自動化，以及各種優惠資訊，歡迎訂閱電子報唷！Iagreetoreceivenewsletterandacceptthedataprivacystatement關於WooCommerce小技巧，我們介紹了「懸浮購物車、迅速結帳」以及自訂「我的帳號」頁面。

都是嘗試在免費版WooCommerce的架構下，透過流程最佳化與UI的美化，加強顧客在購物時、管理帳號時的使用者體驗。

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

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

使用免費版Blocksy佈景主題編輯器，可以迅速建立WooCommerce線上購物商店。

利用免費版CheckoutFieldEditorforWooCommerce外掛，可以自由調整付款人、收件人資料欄位。

利用免費版FluidCheckoutforWooCommerce外掛，可以將「結帳頁面」轉化為優雅、流暢的多步驟或單一步驟結帳體驗。

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

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

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

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

編輯結帳頁面外掛啟用後，接著到WordPress後台的WooCommerce並點擊進入CheckoutForm。

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

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

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

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

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

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

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

移除(停用)欄位點擊「Remove」按鈕可以移除欄位、「Disable」按鈕可以停用欄位。

建議大家使用「Disable」即可，保留欄位資料未來在設定類似欄位時還可以做為參考。

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

當然，這外掛也有個貼心的地方，怕大家修改到忘我，忘了原本(正確)的設定是什麼。

如果想要將所有欄位設定恢復為最初預設的設定時，可以按下「Resettodefaultfields」按鈕即可恢復為初始設定狀態。

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

利用CSS修改姓、名欄位順序WooCommerce「結帳頁面」中預設的姓、名順序是先名(FirstName)再姓(LastName)，並不符合台灣人的習慣。

我們可以透過CodeSnippets工具 WPCodeBox 加入下述CSS代碼，指定「姓」在左、「名」在右。

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

@media(min-width:690px){ .form-row-last{ float:left; } .form-row-first{ float:right; } }並使用WPCodeBox 的ConditionBuilder設定為只在「結帳頁面」執行這段程式碼片段。

以上介紹的都是在WooCommerce預設的架構上進行的調整，實務上姓名欄位還有許多不同的調整方式：只保留「姓」或「名」，另一個隱藏。

保留的欄位名稱改為「姓名」、「名字」或「收件人」，讓顧客填入全名。

只保留「姓」，寫程式碼將「姓+名」更新在「姓」的欄位中。

而這些都會改變姓名欄位中儲存資料的邏輯方式，所以我個人是比較不偏好這種處理方式。

其中第二點也涉及較為複雜一些的PHP程式碼修改。

結帳頁面欄位–修改前(左)vs修改後(右)修改之後看起來是不是順眼很多了呢？輸入結帳資料時讓顧客先聚焦在個人資訊上，然後再填寫付款人的地址資訊。

如果收件人的地址不同時，再填寫另一組收件人的連絡資訊。

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

這個外掛的開發團隊不大，但是設計、功能、整合等各方面品質都很優秀，目前正在初期發展階段FluidCheckout的核心功能開發大致上完成，已經可以提供：多步驟結帳流程單一步驟結帳流程等主打功能，並在結帳過程中提供許多最佳化的功能考量。

WordPress官方外掛頁面– FluidCheckoutforWooCommerce。

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

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

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

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

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

此外，其他最佳化功能還包含：預設收合所有「選填」欄位。

預設收合「公寓、套房、單元等(選填)」欄位。

將「輸入折價碼」的欄位移至結帳流程的步驟中。

選擇是否隱藏「AdditionalNote訂單備註」欄位。

添加禮物選項，可填寫送禮的備註或包裹清單。

添加小工具區塊在結帳頁面中。

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

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

FluidCheckout外掛對於結帳流程的規劃方式是引導客戶先完成收件人資訊，接著處理付款的相關細節。

而這確實也讓整體流程變得較為順暢。

(WooCommerce的預設順序是：付款資訊>收件人資訊>結帳方式>結帳)步驟1–輸入電子郵件或直接登入帳號幾乎所有線上購物商店的聯絡方式或帳號建立的方式都是以電子郵件為主，因此第一步就是先輸入電子郵件。

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

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

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

步驟4–選擇付款方式、下單購買最後就是選擇付款方式並完成購買了。

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

其他功能值得特別一提的是，(電腦版)在右邊的OrderSummary(您的訂單)區塊中可以看到EditCart功能。

這是方便顧客到了結帳頁面之後，還想要修改訂單的時候使用，而WooCommerce的預設功能中結帳頁面是無法直接回到購物車或是修改訂單的。

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

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

關於FluidCheckout更多的說明我們後續會有專門的文章介紹，敬請期待唷！結語看了以上的介紹，是不是對做出能提升顧客體驗的「結帳頁面」更有信心了呢？綜合以上的說明，我們知道了：使用免費版Blocksy佈景主題編輯器，可以迅速建立WooCommerce線上購物商店。

利用免費版CheckoutFieldEditorforWooCommerce外掛，可以自由調整付款人、收件人資料欄位。

利用免費版FluidCheckoutforWooCommerce外掛，可以將「結帳頁面」轉化成優雅、流暢的多步驟或單一步驟結帳體驗。

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

如果有什麼心得、想法或建議，也歡迎大家留言一起討論唷！BlocksyPro使用優惠碼「QNSAVE10」獲得10%的折扣！前往購買上一文章Cloudways–如何設定子網域&子網域的4種應用情境下一文章Blocksy–使用超輕量佈景主題編輯器快速建立網站2則留言版主好，請問fluid每個欄位的英文標題能不能修改？（改中文）HiTake,FluidCheck外掛每個區塊的標題沒辦法用CheckoutFieldEditor外掛修改，只能透過翻譯外掛或WordPress.org本地化的方式改為中文。

FluidCheck官方建議可以使用LocoTranslate外掛，方便翻譯為適合自己的語言與用法。

關於WordPress.org本地化的部分，我之前翻譯進行到一半但因為其他事情耽擱了，後續有時間會繼續把剩下的部分完成，完成後也會跟你說一聲🙂如果有任何問題也歡迎提問唷~~發佈留言取消回覆名稱 *電子郵件 * 訂閱電子報|Yes,addmetoyourmailinglist新增留言在瀏覽器儲存我的名字,電子郵件和網站以備下次留言時使用.發佈留言TableofContentsCheckoutFieldEditorforWooCommerce安裝外掛編輯結帳頁面利用CSS修改姓、名欄位順序結帳頁面欄位-修改前(左)vs修改後(右)FluidCheckoutforWooCommerce安裝外掛簡單設定多步驟結帳流程單一步驟結帳流程其他功能結語Categories架站筆記程式設計計量分析金融商品設計關於生活關於風險顧問秘辛相關文章無痛架站–Self-HostGoogleFonts提升網頁速度，改善GoogleCoreWebVitals分數2021-03-26HockeyStack2021絕佳的分析工具，讓你從不同角度分析網站流量2021-04-24Cloudways–按步驟輕鬆完成主機試用、租購與基本設定2020-12-17BunnyNetCDN免費額度!來玩PrestoPlayer囉!2021-02-27WordPress超輕量圖片Lightbox特效外掛–完美取代FooBox2021-08-22ShortPixel–圖片壓縮效率最高的WordPress縮圖工具2021-01-07