自定義和編輯 WooCommerce 結帳頁面的 3 種有效方法

正在尋找編輯 WooCommerce 結帳頁面的最佳方式？

學習如何自定義 WooCommerce 結帳頁面可以讓您更好地控制其設計並增加更多銷售的潛力。

‍ 在本詳細教程中，我們將向您展示三種無需代碼的方式來自定義結帳頁面，包括完全調整設計和/或更改結帳頁面上顯示的字段。

我們還將介紹 WooCommerce 提供的用於自定義結帳體驗的所有內置功能。

讓我們開始吧…

編輯 WooCommerce 結帳頁面的原因

是否有明顯的理由修改 WooCommerce 結帳頁面？ 那要看。 內置的結帳模塊乾淨、實用且足夠快，可以處理付款而不會惹惱您的客戶。

但你也可能注意到它的缺點。 以下是您可能想要編輯 WooCommerce 結帳頁面的主要原因：

• 替換默認的 WooCommerce 品牌元素，如預設字體、樣式和 WooCommerce 紫色。
• 添加與您的業務相關的 Web 項目，例如徽標、品牌顏色和支持文檔的鏈接。
• 如果在測試後需要優化結帳以進行轉換。
• 通過將結帳過程轉換為一個步驟來加快結帳過程。
• 合併追加銷售、交叉銷售和相關產品。
• 用於添加自定義字段或刪除 WooCommerce 提供的某些字段。
• 修改運輸選項。
• 用於更改按鈕文本、預設字段文本和客人結帳選項等設計元素。

如何編輯 WooCommerce 結帳頁面

您有幾個選項可用於編輯 WooCommerce 結帳頁面。 最適合您的方法取決於您嘗試進行的特定編輯以及您是否願意使用插件。

下面，我們將介紹三種最佳方法：

1. 原生 WooCommerce 設置– WooCommerce 包含許多用於自定義結帳的內置選項，我們將在第一種方法中詳細介紹。 您的主題還可能提供自己的選項來自定義結帳頁面設計。
2. Elementor Pro – Elementor Pro 現在提供自己的結帳小部件，可讓您完全自定義結帳頁面的設計。 如果您特別想編輯頁面設計，這是一個很好的選擇。
3. 結帳字段編輯器- 如果您想編輯結帳頁面上顯示的表單字段，這是一個很好的選擇。 您可以使用它來添加新字段、刪除默認字段並根據需要重新排列所有內容。

讓我們通過它們..

方法 1：使用默認的 WooCommerce 結帳設置

WooCommerce 提供內置設置來編輯您的結帳模塊，並且您的 WordPress 主題可能已經提供了用於調整 WordPress 定制器中的某些字段和結帳設置的工具。

在尋找其他插件、主題或字段定制器之前檢查這些設置總是明智的，因為您可能已經擁有所需的功能。

例如，WooCommerce 具有用於刪除某些字段、在結帳期間啟用稅率以及顯示優惠券字段的工具。

第 1 步：在結帳時添加稅金計算和優惠券字段

WooCommerce 具有內置設置，可自動計算稅款並在結帳時接受優惠券。

要打開/關閉，請轉到 WordPress 上的WooCommerce > 設置。

選擇General選項卡，然後向下滾動到Enable Taxes部分。 選中復選框以在結帳期間啟用稅率和計算。 這會根據您在 WooCommerce 中配置的費率（ WooCommerce > 設置 > 稅 > 標準費率）生成並顯示稅費。

選中啟用優惠券代碼的使用框以顯示客戶可以輸入折扣代碼的字段。

如果您不想顯示某些元素，只需刪除複選框即可。 確保單擊“保存”按鈕以在前端查看您的更改。

第 2 步：顯示含稅或不含稅的產品定價

在結賬結束時計算稅金是一回事，但您還必須決定是否要將稅金包含在產品的總成本中，尤其是在客戶結賬時。

一般來說，這顯示了更高的透明度，而不是在客戶付款之前就加稅加價。

要在結帳過程中包含稅費，請轉到WooCommerce > 設置 > 稅費。

在頁面上向下滾動以找到“在購物車和結帳期間顯示價格”字段。

從下拉列表中選擇：

• 含稅
• 不含稅

單擊保存更改。

第 3 步：設置結帳時顯示的運輸項目

此外，在WooCommerce > Settings下，您可以標記 WooCommerce 結帳中出現的運輸區域、方法和計算。

只需轉到運輸選項卡並調整：

• 計算：啟用購物車頁面上的運費計算器
• 計算：在結帳時隱藏運費，直到插入地址
• 送貨目的地：在結帳時設置默認送貨地址

單擊保存更改。

第 4 步：在結帳時管理帳戶和隱私

在WooCommerce > Settings下，轉到Accounts & Privacy選項卡。

在頁面頂部，您將看到兩個字段：

• 訪客結帳：包括/刪除訪客結帳和現有帳戶登錄
• 帳戶創建：允許客戶在結帳時創建帳戶或開始訂閱

繼續向下帳戶和隱私頁面找到隱私政策區域。

填寫結帳隱私政策文本框，以確保客戶在結帳時看到該政策。 如果您不想在該區域顯示隱私政策，請將該字段留空。

第 5 步：選擇實際結帳頁面和其他高級設置

導航到高級選項卡以顯示頁面設置部分； 這會提示商家在結賬時告訴 WooCommerce 將客戶發送到哪裡。

默認情況下，WooCommerce 會生成購物車、結帳、我的帳戶和條款和條件頁面，您可以通過轉到 WordPress 上的頁面 > 所有頁面來找到這些頁面。

但是，您可以選擇生成一個全新的頁面並將其鏈接到此處。 這會覆蓋默認結帳頁面並將客戶發送到自定義頁面。

Advanced選項卡中的另一個選項是Force Secure Checkout ，這需要 SSL 證書。

第 6 步：在 WordPress 定制器中更改主題的結帳設計

具有 WooCommerce 功能的 WordPress 主題通常會安裝 WordPress Customizer 工具來輕鬆調整您的結帳樣式。

請記住，所有 WooCommerce 主題都提供獨特的 WordPress 定制器設置（有些根本沒有任何設置），但總的來說，值得檢查 WordPress 定制器以快速控制結帳。

首先，在 WordPress 上轉到外觀 > 自定義。

如果可用，您的主題應在 WordPress 定制器的某處顯示 WooCommerce 按鈕。 點擊那個。

這只是 Storefront 主題的示例（因此您可能看不到相同的內容），但主題在定制器中具有Checkout選項卡是很常見的。 選擇那個或類似的東西，這可能表明對結帳的控制。

瀏覽您的主題提供的所有結帳設置。 在 Storefront 主題中，您可以將這些字段設為可選、必填或隱藏：

• 公司名稱字段
• 地址行 2 字段
• 電話字段

也可以用星號突出顯示必填字段。

最後，店面主題提供了在結帳結束時顯示隱私政策和條款和條件頁面的選項。

方法 2：使用頁面構建器編輯 WooCommerce 結帳字段和整體樣式

Elementor、Beaver Builder 和 Themify 等頁面構建器都提供 WooCommerce 內容小部件來覆蓋 WooCommerce 結帳頁面上當前的內容。

頁面構建者幾乎專門為其高級計劃保留其 WooCommerce 結帳模塊，因此您很有可能必須為此功能付費。 例如，您會收到帶有 Pro 計劃的 Elementor Checkout 小部件。

話雖如此，頁面構建器使您幾乎可以完全控制結帳頁面，因此這是一種無需編碼知識即可編輯 WooCommerce 結帳的簡單方法，而且每年只需 50 到 100 美元左右。

在本教程中，我們將向您展示結帳定制通常如何與頁面構建器一起使用 Elementor。

第 1 步：在 Elementor 中打開指定的結帳頁面

要在 Elementor 中編輯 WooCommerce 結帳，您必須轉到 WooCommerce 自動創建的結帳頁面。 在Pages > All Pages下找到它。

打開標有“結帳頁面”的頁面，然後單擊使用 Elementor 編輯。

第 2 步：刪除 WooCommerce 結帳簡碼

WooCommerce 已自動添加其“WooCommerce checkout”短代碼到編輯器中，它呈現默認的 WooCommerce 結帳模塊。

目標是將其換成頁面構建器中的結帳模塊。 因此，刪除 WooCommerce 結帳簡碼。

第 3 步：放入 Elementor Checkout 小部件

現在是時候找到您的頁面構建器的結帳小部件了。 Elementor 提供了一個名為Checkout的工具，您可以使用搜索欄或在 WooCommerce 標題下瀏覽來找到它。 單擊Checkout小部件並將其拖到空白頁面上，其中顯示“將小部件拖到此處”。

注意：如果您尚未升級到 Elementor 的高級版，您可能看不到結帳小部件。 大多數頁面構建器都是這種情況。

第 4 步：自定義內容、樣式和高級功能

拖動結帳小部件後，Elementor 呈現結帳預覽。 然後，您可以單擊左側的這些選項卡來自定義結帳的各個方面：

例如，您可以將通用佈局切換到一列並調整名字字段的佔位符文本。

其他自定義選項卡包括：

• 結算明細
• 附加信息
• 你的訂單
• 優惠券
• 支付

在樣式選項卡下也有無數種方法可以編輯 WooCommerce 結帳。

使用這些選項卡：

• 部分
• 排版
• 形式
• 訂單摘要
• 購買按鈕

例如，我們將藍色的購買按鈕換成綠色的。

最後，“高級”選項卡提供了更強大的編輯工具：

• 佈局
• 運動效果
• 轉型
• 背景
• 邊框
• 面具
• 響應能力
• 屬性
• 自定義 CSS

只要您堅持之前為 WooCommerce 設置為“結帳頁面”的頁面，並將 WooCommerce 結帳短代碼換成頁面構建器結帳小部件，您就可以保存更改並完成該過程！

方法3：安裝自定義插件來編輯字段

存在許多 WooCommerce 結帳定制器插件，例如：

大多數 WooCommerce 結帳插件都提供了額外的自定義工具來修改和添加字段，但也有一些可以徹底改造設計，例如 Multi-step Checkout 插件。

我們建議您查看上面所有推薦的插件，但我們將通過 Checkout Field Editor 插件的快速教程幫助您了解如何使用插件編輯 WooCommerce 結帳。

第 1 步：安裝並激活 Checkout Field Editor 插件

安裝 Checkout Field Editor 插件，然後完成激活插件的過程。

激活後，該插件會在 WordPress 上添加一個新選項卡，您可以通過轉到WooCommerce > Checkout Form訪問該選項卡。

第 2 步：編輯當前字段

該插件顯示您的 WooCommerce 結帳中的所有當前字段，除了該插件現在鏈接到默認的 WooCommerce 結帳，因此您可以完全控制這些字段。

您可以編輯：

• 計費字段
• 運輸領域
• 附加字段

要編輯 WooCommerce 結帳字段，請單擊要更改的字段旁邊的編輯。 對於此示例，我們將修改公司名稱字段。

在編輯字段窗口中，您可以修改字段的選項，例如：

• 標籤
• 佔位符
• 默認值
• 班級
• 驗證

也可以取消選中必填框，因此客戶沒有義務填寫該字段。 您還可以禁用該字段，使其根本不會顯示在結帳中。 確保單擊保存並關閉。

該插件通常會在此之後保存所有內容，但您可以再次單擊“保存更改”按鈕以確保其正常工作。

如您所見，我們從結帳區域中刪除了公司名稱字段。

它已經從前端結帳中消失了。

您可能還想編輯諸如佔位符文本之類的內容。 在這種情況下，打開相關字段並更改設置的過程相同。

我們結帳上的名字字段現在顯示新的佔位符文本。

第 3 步：向 WooCommerce 結帳添加一個新字段

要添加一個全新的字段，請單擊“添加字段”按鈕。

選擇字段類型，從以下選項中進行選擇：

• 文本
• 數字
• 隱
• 密碼
• 電話
• 複選框
• 月
• 網址
• 還有很多

例如，我們將創建一個Number字段並要求客戶輸入他們的 Loyalty Rewards Number。 您還可以指定佔位符、默認值以及是否為必填字段等元素。

確保選中Enabled框，然後單擊Save & Close 。

第 4 步：查看結果

在後端，您將在列表底部看到新的結帳字段。 默認情況下它位於末尾，但您可以單擊並拖動以重新排序。

新字段也出現在前端結帳模塊上。

立即創建完美的結帳頁面

我們建議從默認的 WooCommerce 結帳設置開始，看看它們是否有助於實現您想要的結果。 對於更高級的編輯，請考慮使用自定義字段。 對於高級但相對易於實現的自定義，請使用建議的頁面構建器之一。

您對如何編輯 WooCommerce 結帳的主要問題是什麼？ 在評論區分享你的觀點！