最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WooCommerceの商品検索結果ページをカスタマイズする方法

WooCommerceの製品検索結果ページをカスタマイズしますか?

デフォルトでは、WordPressとWooCommerceの検索機能は限定的です。商品検索結果をカスタマイズすることで、売上を増やし、ビジネスを成長させることができます。

この記事では、WooCommerceの商品検索結果ページをカスタマイズして、より良いユーザーエクスペリエンスを提供するための簡単な方法をいくつかご紹介します。

WooCommerceの商品検索結果ページをカスタマイズする方法

WooCommerceの商品検索結果ページをカスタマイズする理由

デフォルトでは、WooCommerceには製品検索機能が組み込まれています。しかし、それには重大な制限があります。これにより、顧客が探している製品を見つけられない可能性があります。

その結果、潜在的な売上を失っている可能性があります。顧客が探しているものを見つけられない場合、オンラインストアに戻ってこないかもしれません。

これはどのように起こるのでしょうか?デフォルトのWooCommerce検索は、投稿やページのタイトル、コンテンツ、抜粋のみをインデックスします。カスタムフィールド内のコンテンツは検索時に考慮されません。

これは問題です。なぜなら、WooCommerceの製品データの多くはカスタムフィールドに保存されているからです。その結果、WooCommerceの製品カテゴリ、タグ、レビュー、その他の特別な属性はインデックス化されません。

幸いなことに、WooCommerceの製品検索プラグインを使用することで、この問題を解決できます。

それでは、WooCommerceの商品検索結果ページを改善する方法の例をいくつか見てみましょう。

このガイドから学べることは以下の通りです。興味のあるセクションにスキップするには、リンクをクリックしてください。

WooCommerceの製品データを検索可能にする

まず、SearchWPプラグインをインストールして有効にする必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

SearchWPはWordPress向けの最高のカスタム検索プラグインであり、30,000以上のウェブサイトで使用されています。また、顧客により関連性の高い製品結果を提供するので、WooCommerceに最適なプラグインの1つでもあります。

注意: WooCommerce連携機能を利用するには、Proプラン以上が必要です。

詳細については、完全なSearchWP レビューをご覧ください。

有効化後、SearchWP » 設定ページにアクセスし、「サポート」タブに切り替えてライセンスキーを入力する必要があります。ライセンスキーはSearchWPサイトのアカウントエリアで見つけることができます。

SearchWPライセンスキーを貼り付けます

次に、WooCommerce Integration拡張機能をインストールして有効化する必要があります。

SearchWPのウェブサイトのアカウントエリアからダウンロードし、他のWordPressプラグインと同様にインストールできます。

WooCommerce連携拡張機能をインストール

これで、SearchWPカスタム検索エンジンのセットアップ準備が整いました。

単純にSearchWP » 設定ページに移動し、「エンジン」タブが表示されていることを確認してください。そこに表示されたら、「ソースと設定」ボタンをクリックする必要があります。

「ソースと設定」ボタンをクリックします

これによりポップアップが表示されるので、「商品」の横にあるチェックボックスがオンになっていることを確認してください。これにより、SearchWPがWooCommerceの商品をインデックスできるようになります。

WooCommerceの製品レビューはコメントとして保存されます。レビューを検索可能にしたい場合は、「コメント」ボックスもチェックしてください。

商品とコメントのボックスをチェック

これが完了したら、「完了」ボタンをクリックしてポップアップを閉じます。

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

商品セクションの「属性の追加/削除」ボタンをクリックします

「属性の追加/削除」ボタンをクリックすることで、SearchWPのリーチを拡張できます。

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

カスタムフィールドとタクソノミーを検索エンジンに追加する

これで「完了」ボタンをクリックできます。カスタムフィールドとタクソノミーが SearchWP の商品セクションに追加されたことに気づくはずです。

その後、各属性の重みを調整できます。特定の属性を検索結果でより重要にしたい場合は、スライダーを右に動かすだけです。

各属性の重要度を調整する

完了したら、画面上部にある「エンジンを保存」ボタンをクリックして設定を保存してください。

SearchWP はバックグラウンドで検索インデックスの再構築を開始します。その後、プラグインは WooCommerce ストアにより関連性の高い検索結果を提供する準備が整います。

「エンジンの保存」ボタンをクリック

SearchWPは、オンラインストアの検索フォームを自動的に使用します。ただし、検索フォームを追加する必要がある場合は、カスタムWordPress検索フォームの作成方法に関するステップバイステップガイドをご覧ください。これにより、カスタムCSSを使用して結果ページをスタイルする方法もわかります。

これで、WooCommerceストアに移動して検索機能を試すことができます。「hoodies」という製品カテゴリを検索すると、そのカテゴリのすべての製品が表示されます。

商品検索結果ページプレビュー

詳細については、スマートなWooCommerce製品検索を行う方法に関するガイドをご覧ください。

検索結果ページに表示される商品をカスタマイズする

デフォルトでは、SearchWPはオンラインストアのすべての製品を検索結果に含めます。ただし、表示すべき製品または表示すべきでない製品を指定したい場合があります。

たとえば、廃盤または在庫切れなどの特定の条件に該当する場合、製品を自動的に除外できます。または、セール中の製品や送料無料の製品のみを表示することもできます。

例えば、AeroPress WooCommerce ストアでは、送料無料の商品を検索できます。これは、顧客が購入を促進するための素晴らしいインセンティブとなります。

AeroPress製品検索結果ページ

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

「ルールの編集」ボタンをクリック

現在、ルールはありません。必要なだけルールを作成できます。

最初のルールを作成するには、「ルールを追加」ボタンをクリックする必要があります。

「ルールを追加」ボタンをクリックします

これで、どの製品を検索結果に表示または除外するかという条件を指定できます。このチュートリアルでは、すべての在庫切れの製品を除外します。

まず、最初のドロップダウンメニューから「除外条件」を選択します。次に、「商品表示」タクソノミーを選択し、その横のフィールドに「outofstock」と入力します。

在庫切れ商品の除外ルールを作成する

必要に応じて、「OR」ボタンをクリックして除外すべき追加の条件を追加できます。ルールの追加が完了したら、「完了」ボタンをクリックします。

これで、変更を保存するために、上部にある「エンジンを保存」ボタンを押すだけです。

「エンジンの保存」ボタンをクリック

SearchWPのルールをさらに活用する方法については、WordPress検索から特定のページ、著者などを除外する方法に関するガイドをご覧ください。

製品検索結果をライブモードで表示する

ライブ検索は、顧客がクエリを入力すると同時に検索結果を自動的に表示することで、WooCommerceストアでの検索エクスペリエンスを向上させます。

例えば、Good Dye Youngはヘア&メイクアップ製品でライブ検索結果を提供しています。

顧客が検索クエリを入力している間に、関連性の高い商品や記事がすぐに表示され、ユーザーエクスペリエンスが向上します。

Good Dye Young 製品検索結果ページ

これを独自のストアに追加するには、無料のSearchWP Live Ajax Lite Searchプラグインをインストールして有効にするだけです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

アクティベーションすると、WooCommerceの検索フォームは自動的にライブ検索を提供します。

ライブ検索プレビュー

詳細については、WordPressサイトにライブ検索を追加する方法に関するガイドをご覧ください。

部分一致とその他の高度な機能を見つける

部分一致により、顧客は単語全体を入力しなかったり、正しいスペルを使用しなかったりしても、探しているものを見つけることができます。

例えば、Magna-Tilesのオンラインストアでは部分一致が有効になっています。顧客は商品名の一部を入力するだけで検索結果で見つけることができます。

Magna-Tiles 製品検索結果ページ

SearchWP で部分一致を有効にするには、SearchWP » 設定 に移動し、[高度] タブをクリックしてください。

このページでは、ユーザーが探しているものを見つけやすくするための設定を有効にすることができます。

SearchWP 高度な設定

次のオプションのうち、必要なものをすべて選択してください。

  • 部分一致でも、検索語句に完全には一致しない結果が表示されます。
  • 自動的な「もしかして?」の修正により、オンラインストアのより多くの製品に一致する、わずかに異なる検索語句が提案されます。
  • 「引用/フレーズ検索」をサポートすると、ユーザーは正確なフレーズを検索する際に引用符を使用できるようになります。
  • 結果で用語をハイライト表示すると、顧客は検索結果で探しているものを見つけやすくなります。

動画チュートリアル

WooCommerceの商品検索結果ページをカスタマイズする方法を読みたくない場合は、代わりにビデオチュートリアルをご覧ください。

WPBeginnerを購読する

このチュートリアルが、WooCommerce製品検索結果ページのカスタマイズ方法を学ぶのに役立ったことを願っています。また、WooCommerceに卸売価格を追加する方法を学ぶか、最高のEメールマーケティングサービスのリストを確認することもできます。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterFacebookでも私たちを見つけることができます。

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

1 CommentLeave a Reply

返信する

コメントいただきありがとうございます。すべてのコメントは、コメントポリシーに従ってモデレーションされ、メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で意味のある会話をしましょう。