如何通過 3 個步驟（無需編碼）添加 WooCommerce 額外結帳字段

尋找無需編碼即可添加 WooCommerce 額外結帳字段的方法？

好吧，你已經登陸了正確的博客。 在本博客中，您將學習如何以最簡單的方式添加 WooCommerce 額外的結帳字段。

WooCommerce 默認結帳頁面的表單字段有時可能不足以提供流暢的電子商務結帳體驗。 因此，很常見的是人們正在尋找在 WooCommerce 中添加額外結帳字段的方法。

雖然編寫原始代碼是一種選擇，但這並不是最有效的方法。

好吧，那麼您一定要問的有效方法是什麼，對嗎？

答案是使用易於使用但輕量級的 WooCommerce 插件。 以及如何使用出色的 WordPress 插件向結帳頁面添加一個額外的字段就是這個博客的全部內容。

所以，讓我們跳到主要部分……

什麼是電子商務中的結帳頁面？

在電子商務網站中，結帳頁面基本上是指處理支付/運輸信息以完成交易的頁面。 它通常具有不同的表單字段來收集用戶信息，例如帳單地址、送貨地址、付款方式等。

為什麼需要向 WooCommerce 結帳頁面添加自定義字段？

默認的 WooCommerce 結帳模板有兩個表單字段，一個與計費相關，另一個與運輸和付款信息相關。 所有這些都是進行交付所需的基本信息。

但是，例如，如果您的客戶希望在他們的訂單中進行一些個性化設置，那麼他們可能希望將訂單作為禮物發送給其他人，並且他們希望在其上寫一些便條。 他們是怎麼做到的？

為此，他們通常需要撥打您的幫助熱線，這可能是一個漫長而令人厭煩的過程，從而導致糟糕的用戶體驗。 但是，如果您將自定義字段添加到您的 WooCommerce 結帳頁面，則可以更改它。

另一個示例是添加中間名字段。 當然，一個人總是可以在名字字段中寫中間名，但是有一個中間名表單字段將為有中間名的人提供更好的用戶體驗（我們都知道，有很多！）。

另一個例子可能是，送貨人希望產品在一天中的某個時間交付。 為此，您還可以提供自定義字段。 我只是在談論我想到的選項。

但我敢肯定，作為企業主，您有很多想法或需求，您的 WooCommerce 結帳頁面上的自定義字段可以輕鬆解決。 因此，通過向您的 WooCommerce 結帳頁面添加自定義字段，使訂單對消費者更加個性化以及使製造和交付過程都非常有益。

向 WooCommerce 結帳頁面添加額外自定義字段所需的插件

要將額外的自定義字段添加到您的 WooCommerce 結帳頁面，您需要安裝並激活以下插件：

1. 元素（免費）
2. ShopEngine 免費版和專業版

如果您在激活 ShopEngine 和 ShopEngine Pro 方面需要幫助，可以查看文檔。

ShopEngine 是終極的 WooCommerce 定制器，帶有 13 多個模塊和60 多個小部件，可讓您完全控制構建自己的個性化 Woo 商店。 它是 Elementor 頁面構建器的插件，因此您需要在安裝 ShopEngine 插件之前安裝 Elementor。

在超過 13 個模塊中，我將在本教程中使用一個名為“結帳附加字段模塊”的模塊，將一個額外的自定義字段添加到 WooCommerce 結帳頁面。 這裡是主要過程......

如何添加 WooCommerce 額外結帳字段：3 步教程

是的！ 如果您使用 ShopEngine，在 WooCommerce 中添加額外的結帳字段只需 3 個步驟。 讓我們詳細檢查這些步驟，以便您可以輕鬆地進行操作……

第 1 步：啟用 ShopEngine 的 Checkout Additional Field 模塊

第一步是啟用附加字段模塊。 要啟用或激活模塊，您需要

• 導航到ShopEngine ⇒ 模塊 ⇒ 結帳附加字段，然後單擊設置圖標

• 打開啟用模塊選項，然後單擊保存更改以進行更新。

您還可以查看如何使用 ShopEngine 自定義 WooCommerce 結帳頁面

第 2 步：向 WooCommerce 結帳頁面添加新的自定義字段

使用 ShopEngine，您可以將自定義字段添加到 以下結帳相關表格：

• 計費表單輸入字段列表
• 運輸表格輸入字段列表
• 和附加表單輸入字段列表

Checkout Form-Additional 是 ShopEnigine 的一個小部件，默認情況下會添加一個文本輸入字段，用戶可以在其中添加與他們購買的產品或有關運輸或任何個人備註相關的其他個人備註。

將自定義字段添加到任何表單字段列表的過程是相同的。 您可以按照相同的過程將自定義字段添加到所有表單和任意數量的字段。

注意：您必須使用結帳頁面模板中要為其添加自定義字段的表單。

以下是將單個自定義字段添加到 WooCommerce 結帳頁面所需採取的步驟。 要添加任何表單字段，請單擊該表單名稱下方的+ 添加項目並添加以下字段：

• 標籤：提供合適的標題
• 類型：選擇所需的字段類型。 您可以選擇文本、數字、電子郵件、文本區域、日期、時間、URL、複選框等類型。
• 名稱（唯一鍵）：提供唯一名稱，因為它將被視為唯一鍵。 確保中間沒有空格，也沒有特殊字符。 並始終確保為您創建的每個字段提供一個唯一的名稱。
• 佔位符：為佔位符編寫文本。
• 選項（僅適用於 Radio 類型）：僅當您選擇字段類型 Radio 時才需要此選項。 您需要以“，”分隔的“value= option”模式添加所有單選按鈕值。 例如; 0=是，1=否或 M= 男性，F= 女性。
• 必填：選擇是否要將此字段設為必填。
• 位置（之後）：選擇字段的位置。
• 自定義 CSS 類：如果需要，您可以在此處添加任何自定義 CSS 類。

您可以看到下面的過程，重複相同的過程以將多個額外字段添加到您的 WooCommerce 結帳頁面。

第 3 步：保存並查看預覽

現在單擊保存更改並使用額外的自定義結帳字段更新結帳頁面。 您可以下一個測試訂單以查看更新後的結帳頁面。

注意：我在運輸表格輸入字段列表中添加了另一個額外的字段。 如果您這樣做，則必須確保在您的 WooCommerce 結帳模板中使用運輸表單小部件。

如何在 WooCommerce 中編輯/刪除額外的結帳字段

現在，如果您添加一個額外的自定義字段，但您想更新一些信息或者可能永遠刪除一個自定義字段，該怎麼辦。 你是怎樣做的？

好吧，就像在 WooCommerce 中創建、編輯和刪除額外的結帳字段一樣，使用 ShopEngine 也非常容易。 讓我們看看如何：

編輯額外的自定義字段需要遵循的步驟：

要編輯現有的自定義字段：

• 導航到ShopEngine ⇒ 模塊 ⇒ 結帳附加字段，然後單擊設置圖標
• 點擊字段展開
• 現在更新您想要的任何信息（我正在製作中間名只是為了向您展示該過程）
• 最後，點擊保存更改進行更新

刪除額外自定義字段的步驟：

要編輯現有的自定義字段：

• 導航到ShopEngine ⇒ 模塊 ⇒ 結帳附加字段，然後單擊設置圖標
• 點擊字段展開
• 現在更新您想要的任何信息
• 最後，點擊保存更改進行更新

關於 WooCommerce 中額外結帳字段的最後一句話

我希望你能得到我在這篇博客開頭所承諾的，即為你提供在 WooCommerce 中添加額外結帳字段的最簡單方法。

我已經向您展示瞭如何在您的 WooCommerce 結帳頁面上添加、編輯和刪除額外的字段。 請隨意複製相同的過程來添加特定電子商務網站所需的自定義字段。

ShopEngine 是 Ultimate WooCommerce 構建器，除了向結帳頁面添加自定義字段外，它還可以讓您做很多事情。 您可以自定義構建所有 WooCommerce 頁面，例如商店頁面、購物車頁面、感謝頁面等。

因此，不要將您的時間和精力浪費在任何不合格的插件上，而是立即抓住您的 ShopEngine 並以最大的靈活性建立您的 WooCommerce 商店。