WooCommerceチェックアウトに条件付きフィールドを追加する方法

ストアの条件付きロジックを作成しますか？ あなたは正しい場所に来ました。 このガイドでは、WooCommerceチェックアウトに条件付きフィールドを追加する方法を学習します。

チェックアウトは、eコマースストアにとって最も重要なページの1つです。 同じユーザーをめぐって競合するサイトは何百万もあります。 したがって、競合他社に先んじるためには、チェックアウトを可能な限りカスタマイズして最適化する必要があります。 これを行うための最も興味深いオプションの1つは、 WooCommerceチェックアウトに条件付きフィールドを追加することです。

これらのフィールドを使用すると、条件付きロジックを作成し、購入プロセスをスピードアップするために顧客がチェックアウトページに入力する必要のあるフィールドのみを表示できます。 それでは、条件付きフィールドとは何か、そしてそれらがストアを次のレベルに引き上げるのにどのように役立つかをよりよく理解しましょう。

条件付きフィールドとは何ですか？

条件付きフィールドは、条件が満たされると別のフィールドが表示または非表示になるように条件付きロジックを持つフィールドです。 条件付きロジックを作成するには、親フィールドが取る値に依存する、少なくとも1つの親フィールドと1つ以上の子フィールドが必要です。 たとえば、PayPalまたはクレジットカードで支払う可能性を顧客に提供する場合、ユーザーが[クレジットカード]オプションを選択した場合にのみ、クレジットカードの詳細フィールドを表示したい場合があります。 PayPalで支払いたい場合、これらのフィールドは表示されません。 このようにして、サイトのユーザーエクスペリエンスを向上させ、コンバージョン率を高めます。

条件付きロジックとは何ですか？

始める前に、条件付きロジックが何であるかを明確に理解している必要があるので、もう少し深く掘り下げてみましょう。 条件付きロジックを作成するときは、条件が満たされているかtrueの場合は条件付きフィールドでXを実行し、条件がfalseまたは満たされていない場合はYを実行します。

クレジットカードの例に従って、顧客がクレジットカード支払いオプションを選択した場合にのみクレジットカード詳細フィールドを表示するようにします。 この例は非常に簡単ですが、複数のフィールドタイプを操作したり、複数の条件やアクションを追加したりすると、条件付きロジックがより複雑になる可能性があります。

WooCommerceのチェックアウトページで、単一のフィールドの条件を設定できます。 顧客がそのフィールドに入力した値が設定と照合され、条件が満たされた場合、アクションはフィールドを表示することです。

チェックアウトページで条件付きロジックを作成するには、少なくとも2つのフィールドを使用する必要があります。 親とその子。 値がチェックされるフィールドは、親フィールドと呼ばれます。 そして、条件付きロジックを作成して、条件が真である場合にのみ表示されるようにするのは、子フィールドです。 このガイドで説明するように、親フィールドには複数の子フィールドと複数の条件を適用できます。

WooCommerceチェックアウトに条件付きフィールドを追加する方法

このセクションでは、WooCommerceのチェックアウトに条件付きロジックと条件付きフィールドを使用して追加する方法を説明します。 プログラムで有用な条件付きロジックを作成するには多くのコーディングが必要になるため、プラグインを使用することをお勧めします。 このデモでは、CheckoutManagerを使用します。

このプラグインを使用すると、チェックアウトページのさまざまなタイプのフィールドを追加、カスタマイズ、および削除できます。 さらに、WooCommerceチェックアウトページの複数のカスタムフィールドを使用して、無制限の条件付き検証を適用できます。 80,000以上のアクティブなダウンロードがあり、最高のチェックアウトプラグインの1つです。 ここからダウンロードできる基本機能を備えた無料バージョンと、19米ドルから始まる3つのプレミアムプランがあります。

投稿をさまざまなセクションに分割したので、興味のあるセクションに直接ジャンプできます。これ以上面倒なことはせずに、WooCommerceのチェックアウトページに条件付きフィールドを追加する方法を見てみましょう。

1. 条件付きロジックの作成方法
2. 複数の子カスタムフィールドを持つ条件付きロジック
3. 複数のカスタムフィールドと連鎖条件を使用する方法
4. 条件付きロジックを使用するときにできないこと

1.条件付きロジックの作成方法

これで、条件付きロジックとは何か、およびそれがどのように機能するかが明確になったので、WooCommerce CheckoutManagerプラグインを使用して条件付きロジックフィールドを作成する方法を見てみましょう。 ユーザーが請求フォームの名として「 admin 」と入力したときにメッセージを表示する条件を作成しましょう。 これを行うには、まず、WordPressダッシュボードで[WooCommerce]> [Checkout]> [Billing]に移動します。 そこで、[新しいフィールドの追加]ボタンを押します。

ウィンドウが開きます。 これが新しいフィールドのフィールドエディタです。 そこで、タイプとして[メッセージ]を選択し、[ラベル]、[タイプ]、[メッセージ]などのオプションを入力します。 さらに、右側の列の親フィールドとして名を選択します。 最後に、名の下に「 admin 」と入力し、[保存]をクリックします。

ご覧のとおり、 Firstnameフィールドを親フィールドとして設定しています。 それをテストする時が来ました。 したがって、フロントエンドのチェックアウトページに移動し、名フィールドに「 admin 」と入力します。 このような警告メッセージが表示されるはずです。

これは単純な例ですが、条件には多くのフィールドが含まれる可能性があり、多くの条件とカスタムフィールドを使用すると、状況が非常に複雑になる可能性があります。 したがって、それらを簡単に管理するために、対応するチェックアウトフォーム（請求、出荷、追加）のフィールドマネージャ画面で、どのフィールドに条件があり、親フィールドがあるかを確認できます。

これが、CheckoutManagerを使用してWooCommerceのチェックアウトに条件付きフィールドを追加する方法です。 それでは、もっと複雑な例を見てみましょう。 そしてもちろん、何よりも優れているのは、同じ親フィールドに同じ条件または異なる条件を適用できるカスタムフィールドの数に制限がないことです。

2.複数のカスタム子フィールドを持つ条件付きロジック

ここで、買い物客が配送センターの1つで購入した商品を受け取るか、特定の場所への標準配送を選択するかを選択できるようにしたいとします。 このために、顧客が2つのオプションのいずれかを選択できるように、無線タイプフィールドを使用できます。

新しい親フィールドを作成する

したがって、最初にWooCommerce> Checkoutに移動し、ラジオタイプフィールドを作成します。 この例では、このフィールドを「配信」と呼びます。 次に、オプションを入力します。 それらをテイクアウトとデリバリーと呼びます。 ここでは、各オプションの価格を選択して、デフォルトとして設定することもできます。 選択したチェックボックスに応じて顧客に異なるフィールドを表示したいので、[配信]オプションにデフォルトのWooCommerceチェックアウトフィールドのいくつかを使用します。 このようにして、買い物客は自分の詳細を入力して、選択した住所で商品を受け取ることができます。 したがって、デフォルトのWooCommerceフィールド（州、市、郵便番号、住所）を編集します。 次に、それぞれに同じ条件付きロジックを作成します。 さらに、条件を作成し、親フィールドとしてラジオフィールドタイプDeliveryを選択し、ユーザーが[Delivery]オプションを選択した場合は[State]フィールドを表示します。 もちろん、これらすべてのフィールドまたは一部のフィールドに対して同じことを行うことができます。 この例では、次のフィールドを条件付きで作成します。

• Billing_state
• Billing_city
• Billing_postcode
• 請求先住所1

カスタム子フィールドを作成する

次に、顧客がテイクアウトオプションを選択したときに表示される新しいカスタムフィールドを作成して、製品を配送センターの1つに送信できるようにする必要があります。 もう一度、プラグインの設定に移動し、選択フィールドタイプを作成します。 条件付きチェックボックスをアクティブにし、親として[配信]を選択して、[配信]の下の[削除]と呼びます。 その後、配送センターの住所を作成する必要があります。 したがって、[オプション]セクションに移動して、いくつかのアドレスを追加します。 最後に、変更を保存します。 次に、フロントエンドを確認します。 チェックアウトページに移動し、作成したオプションのいくつかを選択します。 たとえば、ユーザーが[持ち帰り]オプションを選択すると、配送センターの1つを選択できます。 一方、配送を選択した場合は、商品を受け取りたい住所を入力する必要があります。 注：情報メッセージを表示するために、他のフィールドで使用したのと同じ条件を使用して、オプションごとに1つずつ、さらに2つのフィールドを追加しました。 これで、より複雑なロジックを使用してWooCommerceチェックアウトに条件付きフィールドを追加する方法がわかりました。 ただし、もう少し進んで、さらに複雑なロジックを作成することもできます。 連鎖条件を作成する方法を見てみましょう。

3.複数のカスタムフィールドと連鎖条件を使用する方法

関連する多くの条件を処理する場合、状況はかなり複雑になる可能性があります。 連鎖条件はこの良い例です。 別のフィールドに別の条件があるフィールドに条件が適用されている場合です。 それをよりよく理解するために、サブ条件付きの条件付き、別のサブ条件付きの条件付きなどを考えることができます。 条件の階層レベルと使用できるカスタムフィールドの数は無制限であるため、多くの依存関係を持つ非常に複雑なロジックを作成できます。

連鎖条件付きの作成

それでは、連鎖条件を使用して、より複雑な例を作成しましょう。 注文にパッケージを追加するオプションを顧客に提供したいとします。 オプションは、板紙、ギフト、発泡スチロールになります。 まず、チェックボックスフィールドタイプを追加して、顧客が追加パッケージを要求できるようにします。 フィールドエディタの[価格]タブで、顧客が[追加パッケージ]チェックボックスを選択したときに現在の注文に追加する価格を入力します。 次に、顧客に提供するパッケージのオプションに取り組む必要があります。 買い物客が複数のオプションを選択できるようにするため、複数選択フィールドタイプを作成します。 ラベルを追加し、親フィールドとして[Extra Package]を選択して、条件付きロジックが次のようになるようにします。 次に、[オプション]タブに移動し、顧客向けのオプションを作成します。 この画面では、選択肢ごとに異なる価格を設定できます。 チェックボックスフィールドを作成したときにすでに価格を設定しているため、ここではそのオプションを使用しません。 それが終わったら、フロントエンドをチェックします。 すべてが正しく機能する場合は、[追加のパッケージ]フィールドをチェックするときに複数のオプションを選択できるはずです。 ここでは、複数選択フィールドを表示するために単一の条件を使用しました。 次に、親フィールドの各オプション/値を使用して連鎖条件を作成しましょう。

複数のオプションを追加する

それでは、ギフト包装オプションを選択して、いくつかの条件を適用しましょう。 ラジオカスタムフィールドを作成し、次のようにエディタに入力してみましょう。 ギフト包装用のペーパープリントをいくつか提供する予定なので、このフィールドを使用して、お客様がそのうちの1つを選択できるようにします。 これを行うには、[オプション]セクションに移動し、ラジオフィールドのペーパープリントを設定します。 次のようなオプションを構成しました。 フロントエンドには、次のようなものが表示されます。 ギフト包装を表示しているので、テキストではなく画像を表示することをお勧めします。 各オプションで画像を表示するために、以前にライブラリにアップロードしたいくつかの画像を使用しました。 次のコードを使用して、各オプションのラベルの画像を入力できます。 <img class=”paper-style” src=”#path of your image url”>これまでに、2つのレベルを含む連鎖条件付きロジックを作成しました。互いに依存する2つの条件。 追加のパッケージ->（条件1）->パッケージタイプ->（条件2）->ギフト包装

別の条件付きレベルの追加

もう少し進んで、新しいレベルの条件を追加しましょう。 最後のスクリーンショットでは、パッケージに専用のギフトカードを追加するオプションをユーザーに提供するギフトカードと呼ばれる新しいフィールドがあることがわかります。 そのために、追加の$ 4を請求します。 さらに、条件を使用して新しいカスタムフィールドを表示し、ユーザーがギフトカードに印刷するテキストを入力できるようにします。 それでは、新しいチェックボックスフィールドを作成し、次のように設定しましょう。 同じ親フィールドを参照していて、前の手順でギフト包装に使用したのと同じ条件を使用していることがわかります。 次に、テキスト領域を追加して、ユーザーがギフトカードに表示したいテキストを入力し、次のように構成できるようにします。 これが最後の条件です。 親フィールドとしてギフトカードカスタムフィールドがあり、子フィールドとしてギフトカードのテキストがあります。 そのため、買い物客がギフトカードオプションを選択すると、次のように表示されます。 これが、複雑なロジックを作成し、WooCommerceのチェックアウトページにいくつかの条件付きフィールドを追加する方法です。 3つの条件といくつかのカスタムフィールドをこの順序でチェーンしました：追加のパッケージ->（条件1）->パッケージタイプ->（条件2）->ギフト包装->（条件3）->ギフトカード

4.条件付きロジックを使用するときにできないこと

さまざまな形式のフィールドを使用する

WooCommerceでは、条件付きフィールドは同じフォームにある親フィールドを参照する必要があります。 チェックアウトページには、請求、配送、追加の3つのフォームがあります。 それぞれが個別のフォームとして機能し、別のフォームのフィールドに依存する条件を設定することはできません。

値のないフィールド（ボタン、見出し、メッセージ）の条件付き

ボタン、メッセージ、および見出しフィールドタイプは、条件が満たされているかどうかを確認する値がないため、親フィールドとして使用できません。

フィールドのIDまたは名前を編集します

WooCommerceとの適切な統合を許可するために、フィールド名とIDを編集することはできません。 これは、デフォルトのWooCommerceフィールドと追加するカスタムフィールドの両方に適用されます。

フィールドの表示/非表示以外の別のアクションをトリガーします

WooCommerceでは、条件付きフィールドは単一のアクションを実行できます。条件がtrueの場合に指定されたフィールドを表示します。 つまり、残念ながら、条件が満たされた場合、割引や商品の追加、注文の編集、その他のアクションを実行することはできません。

チェックアウト外のフィールド値に条件を適用します

最後に、条件文は同じフォームの別のチェックアウトフィールドの値のみをチェックできます。 そのため、商品の数量、合計金額、ユーザーの役割など、チェックアウトフィールドの値以外のものをチェックする条件をチェックすることはできません。

結論

全体として、条件付きロジックは、ユーザーエクスペリエンスを向上させ、サイトのコンバージョン率を高めるのに役立ちます。 そのため、WooCommerceチェックアウトに条件付きフィールドを追加することは、ストアを次のレベルに引き上げる優れた方法です。

このガイドでは、WooCommerce CheckoutManagerプラグインを使用して追加のフィールドを作成および設定する方法を学習しました。 カスタムフィールドを追加し、単純な条件付きロジックと、連鎖条件付きのより複雑な例の両方を作成しました。 最後に、WooCommerceの条件付きロジックの制限について見てきました。

ここでは、いくつかの例を見てきましたが、それは氷山の一角にすぎません。 チェックアウトを改善するために条件付きフィールドでできることはたくさんあります。 したがって、カスタムフィールドを作成し、条件を試してみることをお勧めします。

チェックアウトを最大限に活用する方法の詳細については、WooCommerceチェックアウトを最適化するためのガイドと郵便番号の検証を無効にするためのチュートリアルを確認してください。 チェックアウトに条件付きフィールドを追加するための質問や疑問がある場合は、お知らせください。 喜んでお手伝いさせていただきます！