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

公開: 2022-05-02

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

デフォルトでは、WordPressとWooCommerceの検索機能は制限されています。 商品の検索結果をカスタマイズすることで、売り上げを伸ばし、ビジネスを成長させることができます。

この記事では、WooCommerceの製品検索結果ページをカスタマイズしてユーザーエクスペリエンスを向上させる簡単な方法をいくつか紹介します。

How to Customize WooCommerce Product Search Results Page

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

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

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

これはどのように起こりますか? デフォルトのWooCommerce検索では、投稿とページのタイトル、コンテンツ、抜粋のみがインデックスに登録されます。 検索の実行中は、カスタムフィールド内のコンテンツは考慮されません。

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

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

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

このガイドから学ぶことは次のとおりです。 リンクをクリックすると、興味のあるセクションにスキップできます。

  • WooCommerceの商品データを検索可能にする
  • 検索結果ページに表示する製品のカスタマイズ
  • 製品検索結果をライブモードで表示する
  • 部分一致およびその他の高度な機能の検索

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

最初に行う必要があるのは、SearchWPプラグインをインストールしてアクティブ化することです。 詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

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

注: WooCommerce統合にアクセスするには、少なくともProプランが必要です。

アクティベーション時に、 SearchWP»設定ページにアクセスし、[サポート]タブに切り替えてライセンスキーを入力する必要があります。 SearchWPサイトのアカウントエリアで見つけることができます。

Paste Your SearchWP License Key

次に、WooCommerceIntegration拡張機能をインストールしてアクティブ化する必要があります。

SearchWP Webサイトのアカウント領域からダウンロードして、他のWordPressプラグインと同じようにインストールできます。

Install the WooCommerce Integration Extension

これで、SearchWPカスタム検索エンジンを設定する準備が整いました。

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

Click on the 'Sources & Settings' Button

これにより、[製品]の横のチェックボックスがオンになっていることを確認する必要があるポップアップが表示されます。 これにより、SearchWPでWooCommerce製品のインデックスを作成できます。

WooCommerceの製品レビューはコメントとして保存されます。 レビューを検索可能にする場合は、[コメント]チェックボックスもオンにする必要があります。

Check the Products and Comments Boxes

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

次に、[製品]セクションまで下にスクロールする必要があります。 デフォルトでは、プラグインは製品のタイトル、コンテンツ(説明)、スラッグ、および抜粋(簡単な説明)のみを参照することに注意してください。

Click the 'Add/Remove Attributes' Button in the Products Section

[属性の追加と削除]ボタンをクリックすると、SearchWPの範囲を拡張できます。

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

Add Custom Fields and Taxonomies to the Search Engine

これで[完了]ボタンをクリックできます。これらのカスタムフィールドと分類法がSearchWPの製品セクションに追加されていることに注意してください。

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

Adjust the Importance of Each Attribute

完了したら、先に進み、画面上部の[エンジンの保存]ボタンをクリックして設定を保存します。

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

Click the 'Save Engine' Button

SearchWPは、オンラインストアの検索フォームを自動的に使用します。 ただし、検索フォームを追加する必要がある場合は、カスタムWordPress検索フォームを作成する方法についてのステップバイステップガイドを参照してください。 また、カスタムCSSを使用して結果ページのスタイルを設定する方法についても説明します。

これで、WooCommerceストアにアクセスして検索機能を試すことができます。 商品カテゴリ「パーカー」を検索すると、そのカテゴリのすべての商品が表示されます。

Product Search Results Page Preview

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

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

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

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

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

AeroPress Product Search Results Page

開始するには、SearchWPの[製品]セクションにある[ルールの編集]ボタンをクリックする必要があります。

Click the 'Edit Rules' Button

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

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

Click the 'Add Rule' Button

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

まず、最初のドロップダウンメニューから[エントリを除外する]を選択する必要があります。 次に、[製品の可視性]分類法を選択し、その横のフィールドに「在庫切れ」と入力します。

Creating a Rule to Exclude Out of Stock Products

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

これで、上部にある[エンジンの保存]ボタンを押して変更を保存するだけです。

Click the 'Save Engine' Button

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

ライブモードでの製品検索結果の表示

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

たとえば、Good Dye Youngは、ヘアおよびメイクアップ製品のライブ検索結果を提供しています。

顧客が検索クエリを入力すると、関連する製品や記事がすぐに表示されるため、ユーザーエクスペリエンスが向上します。

Good Dye Young Product Search Results Page

これを自分のストアに追加するには、無料のSearchWP Live AjaxLiteSearchプラグインをインストールしてアクティブ化するだけです。 詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

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

Live Search Preview

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

部分一致およびその他の高度な機能の検索

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

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

Magna-Tiles Product Search Results Page

SearchWPで部分一致を有効にするには、 SearchWP»設定に移動し、[詳細設定]タブをクリックする必要があります。

このページでは、ユーザーが探しているものを簡単に見つけられるようにするいくつかの設定を有効にすることができます。

SearchWP Advanced Settings

必要な次のオプションのいずれかを確認してください。

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

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

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