WooCommerceの製品検索結果ページをカスタマイズしますか?
デフォルトでは、WordPressとWooCommerceの検索機能は限定的です。商品検索結果をカスタマイズすることで、売上を増やし、ビジネスを成長させることができます。
この記事では、WooCommerceの商品検索結果ページをカスタマイズして、より良いユーザーエクスペリエンスを提供するための簡単な方法をいくつかご紹介します。

WooCommerceの商品検索結果ページをカスタマイズする理由
デフォルトでは、WooCommerceには製品検索機能が組み込まれています。しかし、それには重大な制限があります。これにより、顧客が探している製品を見つけられない可能性があります。
その結果、潜在的な売上を失っている可能性があります。顧客が探しているものを見つけられない場合、オンラインストアに戻ってこないかもしれません。
これはどのように起こるのでしょうか?デフォルトのWooCommerce検索は、投稿やページのタイトル、コンテンツ、抜粋のみをインデックスします。カスタムフィールド内のコンテンツは検索時に考慮されません。
これは問題です。なぜなら、WooCommerceの製品データの多くはカスタムフィールドに保存されているからです。その結果、WooCommerceの製品カテゴリ、タグ、レビュー、その他の特別な属性はインデックス化されません。
幸いなことに、WooCommerceの製品検索プラグインを使用することで、この問題を解決できます。
それでは、WooCommerceの商品検索結果ページを改善する方法の例をいくつか見てみましょう。
このガイドから学べることは以下の通りです。興味のあるセクションにスキップするには、リンクをクリックしてください。
WooCommerceの製品データを検索可能にする
まず、SearchWPプラグインをインストールして有効にする必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
SearchWPはWordPress向けの最高のカスタム検索プラグインであり、30,000以上のウェブサイトで使用されています。また、顧客により関連性の高い製品結果を提供するので、WooCommerceに最適なプラグインの1つでもあります。
注意: WooCommerce連携機能を利用するには、Proプラン以上が必要です。
詳細については、完全なSearchWP レビューをご覧ください。
有効化後、SearchWP » 設定ページにアクセスし、「サポート」タブに切り替えてライセンスキーを入力する必要があります。ライセンスキーはSearchWPサイトのアカウントエリアで見つけることができます。

次に、WooCommerce Integration拡張機能をインストールして有効化する必要があります。
SearchWPのウェブサイトのアカウントエリアからダウンロードし、他のWordPressプラグインと同様にインストールできます。

これで、SearchWPカスタム検索エンジンのセットアップ準備が整いました。
単純にSearchWP » 設定ページに移動し、「エンジン」タブが表示されていることを確認してください。そこに表示されたら、「ソースと設定」ボタンをクリックする必要があります。

これによりポップアップが表示されるので、「商品」の横にあるチェックボックスがオンになっていることを確認してください。これにより、SearchWPがWooCommerceの商品をインデックスできるようになります。
WooCommerceの製品レビューはコメントとして保存されます。レビューを検索可能にしたい場合は、「コメント」ボックスもチェックしてください。

これが完了したら、「完了」ボタンをクリックしてポップアップを閉じます。
次に、「商品」セクションまでスクロールダウンする必要があります。デフォルトでは、プラグインは商品タイトル、コンテンツ(説明)、スラッグ、抜粋(短い説明)のみを対象とすることに注意してください。

「属性の追加/削除」ボタンをクリックすることで、SearchWPのリーチを拡張できます。
これにより、検索に含める特定のカスタムフィールドやタクソノミーを含めることができるポップアップが表示されます。このチュートリアルでは、「color」と「size」のカスタムフィールド、および「product categories」と「product tags」のタクソノミーを追加しました。

これで「完了」ボタンをクリックできます。カスタムフィールドとタクソノミーが SearchWP の商品セクションに追加されたことに気づくはずです。
その後、各属性の重みを調整できます。特定の属性を検索結果でより重要にしたい場合は、スライダーを右に動かすだけです。

完了したら、画面上部にある「エンジンを保存」ボタンをクリックして設定を保存してください。
SearchWP はバックグラウンドで検索インデックスの再構築を開始します。その後、プラグインは WooCommerce ストアにより関連性の高い検索結果を提供する準備が整います。

SearchWPは、オンラインストアの検索フォームを自動的に使用します。ただし、検索フォームを追加する必要がある場合は、カスタムWordPress検索フォームの作成方法に関するステップバイステップガイドをご覧ください。これにより、カスタムCSSを使用して結果ページをスタイルする方法もわかります。
これで、WooCommerceストアに移動して検索機能を試すことができます。「hoodies」という製品カテゴリを検索すると、そのカテゴリのすべての製品が表示されます。

詳細については、スマートなWooCommerce製品検索を行う方法に関するガイドをご覧ください。
検索結果ページに表示される商品をカスタマイズする
デフォルトでは、SearchWPはオンラインストアのすべての製品を検索結果に含めます。ただし、表示すべき製品または表示すべきでない製品を指定したい場合があります。
たとえば、廃盤または在庫切れなどの特定の条件に該当する場合、製品を自動的に除外できます。または、セール中の製品や送料無料の製品のみを表示することもできます。
例えば、AeroPress WooCommerce ストアでは、送料無料の商品を検索できます。これは、顧客が購入を促進するための素晴らしいインセンティブとなります。

開始するには、SearchWPの「製品」セクションにある「ルールを編集」ボタンをクリックしてください。

現在、ルールはありません。必要なだけルールを作成できます。
最初のルールを作成するには、「ルールを追加」ボタンをクリックする必要があります。

これで、どの製品を検索結果に表示または除外するかという条件を指定できます。このチュートリアルでは、すべての在庫切れの製品を除外します。
まず、最初のドロップダウンメニューから「除外条件」を選択します。次に、「商品表示」タクソノミーを選択し、その横のフィールドに「outofstock」と入力します。

必要に応じて、「OR」ボタンをクリックして除外すべき追加の条件を追加できます。ルールの追加が完了したら、「完了」ボタンをクリックします。
これで、変更を保存するために、上部にある「エンジンを保存」ボタンを押すだけです。

SearchWPのルールをさらに活用する方法については、WordPress検索から特定のページ、著者などを除外する方法に関するガイドをご覧ください。
製品検索結果をライブモードで表示する
ライブ検索は、顧客がクエリを入力すると同時に検索結果を自動的に表示することで、WooCommerceストアでの検索エクスペリエンスを向上させます。
例えば、Good Dye Youngはヘア&メイクアップ製品でライブ検索結果を提供しています。
顧客が検索クエリを入力している間に、関連性の高い商品や記事がすぐに表示され、ユーザーエクスペリエンスが向上します。

これを独自のストアに追加するには、無料のSearchWP Live Ajax Lite Searchプラグインをインストールして有効にするだけです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
アクティベーションすると、WooCommerceの検索フォームは自動的にライブ検索を提供します。

詳細については、WordPressサイトにライブ検索を追加する方法に関するガイドをご覧ください。
部分一致とその他の高度な機能を見つける
部分一致により、顧客は単語全体を入力しなかったり、正しいスペルを使用しなかったりしても、探しているものを見つけることができます。
例えば、Magna-Tilesのオンラインストアでは部分一致が有効になっています。顧客は商品名の一部を入力するだけで検索結果で見つけることができます。

SearchWP で部分一致を有効にするには、SearchWP » 設定 に移動し、[高度] タブをクリックしてください。
このページでは、ユーザーが探しているものを見つけやすくするための設定を有効にすることができます。

次のオプションのうち、必要なものをすべて選択してください。
- 部分一致でも、検索語句に完全には一致しない結果が表示されます。
- 自動的な「もしかして?」の修正により、オンラインストアのより多くの製品に一致する、わずかに異なる検索語句が提案されます。
- 「引用/フレーズ検索」をサポートすると、ユーザーは正確なフレーズを検索する際に引用符を使用できるようになります。
- 結果で用語をハイライト表示すると、顧客は検索結果で探しているものを見つけやすくなります。
動画チュートリアル
WooCommerceの商品検索結果ページをカスタマイズする方法を読みたくない場合は、代わりにビデオチュートリアルをご覧ください。
このチュートリアルが、WooCommerce製品検索結果ページのカスタマイズ方法を学ぶのに役立ったことを願っています。また、WooCommerceに卸売価格を追加する方法を学ぶか、最高のEメールマーケティングサービスのリストを確認することもできます。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。

リズワン・エラヒ
Elementor を使用して検索結果テンプレートを作成しました。