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

公開: 2018-06-22

このガイドでは、WooCommerce ストアのチェックアウト フィールドの条件付きロジックを構成する方法を学習します。 構成を順を追って説明します。 最後に、WooCommerce チェックアウト条件フィールドを自分で構成できるようになります!

国、都市、または配送の詳細など、いくつかの条件に基づいていくつかのフィールドを非表示にしたいと思ったことはありませんか?

プラグインを使用して WooCommerce で条件付きチェックアウト フィールドを設定する方法を見てみましょう!

目次

  1. WooCommerce チェックアウト フィールド エディター
  2. 条件付きチェックアウト フィールド - 機能
  3. 電話フィールドのチェックアウト条件ロジック
  4. 商品/カテゴリの条件フィールド
  5. VAT 番号の WooCommerce 条件付きロジック
  6. WooCommerce の柔軟な請求書
  7. チェックアウトの条件付き配送方法

WooCommerce チェックアウト フィールド エディター

WooCommerce には条件ロジックが組み込まれていないため、このガイドを進めるにはプラグインが必要です

柔軟なチェックアウト フィールドを作成しました。 プラグインで開発した最も強力な機能の 1 つは、条件付きロジックのサポートです。

世界中の80,000 以上の WooCommerce ストアがプラグインを毎日使用しています。

woocommerce 条件付きロジック プラグインの評価
リポジトリ内の柔軟なチェックアウト フィールド

このプラグインには、新機能の追加やバグの修正が頻繁に行われます。 人々は本当に感謝しています!

このプラグインは、WordPress のルック アンド フィールも利用しており、クリーンなインターフェースにより非常に使いやすいです。

始める前に見てみましょう:

woocommerce チェックアウト フィールド エディターの条件付き
柔軟なチェックアウト フィールド インターフェイス

標準の WooCommerce フィールドを編集したり、新しいカスタム フィールドを追加したり、条件付きロジックを使用したりできます。

さらに、 Flexible Checkout Fields を無料でダウンロードできます。 このビデオを見て、このプラグインが無料版で提供するものを確認してください。

条件付きの WooCommerce チェックアウト フィールド エディター

WooCommerce の条件が簡単になりました。 柔軟なチェックアウト フィールドは、WooCommerce 条件付きロジックを設定するための選択です。

カートに追加または詳細を表示
80,000以上のアクティブなインストール
最終更新日: 2023-03-27
WooCommerce 7.1 - 7.6.x で動作
このプラグインがどのように機能するかを確認してください。 ただし、条件ロジックは Flexible Checkout Fields PRO バージョンでのみ使用できることに注意してください

WooCommerce 条件付きチェックアウト フィールドの機能

次に、電話フィールドの条件付きロジックを構成する方法を示します。

無料バージョンは WooCommerce 条件付きチェックアウト フィールドをサポートしていないため、PRO バージョンが必要になります。

次の 3 つの方法で条件付きロジックを構成できます。

  • 田畑、
  • 製品またはカテゴリ、
  • 選択した配送方法。

それらすべてをお見せします。

チェックボックス フィールドで WooCommerce チェックアウト条件フィールド機能を使用します。 顧客が[電話を表示しますか?] をマークすると、電話フィールドが表示されるように構成します。 チェックボックス。

電話フィールドのチェックアウト条件ロジック

まず、新しいカスタム フィールドを作成する必要があります。

フィールド タイプとして[チェックボックス]を選択します。 表示電話を設定しますか? ラベルとして:

柔軟なチェックアウト フィールド チェックボックス フィールド
柔軟なチェックアウト フィールドに新しいフィールドを追加して、WooCommerce 条件付きロジックを確立します

メタ名は、データベース内のフィールドの名前になります。 デフォルトのものを変更する必要はありません。

[フィールドを追加]をクリックします。 次に、ご覧のとおり、構成画面にフィールドが表示されます。

柔軟なチェックアウト フィールドにより、チェックボックスが追加され、条件付きロジックが確立されます
WooCommerce 条件の追加 - 最初にチェックボックスを追加します

Phone WooCommerce のデフォルト フィールドに移動し、[条件付きロジック]タブをクリックします。

フィールド設定の「条件付きロジック」タブ
WooCommerce 条件の設定

WooCommerce チェックアウトの条件付きフィールドの設定は次の場所にあります。

woocommerce チェックアウト フィールド エディターの条件付き
フィールドの条件ロジック設定

[FCF フィールドに基づいて条件付きロジックを有効にする] チェックボックスをオンにします。

woocommerce の条件付きチェックアウト フィールド
フレキシブル チェックアウト フィールドでのフィールドの条件付きロジック設定

新しいルールを追加します。 ルールでカスタム フィールドを選択します (電話を表示しますか?)。

設定を保存して準備完了です。

見て:

WooCommerce チェックアウト条件フィールド
WooCommerce チェックアウトでの条件付きロジックの設定: 最終結果

私たちが望んでいたように機能します!

製品/カテゴリ チェックアウトの条件付きロジック

フィールドを構成する 2 つ目の方法があります。

製品/カテゴリの条件付きロジックも使用できます。

カスタム プロジェクトで T シャツを販売しているとします。 あなたは、顧客が自分のプロジェクトについて説明できるようにしたいと考えています。 また、プロジェクトについて話し合うための電話番号も必要です。

チェックアウトにはデフォルトの電話フィールドがありますが、顧客が別の電話番号を提供したい場合があります。 このようにして、経理担当者やオフィス マネージャーではなく、マーケティング マネージャーに直接案内することができます。

したがって、次のようなフィールドが必要です。

woocommerce 条件付きロジック設定
チェックアウト時のカスタム プロジェクト フィールド

顧客が 2 番目のオプションを選択すると、別の電話フィールドがポップアップします。

woocommerce チェックアウト フィールド エディターの条件付き
カスタム プロジェクト: 電話番号フィールド

これらのフィールドをこのように構成する方法は?

まず、次のフィールドを追加する必要があります。

woocommerce 条件の設定
カスタム T シャツ プロジェクトの新しいフィールド

(「 T-Shirt Custom Project 」は単純な HTML テキストです。太字にするために <strong> HTML タグを使用しました)。

次に、条件付きロジックを構成する必要があります。

woocommerce 条件付きチェックアウト フィールド ガイド
HTML フィールドの WooCommerce 条件ロジックの構成

ご覧のとおり、カートに T シャツ - カスタム プロジェクト製品が含まれている場合にフィールドを表示するようにプラグインを構成しました。 次の 2 つのフィールドについても、条件付きロジックを同じように構成する必要があります。

ただし、最後のフィールド ( Your phone number ) については、代わりにフィールド条件ロジックを使用する必要があります。 これは、顧客がラジオ フィールドで特定のオプションを選択したときに、プラグインがこのフィールドを表示する必要があるためです。 「プロジェクトについて話し合うために別の電話番号を提供したい」オプションを意味します。

見て:

条件付きチェックアウトフィールド woocommerce
あなたの電話番号フィールドの条件ロジック

また、このフィールドに電話番号検証を使用できます。

検証の設定
電話番号の検証

WooCommerce のチェックアウト検証について詳しくはこちら →

VAT 番号の条件付きチェックアウト フィールド

VAT 番号フィールドにも条件付きロジックを使用できます。

デフォルトでは、WooCommerce は名フィールドフィールドの直後に会社名フィールドを表示します。 フィールドはオプションです。 ただし、顧客が請求書を必要としない限り、非表示にすることをお勧めします。

フィールドを一番下に移動するだけです。 次に、請求書が欲しいチェックボックスとVAT 番号フィールドを簡単に作成できます。

柔軟なチェックアウトフィールドを備えた条件付きのwoocommerceチェックアウトフィールドエディター
WooCommerce 設定の条件付きチェックアウト フィールド

次に、会社名VAT 番号フィールドの条件付きロジックを構成する必要があります。

woocommerceのデフォルトフィールド設定の条件付きロジックタブ
新しいルールを設定して条件付きロジックを確立する

これらのフィールドをRequiredとして設定することを忘れないでください。

最終的な効果を見てください:

woocommerce チェックアウトの woocommerce 条件
条件ロジック付きの請求書チェックボックスが欲しい

おまけ: 別の解決策があります。

WooCommerce の柔軟な請求書

柔軟な請求書プラグインを作成しました。 VAT 番号フィールドを追加するだけでなく、顧客が提供する VAT 番号を検証します。

チェックアウト時のエラー メッセージ
WooCommerce チェックアウトでの VAT 番号の検証

詳細については、次の記事をご覧ください: WooCommerce で VAT 番号フィールドを追加する 3 つの実証済みの方法

PS フィールドの外観を変更しますか? CSS スタイリング ガイドをご覧ください。

WooCommerce の配送方法の条件付きチェックアウト フィールド

この機能を使用すると、顧客がチェックアウト ページで特定の配送方法を選択したときに、チェックアウト フィールドを表示または非表示にすることができます。 これを行うには、 [配送方法に基づいて条件付きロジックを有効にする]をオンにして、新しいルールを追加します

配送方法の woocommerce 条件付きチェックアウト フィールド
条件付きロジックを使用して配送ゾーンと配送方法を構成する

[ルール]セクションに、選択フィールドが表示されます。 最初のものでは、配送方法を表示したくない国を選択します。 配送ゾーンの選択、配送方法を含む配送ゾーンを選択できます。 次に、2 番目のフィールド[配送方法の選択]で、選択した配送ゾーンに含まれる配送方法を選択します。 ここでは、Flexible Shipping プラグインで設定した配送方法を使用しています。

もっと知りたい? WooCommerce の配送方法に基づいてチェックアウト フィールドを非表示または表示する方法に関する完全なガイドを読むことができます。

まとめ

このクイックガイドでは、WooCommerce チェックアウトの条件付きフィールドを構成する方法を学びました。 ご不明な点がございましたら、以下のコメント セクションをご利用ください。

プラグインのすべての機能を確認するには、柔軟なチェックアウト フィールドの製品ページにアクセスしてください。

条件付きの WooCommerce チェックアウト フィールド エディター

WooCommerce の条件が簡単になりました。 柔軟なチェックアウト フィールドは、WooCommerce 条件付きロジックを設定するための選択です。

カートに追加または詳細を表示
80,000以上のアクティブなインストール
最終更新日: 2023-03-27
WooCommerce 7.1 - 7.6.x で動作
フレキシブル チェックアウト フィールドに関するすべてのビデオ チュートリアルを含む YouTube プレイリストを次に示します。

無料デモでプラグインを試すこともできます!