如何使用 Elementor 和 HappyAddons 自定義 WooCommerce 結帳頁面

出色的結帳頁面對您的轉化率影響很大。 如果您有 WooCommerce 商店或計劃開設商店，則必須為客戶提供舒適的結帳流程。

據數字營銷機構稱，結賬優化可以將轉化率提高 35.62% 。 無論產品的質量如何，如果您未能提供無縫的結賬體驗，客戶可能會離開您的網站。

但不要擔心。 在下面的博客中，您將看到有關如何使用美學和一些行業最佳實踐自定義 WooCommerce 結帳頁面的分步教程。 好消息是您不需要任何編碼經驗即可遵循本指南。 讓我們開始閱讀吧。

為什麼要自定義 WooCommerce 結帳頁面？

使用 WooCommerce 插件，您可以創建幾乎任何類型的電子商務網站。 安裝插件後，您的網站將自動生成默認結帳頁面。 但默認結賬頁面過於簡單，無法幫助您為客戶提供時尚體驗。

這就是為什麼自定義 WooCommerce 結帳如此重要的原因。 除非您的結帳頁面易於使用且難以導航，否則客戶更有可能放棄您的網站並且永遠不會返回。 以下是您應該自定義 WooCommerce 結帳頁面的一些關鍵原因。

1.刪除不必要的字段

如果您在結帳頁面上要求提供太多個人信息，大多數客戶都不會友好。 因為沒有人喜歡與他人分享不必要的個人信息，所以只包括結帳過程中必填的那些字段（姓名、電子郵件、電話號碼、地址等） 。

2.添加多種付款方式

如果客戶找不到他們喜歡的付款方式，結賬放棄率會非常高。 您必須盡可能在 WooCommerce 結帳頁面上添加付款方式。 如貨到付款、銀行支票、借記卡和信用卡、移動支付和電子匯款。

3.改變頁面設計和佈局

網格佈局是在盡可能短的空間內顯示大量 Web 內容的好方法。 兩列網格是目前設計 WooCommerce 結帳頁面時最流行的樣式。 通過自定義 WooCommerce 結帳頁面，您可以為網格系統帶來更多變化。

4.顯示附加信息

如果您希望客戶閱讀任何特殊信息，可以在結帳頁面上顯示。 例如，您可以通知他們即將推出的優惠、特定產品的折扣、新用戶的促銷代碼等。

5. 讓它在所有設備上都能響應

除非您使結帳頁面對所有設備都能完美響應，否則您將錯過許多潛在客戶。 自定義結帳頁面可以使其在所有設備（台式機、筆記本電腦、平板電腦和智能手機）上看起來都不錯。

如何使用 Elementor 和 HappyAddons 自定義 WooCommerce 結帳頁面

今天自定義 WooCommerce 結帳頁面非常容易。 Elementor是一個拖放頁面構建器，您可以通過它創建所需的任何類型的網頁。 此外，如果您需要自定義其他網頁部分，例如購物車頁面、產品頁面、頁眉、頁腳等，您可以使用此插件來實現。

HappyAddons是 Elementor 的一個強大插件，可以進一步增強您電子商務網站的功能。 在這裡，我們將使用這些插件來演示如何編輯 WooCommerce 結帳頁面。

自定義 WooCommerce 結帳頁面的先決條件

• WooCommerce
• 元素
• 快樂插件
• HappyAddons Pro

確保在您的網站上安裝並正確配置了這些插件。 然後，開始執行下面演示的步驟。

步驟 01：創建結帳頁面

安裝 WooCommerce 插件後，您將在頁面部分獲得默認的 WooCommerce 結帳頁面。 您可以使用 Elementor 打開它以自定義結帳頁面。

但是，如果您願意，您可以創建一個新頁面，將其鏈接為默認的 WooCommerce 結帳頁面，然後使用 Elementor 對其進行自定義。 觀看下面的視頻，了解如何創建新的 WooCommerce 結帳頁面並將其設置為默認值。

最佳做法是創建一個新的結帳頁面，然後使用 Elementor 對其進行自定義。 接下來，通過以下視頻在 Elementor 畫布上打開新的結帳頁面。

步驟 02：拖放 WC Checkout 小部件

在 Elementor 小部件搜索欄上鍵入WC Checkout 。 您將獲得出現在下方的小部件。 將其拖放到 Elementor 畫布的選定部分。

放置小部件後，結帳頁面所需的所有必要字段將立即出現在畫布上。 接下來，您必須使用 Elementor 面板上的可用選項根據需要修改這些字段。

步驟 03：選擇結帳頁面的佈局

從“常規”部分中選擇一種佈局樣式。 一般部分有兩種佈局：一列和兩列。

如果您選擇兩列佈局，您將獲得一些額外的選項（堆疊、列間距和列寬）來自定義 WooCommerce 頁面。 查看下面的視頻，了解兩列佈局的工作原理。

步驟 04：風格化結帳頁面

在樣式部分，您將獲得另外十一個選項來設計結帳頁面。 以下是您將在那裡找到的選項列表。

• 部分
• 輸入
• 優惠券欄
• 優惠券盒
• 標題
• 結算明細
• 附加信息
• 查看訂單
• 付款方式
• 隱私政策
• 按鈕

使用這些選項，您可以更改背景顏色、字段顏色、標籤排版、輸入排版和排版顏色。 讓我們探討一下您可以使用這些選項做什麼。

• 部分

從“部分”選項中，您可以編輯部分之間的空間、更改其背景顏色以及為字段框添加陰影。

• 輸入

輸入部分允許您自定義結帳頁面上字段的高度、顏色、間距、排版和框陰影。

• 優惠券欄

您可以從優惠券欄更改顏色、版式和優惠券鏈接。

• 優惠券盒

優惠券框可讓您更改輸入文本的排版、框顏色、按鈕的排版和按鈕顏色。

• 標題

從標題選項中，您可以更改結帳頁面主要標題的顏色和版式。

• 結算明細

Billing Details 將允許您更改輸入文本顏色、字段顏色、背景顏色、標籤排版等。

• 附加信息

如果您想為買家保留備註，本部分將允許您這樣做。 您可以使用此選項自定義文本區域、輸入文本樣式、框陰影、間距、懸停樣式等。

• 查看訂單

Review Order 選項允許客戶查看他們將要訂購的產品的摘要。 從這裡您可以更改排版、背景排版、顏色、文本顏色、間距等。

• 付款方式

您可以從“付款方式”選項中編輯付款框的標籤字體樣式、顏色、版式、背景顏色和消息框。

• 隱私政策

您將在結帳頁面的付款方式框下方獲得隱私政策。 使用此選項，您可以自定義部分的文本顏色、版式、鏈接懸停顏色和鏈接顏色。

• 按鈕

最後，您可能希望在結帳頁面上自定義下訂單按鈕。 Button 選項將允許您更改按鈕文本、版式、顏色、背景顏色等。

如需更多指導，請訪問此文檔，了解如何使用此 HappyAddons 小部件在 WooCommerce 中自定義結帳頁面。 如果您在使用小部件自定義結帳頁面時仍然遇到任何問題，我們要求您通過評論部分告訴我們。 我們的一名團隊成員將盡快回复您。

步驟 05：使結帳頁面具有移動響應性

根據大量統計數據，當今大約 50% 到 60% 的電子商務銷售額來自移動設備。 因此，您必須確保您的 WooCommerce 結帳頁面針對移動設備進行了完美優化。

只需單擊 Elementor 面板頁腳中的響應模式按鈕。 它將在 Elementor 畫布上方打開一個選項，您可以在其中查看不同屏幕尺寸的頁面並應用修改。 觀看下面的視頻。

不用擔心，如果您為移動或表格視圖更改某些內容，它不會對桌面視圖進行任何更改。 更改將應用於該特定設備。

現在，預覽下面我們使用此小部件創建的 WooCommerce 結帳頁面。

獎勵 – 增加結帳頁面轉化率的 7 個最佳實踐

根據 XP2 Dynamic Yields 的數據，超過 70% 的電子商務產品被從購物車中丟棄，這也是在線商店每年損失約 180 億美元的原因。 其背後的一個關鍵原因是大多數電子商務網站未能為客戶提供一流的用戶體驗。

如果您有一個電子商務網站或計劃創建一個新網站，請在您的結帳頁面上應用以下做法以提高您的轉化率。

1.為結帳字段命名

標記 WooCommerce 結帳頁面的字段可以讓客戶輕鬆知道去哪里以及做什麼。 它將加快結帳過程並為客戶節省寶貴的時間。

2.添加解釋性工具提示

工具提示是當有人將光標懸停在特定 Web 元素上時彈出的文本片段。 它允許您在不佔用太多空間的情況下向結帳頁面添加其他信息。 Tooltip 是 HappyAddons 的免費功能。 閱讀如何將工具提示添加到您的網頁部分。

3. 提供誘人的促銷和折扣

優惠和折扣可以在一夜之間增加您的產品銷量。 根據 Statista 最近的統計數據，大約 90% 的美國人全年使用優惠券或折扣代碼。 嘗試應用促銷和折扣來增加您的銷售額，如下所示。

• 折扣百分比
• 再見一送一 (BOGO)
• 免運費
• 禮物卡
• 忠誠度積分券

4.讓用戶更新產品數量

買家可以隨時改變主意。 他們甚至可能希望在點擊支付按鈕之前更改產品數量。 您必須在結帳頁面上有選項，以便客戶可以更改產品數量。 否則，他們必須訪問購物車頁面，這將導致糟糕的用戶體驗。

5. 顯示安全和信任徽章

展示安全和信任徽章將使客戶確信這是購買產品的合法網站。 它會讓客戶有信心分享個人信息，如借記卡/信用卡號碼、電話號碼、電子郵件地址等。

6. 顯示退貨和退款期限

在 Shopify 中，超過 20% 的在線產品因多種原因被退回給零售商。 這就是為什麼客戶在網上購買之前非常關心退貨和退款政策的原因。 您還必須在產品和購物車頁面旁邊的結帳頁面上明確退貨和退款期限。

7. 追加銷售相關產品

追加銷售是一種銷售技術，它鼓勵客戶購買比最初計劃更多的產品或服務。 通過在結帳頁面上顯示相關產品，您可以說服客戶購買更多此類商品並讓他們感受到它們的重要性。 您可以以折扣價提供這些商品，以便進一步追加銷售。

8. 為現有用戶提供獨特的好處

為現有客戶提供令人興奮的優惠以說服他們購買更多商品是任何電子商務組織的絕佳營銷方式。 這會讓他們覺得自己比非註冊用戶更有價值。 使用 HappyAddons 的條件顯示功能，您可以向註冊用戶提供優惠券和促銷代碼。

關於如何自定義 WooCommerce 結帳頁面的常見問題解答

如果您在本文中還有任何問題未得到解答，本節可能會回答這些問題。 在這裡，我們將介紹一些有關如何自定義 WooCommerce 結帳頁面的最常見問題。

關於如何自定義 WooCommerce 結帳頁面的最終要點

自定義 WooCommerce 結帳頁面對於確保為買家提供積極的購物體驗非常重要。 這是潛在客戶登陸以購買他們想要的產品的最後一頁。 因此，保持這種簡單、容易和引人注目是任何電子商務業務成功的必要條件。

在本指南中，我們解釋了自定義 WooCommerce 結帳頁面的最簡單方法。 通過遵循這些提示，我們希望您現在可以為您的 WooCommerce 商店創建一個結帳頁面，即使您之前沒有經驗。

如果您仍有任何問題，請在下方給我們留言，我們將竭誠為您服務！ 此外，請關注我們的 Facebook 和 Twitter 頻道以獲取定期更新。