透過編輯 WooCommerce Checkout 減少購物車放棄

您想了解如何編輯和優化 WooCommerce 結帳頁面嗎？這是促進銷售、提高轉換率和減少購物車放棄的最佳策略之一。雖然預設的 WooCommerce 結帳功能有效，但仍有很大的改進空間。

聽起來很有希望嗎？讓我們深入了解一下吧！

在本文中，您將發現：

• 如何編輯 WooCommerce 結帳頁面。
• 優化購物車和結帳頁面的最佳實踐和策略。
• 可協助您提高轉換率的頂級工具和外掛程式。
• 如何衡量結帳策略的成功。

了解 WooCommerce 結帳優化對購物車放棄的影響

您知道訪客為何放棄購物車嗎？大多數人表示結帳過程很慢，額外費用太高，或無法激發信任。

結帳體驗對於人們是否完成購買或放棄購物車並離開您的網站起著重要作用。使用者友善的結帳流程使客戶更容易購買，從而提高轉換率（完成購買的訪客的百分比）。

以下是一些有趣的轉換率和網站統計數據，顯示了精心設計的結帳流程對購物車放棄的影響。

要點：

• 一半的購物者可能會因為過高的運費、稅金和手續費而離開購物車。
• 如果被迫建立帳戶，近三分之一的購物者將無法完成購買。
• 如果流程太長且過於複雜，21% 的人會放棄購物車。

毫不奇怪，改善結帳流程可以直接影響轉換率。

如何編輯 WooCommerce 結帳頁面以減少購物車放棄

您可以直接從 WordPress 編輯器輕鬆編輯 WooCommerce Checkout 頁面。首先，讓我們來看看 WooCommerce Checkout 頁面的預設設計。如果您不在結帳頁面上進行任何調整，則會向您的客戶顯示以下 WooCommerce 欄位：

• 聯絡資訊
• 帳單詳情
• 名字和姓氏
• 地址（城鎮/城市、國家/地區、地區和郵遞區號/ZIP）
• 電話號碼
• 訂單備註
• 付款方式
• 隱私權政策聲明

從視覺上看，沒有多步驟的過程，只有一個相當長的頁面，其中有一些需要填寫的欄位：

讓我們只需四個簡單的步驟即可改變這一點！以下是編輯 WooCommerce Checkout 頁面的方法。

步驟 1. 在地化並開啟 WooCommerce 結帳頁面

前往頁面>所有頁面，然後點擊結帳頁面部分中的編輯按鈕。

步驟 2. 使用編輯器編輯結帳頁面

您可以從結帳頁面刪除或新增任何欄位。使用編輯器，您還可以添加一些圖像和任何其他重要資訊。

例如，您還可以使用 WooCommerce 區塊添加額外字段，例如條款和條件或訂單註釋。

最後，您可以啟用或停用某些訊息，並將其設定為「可選」或「必需」。

步驟3.編輯動態訊息

結帳頁面上的動態欄位無法使用編輯器進行編輯。您必須從WooCommerce >設定介面調整設定才能看到一些變更。

例如，如果您想編輯運送選項，則需要前往運送設定面板。這是編輯器無法完成的。

步驟 4. 觀察前端結帳頁面的變化

我們進行了一些調整來優化結帳頁面並減少購物車放棄率。以下是我們實作的一些小改進，這些改進都可以在 WooCommerce 外掛的核心版本中找到：

• 我們新增了編號步驟來引導使用者完成整個結帳流程。
• 我們設計了更短、更快的結帳體驗。
• 我們只保留必要的字段。例如，由於我們公司不提供促銷代碼，因此我們刪除了促銷代碼欄位。此外，由於我們僅針對 B2C 客戶，因此我們刪除了「公司名稱」和「增值稅號」欄位。
• 我們新增了 PayPal 作為額外的支付網關。

預設的 WooCommerce 結帳頁面。	優化的 WooCommerce 結帳頁面。

編輯 WooCommerce 結帳頁面時要避免的 6 個常見問題

如果您打算對「結帳」頁面進行更改，請記住，雖然自訂非常容易，但在此過程中您可能會意外忽略六個常見問題。以下是您需要注意的事項，以避免損害用戶體驗並失去潛在的銷售。

1.忽視行動端優化

超過三分之二的潛在客戶透過手機購物，因此不適合行動裝置的結帳頁面（例如，小型號召性用語）可能會導致沮喪和放棄。

快速破解：確保您的結帳頁面完全回應。每次進行變更時，請在行動裝置上測試頁面以查看其外觀和功能。像 BrowserStack 這樣的工具可以向您展示頁面在各種裝置上的外觀。

2. 不考慮頁面載入時間

結帳頁面載入緩慢可能會導致使用者放棄購買。因此，在使用 PageSpeed Insights 或 GTmetrix 等工具編輯頁面後，應始終檢查效能。

快速破解：避免繁重的程式碼或不必要的設計元素，這些元素會減慢頁面速度。使用簡單而強大的性能插件，如 WP Rocket！在下一節中，我們將在介紹優化結帳流程的策略時提供更多詳細資訊。

3. 沒有提供足夠的付款選項

限制付款方式可能會損害轉換率，因為客戶不願意使用他們不熟悉的付款方式進行購買。

快速破解：為了適應各種偏好，提供多種付款選項，例如信用卡、PayPal 和數位錢包。前往WooCommerce >付款並向結帳頁面添加更多付款網關。

4. 強制建立帳戶

要求用戶在完成購買之前建立帳戶會增加不必要的麻煩。

快速技巧：始終提供訪客結帳選項，以使流程更快、更輕鬆。您可以從WooCommerce >帳戶和隱私權設定啟用此功能。

5.忘記添加明確的運輸和交付政策

您的客戶希望確切地知道他們將如何以及何時收到訂單。如果沒有明確的運輸和交付政策，您的客戶可能無法完成購買。

快速技巧：為了讓使用者放心，在結帳頁面上突出顯示運費、交貨時間表和選項（例如，可以使用快遞）。

6.過度考慮結帳流程並使用舊設計

在結帳流程中添加太多欄位或步驟是讓使用者不知所措並放棄購買的最佳方式。最重要的是，舊的設計會降低對您公司的信任。然而，使用現代 WordPress 主題將對使用者體驗產生正面影響。

快速技巧：僅保留必要字段，例如姓名、地址和付款詳細資訊。避免將「生日」等非關鍵欄位設為必填欄位。

現在您已經知道關於 WooCommerce 結帳不該做什麼，請查看接下來的部分以實施優化它的最佳實踐。

自訂 WooCommerce 結帳和提高轉換率的 7 種策略

使用 WordPress 編輯器編輯 WooCommerce Checkout 頁面是提高轉換率的第一步，但選項有限。我們將為每個最佳化提供一個範例，如果某個功能在 WooCommerce 核心版本中不可用，我們將推薦其他工具來提供協助。

讓我們回顧一下您可以實施的 7 種策略，以優化 WooCommerce 結帳並提高轉換率。

1. 最大限度地提高速度和性能

如果您的 WooCommerce 網站速度很慢且結帳流程需要永遠加載，您的客戶就會離開並參加競賽。為了避免這種情況，將精力集中在頁面速度和效能上至關重要。您可以進行大量優化來確保快速購買流程，例如：

• 透過應用壓縮來減少檔案大小來優化您的產品圖像。

• 實施快取和 GZIP 壓縮。
• 優化 JavaScript 和 CSS 檔案。
• 使用快速且安全的託管提供者。
• 使用輕量級主題。

轉換率統計（資料來源：WP Rocket 頁面速度統計）

• 行動頁面載入每延遲一秒，轉換率就會下降多達 20%。
• 如果網站速度緩慢，幾乎 90% 的行動用戶會離開（資料來源：Linearity）。
• 1 秒載入的網站的電子商務轉換率比 5 秒載入的網站高 2.5 倍。

例子

想像您正在網上購物，當需要結帳時，整個過程簡單、快速且安全。所有關鍵細節（例如價格和運費）都清楚地顯示在一個螢幕上。您更有可能完成購買。

現在，想像一下相反的情況：該網站加載緩慢並且崩潰。沮喪之餘，您可能會決定放棄購物車，不買東西就離開。  

除了 WooCommerce 之外，您還需要額外的插件嗎？

儘管效能是其策略的核心，但 WooCommerce 不是效能插件，因此您需要額外的工具來讓您的網站更快。

️ 推薦插件

• WP Rocket：如上所述，它是最簡單、最強大的效能插件，啟動後可實現 80% 的最佳效能實踐，從而顯著提升您的網站速度。

讓我們來看看一些有助於提高性能和減少購物車放棄的有趣功能：

WP Rocket 在啟動時應用了 80% 的最佳實踐，包括快取、預先載入快取、關鍵影像優化、自動延遲渲染和 GZIP 壓縮。

它還優化了 JavaScript 和 CSS 檔案（這是網站速度緩慢的主要原因），這要歸功於精簡和先進且強大的功能，例如刪除未使用的 CSS、延遲載入 JS 和延遲 JS 執行。

WP Rocket 可讓您延遲載入圖片、影片、iframe 和 CSS 背景圖片。

• Imagify：它是優化產品圖像的最簡單的插件。借助智慧壓縮功能，Imagify 可以壓縮您的影像，同時保持最佳品質。您可以獲得更快的網站，同時為訪客保留高清視覺效果。

關於這兩個外掛程式的最後一個有趣的點是，它們的功能與 PageSpeed Insights 對效能和使用者體驗的建議一致，這可以提高效能和使用者體驗，並最終減少購物車放棄率。

PageSpeed Insights 是一款審查網站效能和使用者體驗的工具，提供 100 分的評分以及關鍵效能指標 (KPI)。它還強調了需要改進的領域，例如實現快取、優化圖片、最大限度地減少未使用的 CSS 或 JavaScript 以及提高程式碼效率。

透過使用Imagify和WP Rocket ，您可以直接解決這些建議，從而增加在 PageSpeed Insights 上獲得更高分數的機會。因此，您的 WooCommerce 商店的性能已顯著提高，從而帶來更好的用戶體驗，並有可能減少購物車放棄率。

例如，以下是 Imagify 和 WP Rocket 如何幫助您解決效能問題並確保您的結帳流程不慢的方法。

2. 顯示明確的運輸和交付政策

為了建立信任並管理客戶期望，您應該儘早在產品頁面上顯示明確的運輸和交付政策。當購物者預先準確了解運費、預計送貨時間以及任何其他詳細資訊時，他們更有可能在結帳頁面上完成購買。這種透明度減少了不確定性，並避免了可能導致放棄購物車的令人不快的意外情況。

轉換率統計（資料來源：Baymard）

• 如果無法預先查看或計算總訂單成本，21% 的購物者會離開您的網站並放棄購物車中的商品。

例子

想像一下，您要在線購買產品，當您到達結帳頁面時，您發現意外的高額運費或模糊的交貨時間表，例如「運輸可能需要 10-20 個工作天」。這種缺乏清晰度可能會令人沮喪，並對轉換率產生負面影響。

除了 WooCommerce 之外，您還需要額外的插件嗎？

不需要額外的插件。您可以新增運送類別並直接在 WooCommerce 管理的產品和結帳頁面上顯示資訊。

3. 提供便利的支付網關

便利的支付網關對於優化結帳流程並直接影響您的轉換率至關重要。當客戶找到自己喜歡的付款方式（例如美國的 Venmo、德國的 Klarna 或法國的 Alma）時，他們更有可能完成購買。提供各種付款選項可以使結帳體驗更加順暢，建立信任，並減少放棄購物車的機會。您讓客戶付款越容易，他們完成交易的可能性就越高。

轉換率統計（資料來源：StableWP）

• 40% 的購物者對提供多種付款方式的網路商店更有信心。
• 如果他們的首選付款方式不可用，59% 的人將不會完成交易。

例子

假設您在網上購物，但當您到達結帳頁面時，您首選的付款方式不可用——美國購物者無法使用 Venmo，想要分 4 期免費付款的法國買家則無法使用 Alma。這種便利性的缺乏可能會讓顧客感到沮喪，並迫使他們放棄結帳過程。

除了 WooCommerce 之外，您還需要額外的插件嗎？

您可以使用 WooCommerce 添加額外的支付網關，但核心外掛程式中缺少 Paypal 等線上錢包。預設情況下，WooCommerce 提供 WooPayments、直接銀行轉帳、支票付款和貨到付款。但是，您將需要另一個外掛程式來啟動 Paypal、支付寶或 Klarna 等線上錢包。

️ 推薦插件

• WooCommerce 的 Paypal 付款：它允許您將 PayPal、稍後付款、Venmo、Apple Pay、Google Pay 和 PUI（在德國流行）添加到您的結帳流程中。
• 支付寶和微信支付：它允許您接受中國購物者的付款。支付寶和微信支付是中國最受歡迎的支付網關。

4.僅保留必要欄位並使用自動填充

當結帳過程需要太多欄位時，客戶可能會因為「懶惰」或沮喪而放棄購物車。包含帳戶建立、生日或多個地址欄位等不必要的詳細資訊的冗長表單可能會在視覺上阻礙購物者（尤其是在行動裝置上），使他們在完成購買之前離開。

對於購物車，透過顯示必要欄位來優化體驗：

• 清楚展示商品數量、尺寸、顏色以及清晰的商品圖片。
• 允許輕鬆修改，例如更改大小或顏色或刪除項目。
• 顯示交易的總成本並提供清晰的明細：增值稅、手續費或任何其他額外費用。
• 明確強調您的運輸和交付政策，例如 24 小時交付，以設定期望並建立信心。

例子

想像一下，您已經找到了一款完美的手提包：您已經選擇了顏色、尺寸，而且價格也恰到好處。但當您登陸帶有 15 個必填欄位需要填寫的結帳頁面時，您很快就會失去動力並離開。這會影響轉換率。

轉換率統計（資料來源：Baymard）

研究表明，表單欄位較少的網站更有可能提高網站結帳率。

除了 WooCommerce 之外，您還需要額外的插件嗎？

使用 WooCommerce，您可以直接從 WordPress 編輯器啟用或停用各個欄位。但是，對於具有現代且使用者友好設計的完全自訂表單，您需要一個專用外掛程式或提供 WooCommerce 範本的主題。

推薦工具：

• WooCommerce 的 Google 自動填充客戶地址：它允許用戶快速輸入他們的個人詳細信息，並使用 Google 的 API 節省時間和精力。
• WooCommerce 的自訂欄位：它允許您建立無限的欄位並在註冊、結帳和我的帳戶頁面中顯示它們。
• CartFlows：它是使用您選擇的欄位和設計來建立自訂、最佳化的結帳頁面的最佳插件之一。
• Astra、Avada 或 Divi 等主題提供漂亮的 WooCommerce 模板，設計時尚現代。

5. 讓您的結帳流程值得信賴

為了提高轉換率，您必須在整個購物體驗中建立信任，從瀏覽商品並將商品添加到購物車到付款。首先仔細描述您的產品描述和圖像，以體現專業和準確性。添加來自 TrustPilot 或 Google 等平台的經過驗證的評論，從而增加可信度。

轉換率統計（資料來源：Baymard）

• 如果不信任整個結帳流程，17% 的購物者就不會提供信用卡詳細資料。

對於結帳頁面，透過以下方式優化安全體驗：

• 反白顯示安全功能，例如 HTTPS、3D Secure 或鎖定圖標，以確保使用者的資料安全。
• 使用乾淨、現代的設計範本來鼓勵客戶使用信用卡並完成付款。

除了 WooCommerce 之外，您還需要額外的插件嗎？

預設情況下，WooCommerce 允許您添加一些手動評論，但您需要一個外掛程式來連接到 Trustpilot 或 Google。購物車本身做得很好，但很基本。例如，如果您想允許客戶更改購物籃的大小，您將需要一個專用的外掛程式。

️ 推薦插件

• 客戶評論 WooCommerce – 它可以幫助您獲得更多評論和社會證據，以提高網站的可信度。
• WordFence 或 Sucuri – 它們都可以幫助您擁有安全的 WordPress 網站並保護您免受惡意攻擊。

6. 為客人提供結帳服務

訪客選項可讓您輕鬆完成購買，節省時間和精力。如果您不想失去一筆銷售，則必須向客戶提供該選項。

轉換率統計（資料來源：Baymard）

• 如果被迫建立帳戶，28% 的購物者將不會購買。

例子

如果您只是想快速購買一件夾克，那麼被迫建立帳戶感覺太麻煩了。如果沒有訪客結帳選項，您可能會放棄購物車 - 您想要的是夾克，而不是在線商店的會員資格。

除了 WooCommerce 之外，您還需要額外的插件嗎？

不，您可以使用 WooCommerce 功能來執行此操作。

前往WooCommerce >設定>帳戶和隱私權>結帳，然後選取啟用訪客結帳選項。

7. 選擇多步驟結帳或一頁結帳

優化結帳流程並提高轉換率的另一種方法是在多步驟結帳還是單頁結帳之間做出決定。

專業多步驟結帳

多步驟結帳非常適合引導用戶完成整個流程，特別是對於年齡較大的人群或進行更大規模、更深思熟慮的購買的人。清晰的進度指示器可以幫助使用者保持方向並減少不知所措。這種方法可以提高需要詳細資訊或涉及重大財務承諾的產品的轉換率。

例子

預訂飛往法屬玻里尼西亞的機票。客戶需要一步步仔細查看日期、行李選項和乘客詳細資料。

專業版一頁結帳

單頁結帳非常適合廉價商品、衝動購買以及重視速度和簡單性的精通技術的購物者。對於想要快速直接從產品頁面完成購買的行動用戶或經常性客戶來說，它特別有效。

例子

購買一副在 TikTok 上看到的太陽眼鏡。客戶看到產品並完成購買，甚至無需將其添加到購物車 - 整個過程只需幾分鐘。

轉換率統計（來源：DigiSmoothie）

• 一頁結帳的轉換率 (+7.5%) 通常比多步驟結帳更高。
• 多步驟結帳有更多交叉銷售機會。

除了 WooCommerce 之外，您還需要額外的插件嗎？

預設的 WooCommerce 結帳不提供多步驟功能。它只允許您對各個部分（例如，帳單資訊、付款等）進行編號，但不會將它們分成單獨的步驟。 WooCommerce 提供單頁結帳作為購買流程的一個單獨步驟，而不是直接在產品頁面上。

️ 推薦插件

• WooCommerce 一頁結帳：它將結帳簡化為單頁，以實現快速交易。
• WooCommerce 的多步驟結帳：它將流程分解為具有進度指示器的清晰步驟。

• CartFlows：它是一款用於建立最佳化的多步驟和單頁結帳流程的綜合工具。

衡量 WooCommerce 結帳的成功程度

現在您已經知道如何建立成功的 WooCommerce Checkout 流程，是時候在您的線上商店中實施它了。在進行任何更改之前，您可以遵循以下一些提示來正確衡量結帳是否成功。

1. 目前的結帳體驗如何？

若要評估您目前的 Checkout 體驗，請先分析現有情況。您可以建立一個包含以下 KPI 的簡單表格：

1. 轉換率：它追蹤完成購買的訪客的百分比（例如，每 100 個訪客中有 3 個購買，因此您的轉換率為 3%）。
2. 銷售數量：它衡量每天或每月完成的交易數量（例如，您的商店一個月內完成 200 筆銷售）。
3. 收入：顯示銷售產生的總收入（例如，您 12 月份的收入為 10,000 歐元）。
4. 平均訂單價值：它計算每個訂單的平均支出金額（例如，將 6,000 歐元收入除以 60 個訂單得出 AOV 為 100 歐元）。
5. 購物車放棄率：它追蹤有多少購物者將商品添加到購物車但未完成購買（例如，100 名訪客中有 70 人放棄購物車，即放棄率為 70%）。
6. 結帳完成率：它衡量啟動後完成結帳流程的使用者百分比（例如，如果 60 個使用者中有 50 個完成結帳，則比率為 83%）。

2. 您的結帳流程是否遵循我們的最佳實務列表

接下來，將上一節中提到的最佳實踐添加到表中，並查看是否已選取所有複選框：

• 不要讓不必要的欄位淹沒使用者。
• 提供客人結帳服務。
• 提出具有美觀設計的快速結帳。
• 提供足夠的付款方式。
• （……）

如果您缺少一些關鍵要素，請實施前面提到的策略，並在一周後和一個月後查看結果。

3. 實施 A/B 測試

有時，並排測試兩種策略可以幫助您確定最有效的策略。 A/B 測試可讓您比較效能，例如，在單頁結帳和多步驟結帳之間進行比較。

4. 使用 GA4 衡量結果

Google Analytics 有一項名為「結帳旅程報表」的功能，顯示開始結帳並完成結帳管道中每個步驟的使用者數量。若要開啟報告，請前往報告>獲利>結帳旅程。

總結

您現在已經了解如何編輯和優化 WooCommerce 結帳以減少購物車放棄並提高轉換率。是時候將這些策略付諸行動了！首先確保您的 WooCommerce 網站速度很快，這是一個重要的步驟，您只需使用 WP Rocket 點擊幾次即可實現。憑藉 14 天退款保證，不存在任何風險——立即嘗試，為您的潛在客戶提供更快的結帳體驗！