如何將自定義欄位添加到WooCommerce產品頁面

[ad_1]

尋找將自定義欄位添加到WooCommerce產品頁面的方法?

是否要在 WooCommerce 產品頁面,或者您有興趣通過單擊按鈕來顯示其他產品變體,因此在WooCommerce中添加自定義欄位僅需花費您幾分鐘的時間。

之後,您就可以 定製所有零件 WooCommerce儀錶板,並迅速合併通常需要手動輸入數據的站點信息。

在本文中,我們將逐步向您展示如何使用免費的高級自定義欄位插件(ACF)向WooCommerce產品添加自定義欄位。

新手指南:使用@wp_acf?️將自定義欄位添加到#WooCommerce產品頁面 點擊鳴叫 WooCommerce的自定義欄位用法示例

WooCommerce中的自定義欄位何時可用?

  • 要為諸如計算機之類的產品添加附加產品信息,您將在其中顯示諸如RAM和處理能力之類的技術規格。
  • 您可以快速更改為其他內容的促銷信息。
  • 不能使用標準WooCommerce功能插入的獨特媒體元素,例如額外的視頻。
  • 產品倒計時,拍賣或發布日期的日期和時間。
  • 客戶可以瀏覽除變體之外的其他產品選項。
  • 段落解釋使用項目的詳細說明。
  • 附加產品向用戶展示一些補充當前產品的追加銷售。 示例包括電子牙刷的刷附件或手鐲的不同飾物。
  • WooCommerce不支持您想在產品頁面上合併的任何異常或額外數據,或者更容易 完成自定義欄位

如何在WooCommerce產品頁面中添加自定義欄位

在此示例中,我們將創建一個銷售筆記本電腦的模擬計算機商店。 為每台新筆記本電腦鍵入計算機規格將花費大量時間,因此,我們將包括一些欄位,以根據我們出售的計算機類型選擇這些規格。

要將自定義欄位添加到WooCommerce產品,您需要安裝免費的 高級自定義欄位 WordPress網站上的插件。 然後,這是設置方法…

高級自定義欄位高級自定義欄位

作者: 艾略特·康登

當前版本:5.9.1

上次更新時間:2020年9月8日

advanced-custom-fields.5.9.1.zip

98%評級 1,000,000+安裝 WP 4.7+要求

以下是逐步在WooCommerce產品頁面中添加自定義欄位的方法:

  1. 創建一個新的欄位組
  2. 添加您的自定義欄位
  3. 配置其他欄位組設置
  4. 向產品添加信息
  5. 在前端顯示自定義欄位信息

1.創建一個新的欄位組

在WordPress信息中心中,轉到新的「自定義欄位」標籤。 然後,單擊「欄位組」旁邊的「添加新項」。

添加新的自定義欄位WooCommerce

命名欄位組。 例如,「計算機欄位」。 欄位組是一個產品或網站部分中要包含的欄位的集合,例如要在所有筆記本電腦產品頁面上顯示的規格列表。

2.添加您的自定義欄位

單擊添加欄位按鈕以將欄位添加到該組。

添加一個欄位

創建一個:

  1. 欄位標籤–主要供您自己參考。
  2. 欄位名稱–用作您將放置在自己的自定義代碼中的字母,在我們的情況下為簡碼。 您可以將其保留為插件生成的默認值。
  3. 欄位類型–您為該欄位創建的格式。 您可以從日期選擇器,複選框,下拉菜單和單選按鈕等選項中進行選擇。

您可能還想給自己或開發者一些說明,以及是否需要此欄位的規範。

自定義欄位WooCommerce的必需選項

如果您正在使用具有多個選項的欄位(例如單選按鈕),則接下來需要添加欄位「選擇」。 這些是您希望顯示在產品頁面後端的選擇選項,例如不同的核心處理器。

自定義欄位的欄位選擇WooCommerce

其餘設置通常是可選的,例如默認值,布局以及是否要顯示值或標籤。

額外設置

在完成欄位或組的操作後,請單擊「發布」或「更新」按鈕以確保將其保存。

更新欄位組

要將更多欄位添加到您的組,請再次單擊「添加欄位」按鈕。

這是該組中四個欄位的外觀:

  • 中央處理器
  • 記憶
  • 操作系統
  • 發布日期

添加欄位

3.配置其他欄位組設置

欄位組完成後,滾動到「位置」模塊。 在這裡,您可以確定希望欄位組出現在WordPress儀錶板中的位置。

將帖子類型設置為等於產品。 或者,如果您想更具體,也可以選擇特定的產品類別。

設置自定義欄位WooCommerce的位置

在「設置」下,確保「欄位組」處於活動狀態。 這使您可以在那些產品頁面上看到它,並有可能向客戶顯示欄位選擇。

樣式取決於您自己的喜好。 對於位置,標籤放置和說明放置也可以這樣說。 這都是個人喜好,以及您要如何格式化後端。 如有疑問,請將其保留為默認值。

如果您在產品頁面上顯示多個欄位組,請設置訂單號。 這控制了不同欄位組的顯示順序。

您還可以設置描述並在屏幕上隱藏某些詳細信息。

設定

4.添加產品信息

接下來,導航到要在其中添加自定義欄位的產品的編輯器。

如果正確配置了所有設置,則應該在「產品數據」框下方看到自定義欄位。

對於我們的示例,如果要添加新的筆記本電腦產品頁面,則可以選擇CPU,內存,操作系統和發行日期。

查看自定義欄位WooCommerce

5.在前端顯示自定義欄位信息

要完成操作,您需要在前端單個產品頁面上顯示來自自定義欄位的信息。 您可以在任何地方添加此信息,但是產品的完整描述或簡短描述都是很好的起點。

要在前端顯示欄位信息,請使用 [acf field=””] 短代碼。 在雙引號之間添加欄位名稱:

放置簡碼

您可以在欄位組編輯器界面中找到每個欄位的欄位名稱:

欄位名稱-自定義欄位WooCommerce

要完成任務,請單擊「發布」或「更新」按鈕。

在前端打開產品時,應該看到在其中添加了簡碼的自定義欄位:

前端產品 有關如何添加自定義欄位的任何問題?

使用「高級自定義欄位」而不是使用其他替代欄位的插件的優點是,您可以將新欄位放置在網站上的任何位置,包括產品頁面,帖子和購物車模塊-自定義儀錶板並加快內容創建過程。

使用@wp_acf?️藉助本#WooCommerce自定義欄位指南來改進任何#eCommerce商店 點擊鳴叫

這是擴展您的創造力並簡化構建產品頁面的繁瑣任務的絕佳選擇。

我們了解「高級自定義欄位」插件有一些學習曲線,因此,如果您對在WooCommerce中添加自定義欄位有任何想法或疑問,請在下面的評論中告訴我們!

你也可以 查看我們的完整ACF教程 了解更多有關如何使用此靈活插件的信息。

相關文章