如何新增WooCommerce自定義結帳欄位

如何新增WooCommerce自定義結帳欄位

無需編碼即可新增WooCommerce自定義結帳欄位的方法?

在本部落格中,您將學習如何以最簡單的方式新增WooCommerce額外的結帳欄位。

WooCommerce預設結帳頁面的表單欄位有時可能不足以提供流暢的電子商務結帳體驗。因此,很常見的是人們正在尋找新增WooCommerce自定義結帳欄位的方法。

雖然執行原始程式碼是一種選擇,但它並不是新增 WooCommerce 結帳欄位的最有效方式。

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

答案是使用易於使用但輕量級的WooCommerce外掛。以及如何使用一個很棒的WordPress外掛來新增WooCommerce自定義結帳欄位是這個部落格的全部內容。

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

WooCommerce結算頁面

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

為什麼需要向WooCommerce結帳頁面新增自定義欄位?

預設的WooCommerce結帳模板有兩個表單欄位,一個與計費相關,另一個與運輸和付款資訊相關。所有這些都是進行交付所需的基本資訊。

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

為什麼需要自定義WooCommerce結算頁面

為此,他們通常需要撥打您的幫助熱線,這可能是一個漫長而令人厭煩的結帳過程,從而導致糟糕的使用者體驗。但是,如果您新增WooCommerce自定義結帳欄位,則可以更改它。

另一個示例是新增中間名欄位。當然,一個人總是可以在名字欄位中寫中間名,但是有一箇中間名錶單欄位將為有中間名的人提供更好的使用者體驗(我們都知道,有很多!)。

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

但我敢肯定,作為線上商店所有者,您有許多想法或需求,WooCommerce自定義結帳欄位可以輕鬆解決。因此,通過向您的WooCommerce結帳頁面新增自定義欄位,使訂單對消費者更加個性化以及使製造和交付過程都非常有益。

WooCommerce結帳欄位編輯器外掛

要將額外的自定義欄位新增到您的WooCommerce結帳頁面,您需要安裝並啟用以下外掛:

  1. Elementor(Free)
  2. ShopEngine Free and Pro

如果您在啟用WooCommerce結帳欄位編輯器 – ShopEngine Pro方面需要幫助,您可以檢視官方文件

ShopEngine是終極的WooCommerce結帳欄位編輯器,它帶有13多個模組和60多個小工具,讓您可以完全控制構建自己的個性化Woo商店。它是Elementor頁面構建器的外掛,因此您需要在安裝ShopEngine外掛之前安裝Elementor。

在超過13個模組中,我將在本教學中使用一個名為“Checkout Additional Field Module”的模組,將一個額外的自定義欄位新增到WooCommerce結帳頁面。這裡是主要過程……

如何新增WooCommerce自定義結帳欄位

是的!如果您使用ShopEngine,在WooCommerce中新增額外的自定義結帳欄位只需 3 步任務。讓我們詳細檢查這些步驟,以便您可以輕鬆地進行操作……

第 1 步:啟用ShopEngine的Checkout Additional Field模組

第一步是啟用附加欄位模組。要啟用或啟用模組,您需要

  • 導航到ShopEngine ⇒ Modules ⇒ Checkout Additional Field,然後單擊Settings圖示

結算頁面自定義欄位設定

  • 開啟Enable the module選項,然後單擊儲存更改以進行更新。

啟用ShopEngine結算頁面自定義欄位模組

第 2 步:向WooCommerce結帳頁面新增新的自定義欄位 

使用ShopEngine,您可以將自定義欄位新增到以下結帳相關表單:

  • 計費表單輸入欄位列表
  • 運輸表格輸入欄位列表 
  • 附加表單輸入欄位列表

Checkout Form-Additional是ShopEnigine的一個小工具,預設情況下會新增一個文字輸入欄位,使用者可以在其中新增與他們購買的產品或有關運輸或任何個人備註相關的其他個人備註。

將自定義欄位新增到任何表單欄位列表的過程是相同的。您可以按照相同的過程將自定義欄位新增到所有表單和任意數量的欄位。

注意:您必須使用結帳頁面模板中要為其新增自定義欄位的表單。

以下是將單個自定義欄位新增到WooCommerce結帳頁面所需採取的步驟。要新增任何表單欄位,請單擊該表單名稱下方的+ Add Item並新增以下欄位:

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

您可以看到下面的過程,重複相同的過程以將多個額外欄位新增到您的WooCommerce結帳頁面。

建立WooCommerce結算頁自定義欄位

第 3 步:儲存並檢視預覽 

現在單擊儲存更改並使用額外的自定義結帳欄位更新結帳頁面。您可以下測試訂單以檢視更新後的結帳頁面。

注意:我在運輸表格輸入欄位列表中新增了另一個額外的欄位。如果您這樣做,則必須確保在您的WooCommerce結帳模板中使用運輸表單小工具

預覽結算頁面自定義欄位

如何在WooCommerce中編輯/刪除額外的結帳欄位

現在,如果您新增一個額外的自定義欄位,但您想更新一些資訊或者可能永遠刪除一個自定義欄位,該怎麼辦。你是怎樣做的?

好吧,就像在WooCommerce中建立新欄位、編輯和刪除額外的結帳欄位一樣,使用ShopEngine也非常容易。讓我們看看如何:

編輯WooCommerce自定義結帳欄位需要遵循的步驟:

要編輯現有的WooCommerce自定義結帳欄位:

  • 導航到ShopEngine ⇒ Modules ⇒ Checkout Additional Field,然後單擊Setting圖示
  • 點選欄位展開
  • 現在更新您想要的任何資訊(我正在製作中間名只是為了向您展示該過程)
  • 最後,點選儲存更改進行更新

編輯WooCommerce額外結算頁欄位預覽

在WooCommerce中刪除額外結帳欄位的步驟:

要編輯現有的WooCommerce自定義結帳欄位:

  • 導航到ShopEngine ⇒ Modules ⇒ Checkout Additional Field,然後單擊設定圖示
  • 點選欄位展開
  • 現在更新您想要的任何資訊
  • 最後,點選儲存更改進行更新

使用ShopEngine刪除自定義結算欄位

小結

我希望你能得到我在這篇部落格開頭所承諾的,即為你提供新增WooCommerce自定義結帳欄位的最簡單方法。

我已經向您展示瞭如何新增新欄位以及在WooCommerce結帳頁面上編輯和刪除現有欄位的步驟。請隨意複製相同的過程來新增特定電子商務網站所需的自定義欄位。

ShopEngine是WooCommerce的結賬欄位編輯器外掛,除了向結賬頁面新增自定義欄位外,它還可以讓您做很多事情。您可以自定義構建所有WooCommerce頁面,例如商店頁面、帳戶頁面、購物車頁面、感謝頁面等。

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

評論留言