多くの商品があるWooCommerceストアを運営していると、顧客が本当に必要としているものを正確に見つけるのが難しくなることがあります。
たとえば、訪問者がショップページにアクセスし、何十もの商品をスクロールしても、適切な商品が十分に見つからなかったために何も購入せずに離れてしまう状況を想像してみてください。
これに対する最善の解決策は、ショップページに直接検索ボックスフィルターを追加することです。これにより、買い物客はキーワードを入力して、別の結果ページに移動することなく、ショップページ上で商品リストを即座に絞り込むことができます。
この記事では、WooCommerceの商品リストに検索ボックスフィルターを追加する方法を説明します。
WooCommerceストアに検索ボックスフィルターを追加する理由
デフォルトでは、WooCommerceには、顧客がショップページで直接商品を検索および絞り込むための方法が含まれていません。
組み込みのWordPress検索は、訪問者を別の検索結果ページに送信します。これはショッピング体験を損ない、顧客をストアから遠ざけます。
検索ボックスフィルターは、顧客がキーワードを入力すると、現在いる場所でリアルタイムに商品リストが絞り込まれるようにすることで、これを解決します。ページのリロードやリダイレクトはありません。
300点の商品がある衣料品店を想像してみてください。フィルターがない場合、「黒いパーカー」を探している顧客は、それを見つけるためにすべての商品をスクロールしなければなりません。検索ボックスフィルターがあれば、キーワードを入力するだけで、数秒で関連商品のみが表示されます。
これにより、買い物客は集中力を維持し、フラストレーションを軽減し、商品の発見と購入が容易になります。ストアオーナーにとっては、通常、コンバージョン率の向上とセッションの放棄の減少につながります。
さて、コーディングなしでストアにこれを追加する方法を見てみましょう。
WooCommerceに検索ボックスフィルターを表示する方法
WooCommerceの商品リストに検索ボックスフィルターを追加する最も簡単な方法は、WPFiltersのようなプラグインを使用することです。
WPFiltersは、WordPress向けの最高のフィルタリングプラグインであり、一行のコードを書かずにWooCommerceストアにAmazonスタイルのフィルターを追加できます。
SearchWPと同じチームによって構築されているため、信頼性が高く、商品データを効率的に処理できることがわかっています。
WPFiltersを使用すると、商品リストをリアルタイムでフィルタリングする専用の検索ボックスを作成できます。また、価格スライダー、カテゴリチェックボックス、またはタグフィルターなどの他のフィルターと組み合わせて、顧客にショッピング体験を完全に制御させることができます。
WPFiltersでできることのいくつか：
- 顧客が入力すると即座に商品をフィルタリングするキーワード検索ボックスを追加する
- 価格範囲スライダー、カテゴリチェックボックス、タグフィルターを作成する
- Gutenbergブロック、ショートコード、またはPHPコードを使用してフィルターを表示する
- タイトルを表示したり、折りたたみ可能にしたりするなど、外観設定をカスタマイズする
それでは、WPFiltersを使用してWooCommerceストアに検索ボックスフィルターを追加する方法を見てみましょう。
ステップ 1: WPFilters のインストールと有効化
まず、SearchWPのウェブサイトにアクセスし、WPFiltersアカウントにサインアップする必要があります。
アカウントを作成したら、ダッシュボードのダウンロードタブに移動します。
ここで、WPFilters ダウンロード ボタンをクリックして、プラグインの ZIP ファイルをコンピューターに保存します。ライセンス キーもこのページからコピーすることをお勧めします。まもなく必要になります。
次に、プラグイン ファイルを WordPress サイトにアップロードしてインストールする必要があります。方法がわからない場合は、WordPress プラグインのインストール方法に関するこのガイドを参照してください。
プラグインを有効化すると、セットアップ ウィザードが表示されます。「開始する」ボタンをクリックして、画面の指示に従ってセットアップを完了してください。
ステップ 2: 新しい検索フィルター要素を作成する
プラグインが有効になったので、検索ボックスフィルターを作成しましょう。
まず、WordPress ダッシュボードから WPFilters » 要素に移動します。
次に、「新規追加」ボタンをクリックして、空のフィルター要素を作成します。
ページの上部でフィルターに名前を付けます。「商品検索またはキーワード検索フィルター」のような名前が良いでしょう。
次に、「フィールド タイプ」セクションを見て、「検索」オプションを選択します。
これにより、顧客が商品リストをフィルターするために入力できるライブテキスト入力ボックスが作成されます。右側のパネルにある 保存 ボタンをクリックしてください。
これで、右側のパネルに検索ボックスのプレビューが表示されます。
ステップ 3: 検索ボックスの設定をカスタマイズする
次に、訪問者にとって検索ボックスの外観と動作をカスタマイズできます。
「コンテナ」セクションまでスクロールします。ここで、「タイトルを表示」オプションをオンにすると、検索ボックスの上にラベルが表示されます。
訪問者がフィルターを非表示にできるようにしたい場合は、「折りたたみ可能」オプションを有効にすることもできます。
設定に満足したら、一番上までスクロールして 保存 ボタンをクリックしてください。
ステップ 4: 検索フィルターを WooCommerce ストアに追加する
検索フィルターの準備ができたので、最後のステップは、顧客が見つけて使用できる場所に配置することです。
WPFilters では、これを実行するためのいくつかの異なる方法を提供しています。
始めるには、要素ページの右上にある 埋め込み ボタンをクリックします。
ポップアップ ウィンドウが表示され、いくつかの埋め込みオプションがあります。
これらには、Gutenberg ブロック、ショートコード、または開発者向けの PHP スニペットが含まれます。
さらに、既存のページを選択するか、新しいページを作成するかを選択することもできます。
もう 1 つの人気のあるオプションは、ショップ ページのサイドバーに検索ボックスを配置することです。これにより、顧客が商品をスクロールしても、フィルターが常に表示されたままになります。
これを行うには、WordPress ダッシュボードから 外観 » ウィジェット に移動します。この手順は、WordPress テーマによって異なる場合があることに注意してください。
ショップ ページで使用されているサイドバー領域を見つけ、+ ボタンをクリックして新しいブロックを追加します。WPFilters 要素 ウィジェットを検索します。
追加したら、設定パネルの WPFilters 要素 設定ドロップダウンからキーワード検索フィルターを選択します。
完了したら、更新 ボタンをクリックします。
次に、WooCommerce ショップ ページにアクセスして、検索ボックスフィルターが機能していることを確認してください。
顧客がキーワードをボックスに入力すると、製品リストはリアルタイムでフィルタリングされ、一致するアイテムのみが表示されます。
WooCommerceに検索ボックスフィルターを追加することに関するよくある質問
1. バリアブル製品でも動作しますか？
はい、動作します。WPFiltersは、通常製品、バリアブル製品、グループ化製品を含む、すべての標準的なWooCommerce製品タイプで動作します。検索ボックスは、製品タイプに関係なく、製品のタイトルと説明に一致します。
2. 価格やカテゴリなどの他のフィルターと組み合わせることはできますか？
もちろんです。複数のフィルター要素を作成し、サイドバーまたは製品グリッドの上に配置できます。たとえば、検索ボックスとカテゴリチェックボックスフィルター、価格帯スライダーを積み重ねて、顧客が複数の角度から一度に結果を絞り込めるようにすることができます。
3. WPFiltersを使用するためにSearchWPをインストールする必要がありますか？
いいえ、WPFiltersはスタンドアロンのプラグインとして機能します。SearchWPとWPFiltersは同じチームによって構築された別々の製品であるため、うまく統合されますが、どちらも機能するために他方を必要としません。
この記事で、WooCommerce製品リストに検索ボックスフィルターを追加する方法を学んでいただけたことを願っています。また、WordPressで複数の分類法でフィルタリングする方法やWordPressにライブオートコンプリート検索を追加する方法に関するガイドも参照してください。
顧客がより速く製品を見つけられるようにする準備はできましたか？ここからWPFiltersを入手できます。
