ドロップダウン項目に空のドロップダウンを追加する方法

はじめに

支払いフィールドに空のドロップダウンメニューを追加して、価格をゼロに表示したいですか?支払いフィールドからドロップダウンアイテムフィールドを使用する場合、アイテムラベルの後に価格を表示オプションを有効にすると、空の選択項目には自動的に0.00が表示されます。

このガイドでは、ゼロ価格表示のないクリーンな"-Select-"オプションを維持する方法を紹介します。

デフォルトでは、ゼロ価格がフォームに表示されます。

問題を理解する

支払いフォームにドロップダウンアイテムフィールドを作成し、アイテムラベルの後に価格を表示するオプションを有効にすると、空の選択項目(-Select-など)は自動的に-Select- $0.00と表示されます。これは顧客にとって理想的な表示ではないかもしれません。

このガイドのコード・スニペットを使えば、次のことができる:

  • 空の選択範囲をドロップダウンの一番上にキープする。
  • 0.00ドル」の価格表示を削除する
  • 他のすべてのオプションの価格表示を維持する

フォームの設定

まず、フォームを作成し、Payment FieldsセクションからDropdown Itemsフィールドを追加します。

フォームの作成については、最初のフォーム作成ガイドをご覧ください。

ドロップダウン項目フィールドに

  1. 通常のオプションをそれぞれの価格とともに追加する
  2. リストの一番上に空のオプション(-Select-のような)を追加する。
  3. フィールド設定で、アイテムラベルの後に価格を表示するチェックボックスを有効にします。
フォームに空のドロップダウンリストを追加するだけです。

コード・スニペットの追加

このコード・スニペットをあなたのサイトに追加して、空の選択項目から価格表示を削除してください:

コードスニペットをサイトに追加する際にヘルプが必要な場合は、WPForms用のカスタムPHPまたはJavaScriptを追加するガイドをご覧ください。

このコードは次のように機能する:

  1. データ量が0.00のドロップダウンオプションを探す
  2. テキストを-Select-に置き換える。
  3. このオプションのみ価格表示を削除
これで、フォームの最初のドロップダウンメニューに「選択」が価格なしで表示されるようになりました。

コードの 9行目を修正することで、「-Select-」テキストをカスタマイズすることができます。例えば、"Choose an option "に変更するには、その行を次のように更新する:

jQuery('.wpforms-payment-priceオプション[data-amount="0.00"]').text('オプションを選択');

これで終わりです!次に、フォームのドロップダウンフィールドをさらにカスタマイズしたいですか?ドロップダウンフィールドのスタイリングに関するガイドですべてのステップを詳しく説明しています。