如何將條件字段添加到 WooCommerce 結帳
已發表: 2020-11-05您想為您的商店創建條件邏輯嗎？ 你來對地方了。 在本指南中，您將學習如何將條件字段添加到 WooCommerce 結帳。
結帳是任何電子商務商店最重要的頁面之一。 有數以百萬計的網站在爭奪相同的用戶。 因此，為了領先於您的競爭對手，您應該盡可能地自定義和優化您的結帳。 執行此操作的最有趣的選項之一是將條件字段添加到您的 WooCommerce 結帳。
這些字段允許您創建條件邏輯並僅顯示客戶需要在結帳頁面上填寫的字段以加快購買過程。 因此，讓我們更好地了解條件字段是什麼以及它們如何幫助您將商店提升到一個新的水平。
什麼是條件字段？
條件字段是具有條件邏輯的字段，以便在滿足條件時顯示或隱藏另一個字段。 要創建條件邏輯，您至少需要一個父字段和一個或多個子字段，這些子字段取決於父字段採用的值。 例如，如果您為客戶提供使用 PayPal 或信用卡付款的可能性，您可能希望僅在用戶選擇信用卡選項時才顯示信用卡詳細信息字段。 如果他們想使用 PayPal 付款，這些字段將不會出現。 這樣，您可以改善網站上的用戶體驗並提高轉化率。
什麼是條件邏輯？
在我們開始之前，您必須清楚地了解條件邏輯是什麼，所以讓我們更深入地挖掘一下。 當您創建條件邏輯時，您希望條件字段在條件滿足或為真時執行 X，但在條件為假或未滿足時執行 Y。
按照我們的信用卡示例，我們只希望在客戶選擇信用卡支付選項時顯示信用卡詳細信息字段。 此示例非常簡單，但當您使用多種字段類型和/或添加多個條件和操作時，條件邏輯可能會達到更高的複雜性。
在 WooCommerce 結帳頁面上，您可以為單個字段設置條件。 將根據設置檢查客戶在該字段中輸入的值，如果滿足條件，則操作將顯示該字段。
要在結帳頁面上創建條件邏輯，您至少需要使用兩個字段。 父母及其子女。 檢查值的字段稱為父字段。 並且您創建條件邏輯以使其僅在條件為真時出現或不出現的地方是子字段。 正如我們將在本指南中看到的，一個父字段可以有多個子字段和多個條件應用於它。
如何將條件字段添加到 WooCommerce 結帳
在本節中，我們將了解如何在 WooCommerce 中使用條件邏輯和條件字段並將其添加到結帳。 以編程方式創建有用的條件邏輯需要大量編碼，因此我們建議您使用插件。 對於此演示，我們將使用 Checkout Manager。
該插件允許您在結帳頁面上添加、自定義和刪除不同類型的字段。 最重要的是，您可以使用 WooCommerce 結帳頁面上的多個自定義字段應用無限制的條件驗證。 擁有超過80,000 次活躍下載，它是目前最好的結賬插件之一。 它有一個具有基本功能的免費版本，您可以從這裡下載，以及三個起價為 19 美元的高級計劃。
我們將帖子分為不同的部分，因此您可以直接跳轉到您感興趣的部分。事不宜遲，讓我們看看如何在 WooCommerce 的結帳頁面中添加條件字段。
- 如何創建條件邏輯
- 具有多個子自定義字段的條件邏輯
- 如何使用多個自定義字段和鍊式條件
- 使用條件邏輯時不能做什麼
1.如何創建條件邏輯
因此，既然您已經清楚地了解了條件邏輯是什麼以及它是如何工作的，那麼讓我們看看如何使用 WooCommerce Checkout Manager 插件創建條件邏輯字段。 讓我們創建一個條件，當用戶在計費表單中輸入“ admin ”作為名字時顯示一條消息。 為此，首先，在您的 WordPress 儀表板中轉到WooCommerce > Checkout > Billing 。 在那裡，按添加新字段按鈕。
將打開一個窗口。 那是新字段的字段編輯器。 在那裡，選擇消息作為類型並填寫標籤、類型和消息等選項。 此外，選擇名字作為右列的父字段。 最後，在First Name下寫下“ admin ”，然後點擊Save 。
如您所見，我們將First name字段設置為父字段。 現在是測試它的時候了。 因此，轉到前端的結帳頁面並在名字字段中輸入“ admin ”。 您應該會看到這樣的警告消息。
這是一個簡單的示例，但條件可以包含許多字段，並且在使用許多條件和自定義字段時事情會變得非常複雜。 因此，為了輕鬆管理它們，您可以在相應結帳表單（賬單、運輸、附加）的字段管理器屏幕中查看哪個字段具有條件和父字段。
這就是您可以使用 Checkout Manager 在 WooCommerce 中向結帳添加條件字段的方式。 現在，讓我們看一個更複雜的例子。 當然，最好的一點是沒有限制有多少自定義字段可以將相同或不同的條件應用於同一個父字段。
2.具有多個自定義子字段的條件邏輯
現在，假設您想讓購物者選擇接收他們在您的某個配送中心購買的產品，或者選擇標準送貨到特定位置。 為此，您可以使用單選類型字段，以便客戶可以選擇兩個選項之一。
創建一個新的父字段
因此，首先，轉到WooCommerce > Checkout並創建一個單選類型字段。 在本例中，我們將此字段稱為“交付”。 
然後輸入選項。 我們稱他們為外賣和外賣。 在這裡，您還可以為每個選項選擇一個價格並將一個設置為默認值。 
由於我們希望根據客戶選擇的複選框向客戶顯示不同的字段，因此我們將為交付選項使用一些默認的 WooCommerce 結帳字段。 這樣，購物者可以填寫他們的詳細信息，以便在他們選擇的地址接收他們的產品。 因此，編輯默認 WooCommerce 字段：州、城市、郵政編碼和街道地址。 然後，為它們中的每一個創建相同的條件邏輯。 此外，我們將創建一個條件並選擇單選字段類型 Delivery 作為父字段，如果用戶選擇 Delivery 選項，則顯示 State 字段。 
當然，您可以對所有這些字段或其中一些字段執行相同的操作。 在此示例中，我們將創建以下字段的條件：
- 計費狀態
- 計費城市
- billing_postcode
- billing_address_1
創建自定義子字段
然後，您需要創建一個新的自定義字段，該字段將在客戶選擇外賣選項時出現，以便您可以將產品發送到其中一個配送中心。 再次，轉到插件的設置並創建一個選擇字段類型。 激活條件複選框，選擇 Delivery 作為父項，然後在Delivery下將其命名為 Take away。 
之後，您需要為配送中心創建地址。 因此，轉到選項部分並添加一些地址。 最後，保存更改。 現在，是時候檢查前端了。 轉到結帳頁面並選擇您剛剛創建的一些選項。 例如，當用戶選擇外賣選項時，您可以選擇其中一個配送中心。 
另一方面，如果他們選擇Delivery ，他們必須輸入他們想要接收產品的地址。 
注意：我們添加了另外兩個字段來顯示信息性消息，每個選項一個，使用我們在其他字段中使用的相同條件。 現在您知道如何使用更複雜的邏輯將條件字段添加到 WooCommerce 結帳。 但是，您可以更進一步，創建更複雜的邏輯。 讓我們看看如何創建鍊式條件。
3.如何使用多個自定義字段和鍊式條件
當您使用許多相關的條件時，事情會變得非常複雜。 鍊式條件是一個很好的例子。 這是當有一個條件應用於一個字段時，該字段在另一個字段上有另一個條件。 為了更好地理解它，您可以想到一個帶有子條件的條件，它有另一個子條件，依此類推。 條件的層次結構級別和您可以使用的自定義字段的數量是無限的，因此您可以創建具有許多依賴項的非常複雜的邏輯。
創建鍊式條件
因此，讓我們使用鍊式條件創建一個更複雜的示例。 假設您想為您的客戶提供在他們的訂單中添加額外包裹的選項。 選項將是紙板、禮物和聚苯乙烯泡沫塑料。 首先，添加一個複選框字段類型，以便客戶可以要求額外包。 
在字段編輯器的價格選項卡中，當客戶選中額外包裝複選框時，輸入您要添加到當前訂單的價格。 然後，您需要研究為客戶提供的包裝選項。 我們將允許購物者選擇多個選項，因此我們將創建一個多選字段類型。 添加標籤並選擇 Extra Package 作為父字段，因此您的條件邏輯如下所示： 
然後，轉到選項選項卡並為您的客戶創建選項。 
在此屏幕上，您可以為每個備選方案設置不同的價格。 由於我們在創建複選框字段時已經設置了價格，因此我們不會在此處使用該選項。 完成後，就該檢查前端了。 如果一切正常，您應該能夠在檢查額外包裝字段時選擇多個選項： 
我們在這裡使用了一個條件來顯示一個多選字段。 現在，讓我們使用父字段的每個選項/值創建一個鍊式條件。
添加多個選項
所以，讓我們選擇禮品包裝選項並應用一些條件。 讓我們創建一個單選自定義字段並如下填寫編輯器。 
我們將為禮品包裝提供幾種紙質印刷品，因此我們將使用此字段讓客戶選擇其中一種。 為此，請轉到“選項”部分並為無線電字段設置紙張打印。 我們已經配置了這樣的選項： 
在前端，您會看到如下內容： 
當我們展示禮品包裝時，最好展示圖片而不是文字。 為了在每個選項中顯示圖像，我們使用了之前上傳到庫中的一些圖像。 您可以使用以下代碼為每個選項的標籤輸入圖像： <img class=”paper-style” src=”#path of your image url”>到目前為止，您已經創建了一個包含兩個級別的鍊式條件邏輯和兩個相互依賴的條件。 額外包裝 ->（條件 1）-> 包裝類型 ->（條件 2）-> 禮品包裝
添加另一個條件級別
讓我們更進一步，添加一個新的條件級別。 在最後一個屏幕截圖中，您將看到一個名為“禮品卡”的新字段，讓用戶可以選擇將專用禮品卡添加到包裹中。 為此，我們將額外收取 4 美元。 最重要的是，我們將使用條件來顯示一個新的自定義字段，並讓用戶輸入他們想要在禮品卡上打印的文本。 因此，讓我們創建一個新的複選框字段並將其設置如下： 
您可以看到我們如何引用相同的父字段，並使用我們在上一步中用於禮品包裝的相同條件。 然後，添加一個文本區域，以便用戶可以鍵入他們想在禮品卡中看到的文本並進行如下配置： 
這是最後一個條件。 它將禮品卡自定義字段作為父字段，將禮品卡的文本作為子字段。 所以現在，當購物者選擇禮品卡選項時，他們會看到： 
這就是您創建複雜邏輯並向 WooCommerce 中的結帳頁面添加幾個條件字段的方式。 我們按此順序鏈接了三個條件和幾個自定義字段：額外包裝 ->（條件 1）-> 包裝類型 ->（條件 2）-> 禮品包裝 ->（條件 3）->禮品卡
4. 使用條件邏輯時不能做什麼
使用來自不同表單的字段
在 WooCommerce 中，條件字段必須引用位於同一表單中的父字段。 結帳頁面上有三種表格：賬單、運輸和附加表格。 它們中的每一個都作為一個單獨的表單工作，並且不能有依賴於另一個表單的字段的條件。
以沒有值的字段為條件（按鈕、標題、消息）
您不能將按鈕、消息和標題字段類型用作父字段，因為它們沒有任何值來檢查是否滿足條件。
編輯字段的 ID 或名稱
要授予與 WooCommerce 的正確集成，您不能編輯字段名稱和 ID。 這適用於默認 WooCommerce 字段和您添加的任何自定義字段。
觸發除顯示/隱藏字段之外的其他操作
在 WooCommerce 中，條件字段可以執行單個操作：當條件為真時顯示指定字段。 這意味著，不幸的是，您無法在滿足條件時添加折扣、產品、編輯訂單或執行任何其他操作。
將條件應用於結帳之外的字段值
最後，條件只能檢查同一表單上另一個結帳字段的值。 因此，您無法檢查檢查產品數量、總價、用戶角色或任何其他不是結帳字段值的條件。
結論
總而言之，條件邏輯可以幫助您改善用戶體驗並提高網站的轉化率。 這就是為什麼在您的 WooCommerce 結帳中添加條件字段是讓您的商店更上一層樓的好方法。
在本指南中，您學習瞭如何使用 WooCommerce Checkout Manager 插件創建和設置其他字段。 我們添加了自定義字段並創建了簡單的條件邏輯以及帶有鍊式條件的更複雜的示例。 最後，我們看看 WooCommerce 中條件邏輯的局限性。
在這裡，我們已經看到了一些例子，但這只是冰山一角。 您可以使用條件字段做很多事情來改善結帳。 因此，我們建議您創建自定義字段並使用條件。
有關如何充分利用結帳的更多信息，您可以查看我們的優化 WooCommerce 結帳指南和禁用郵政編碼驗證的教程。 如果您對在結帳中添加條件字段有任何疑問或疑問，請告訴我們。 我們很樂意為您提供幫助！