すべてのWooCommerceストアオーナーはこれを見たことがあります：顧客が「青いランニングシューズ」を検索しても、ブログ記事でいっぱいのページが表示される。または、製品SKUで検索しても、結果がゼロになる。
成功しているオンラインストアは、シームレスなショッピング体験の重要性を理解しています。その体験の中心は、顧客が探しているものを正確に見つけられる能力です。
ここで検索結果ページが重要な役割を果たします。あらゆる商品をどこにあるか正確に把握している熟練した販売員のように、検索結果ページは顧客を目的の商品に簡単に誘導する必要があります。
残念ながら、デフォルトのWooCommerce検索結果ページは、製品を効果的に表示するために必要な洗練さとカスタマイズ性に欠けることがよくあります。それは単にアイテムを見つけるだけでなく、顧客エンゲージメントを高め、コンバージョンを促進するために、可能な限り最良の方法でそれらを提示することです。
このチュートリアルでは、WooCommerceの検索結果ページをカスタマイズして製品を効果的に表示する方法を説明します。これにより、ユーザーエクスペリエンスが向上し、売上が増加します。
WooCommerce検索結果ページをカスタマイズする必要がある理由
検索結果ページの効率性とデザインは、ユーザーエンゲージメントから全体的な収益性まで、すべてに影響を与える可能性があります。それは単なる「あれば嬉しい」機能ではなく、ビジネスを大幅に向上させることができます。
買い物客があなたのストアを検索して悪い結果ページに着地した場合、ダメージはすぐに発生します。検索エクスペリエンスが信頼できないと感じただけでカートを放棄した顧客を見てきましたが、その離脱はすべて、決して起こらなかった売上です。
質の高い検索結果ページが単に有益であるだけでなく、オンラインストアにとって不可欠である理由は次のとおりです。
- 関連性の高い製品が埋もれてしまう。 WooCommerceのデフォルトの検索では、クエリとの一致度に基づいて結果をランク付けしません。「防水ハイキングブーツ」を検索している買い物客は、必要としているものとは全く関係のない最新の投稿が最初に表示される可能性があります。
- SKU、属性、またはカスタムフィールドによる検索が空になる。 WooCommerceのデフォルトエンジンは、製品SKUやカスタムフィールドを検索しません。正確に欲しいものを知っている買い物客は、モデル番号、素材、または製品仕様で検索することがよくありますが、それらの検索はほとんどの場合空になります。
- 結果ページがストアの外観と一致しない。 WordPressのデフォルトの検索テンプレートは、ブログスタイルの抜粋と投稿日を表示します。WooCommerceはこれを製品カード、画像、または価格で自動的に置き換えないため、買い物客はショッピング可能というよりは壊れているように感じるレイアウトを目にします。
- 在庫切れの製品が結果を散らかす。 ショップページから非表示にした在庫切れの製品でも、デフォルトの検索結果に表示されることがあります。買い物客は購入できない製品を見て、信頼を失い、離脱します。
これらは孤立した奇妙な点でもありません。これらは、WordPressが製品だけでなくすべてのコンテンツタイプで検索を処理する方法における、より広範なパターンの部分であり、WordPressの検索を改善する方法に関するガイドでは、サイト全体に適用される修正について説明しています。
WooCommerceで結果ページをカスタマイズする方法を見てみましょう。
WooCommerceの検索を「良い」から「素晴らしい」に変える方法
WordPressのデフォルトの検索機能は、主に投稿タイトル、コンテンツ、抜粋を照合します。重要な製品の詳細が格納されているカスタムフィールド、製品属性、またはSKUは検索しません。
これはWooCommerceストアにとって大きな課題となります。属性やバリエーションなど、多くの重要な製品詳細はカスタム投稿タイプやフィールドとして保存されていますが、デフォルトのWordPress検索では検索プロセスに含まれません。
これらの制限は、SearchWPプラグインを使用することで克服できます。
これはWordPressで利用可能な最も包括的な検索ソリューションであり、WooCommerce専用の拡張機能があり、すべての製品データが適切にインデックス付けされることを保証します。
SearchWPを使用すると、サイト上のほぼすべてのコンテンツを検索可能にし、カスタム検索ルールを設定し、検索アクティビティを追跡して顧客の好みをよりよく理解し、その他多くのことができます。
世界中の50,000以上の企業がSearchWPを利用して検索エクスペリエンスを最適化し、売上を伸ばしています。
SearchWPは、WooCommerceの検索を強化するだけでなく、以下の強力な機能も備えています。
- カスタマイズ可能な結果テンプレート。複数のレイアウトテーマから選択し、リストビューとグリッドビューを切り替え、コードを一行も書かずにサムネイルサイズ、ボタンラベル、ページネーションスタイルを制御できます。
- WooCommerce連携。SearchWPはWooCommerceのデフォルトの製品検索を引き継ぎ、関連性に基づいて結果をランク付けし、在庫切れのフィルタリングを含むストアの表示ルールを自動的に尊重します。
- 属性を認識する製品インデックス。製品タイトル、説明、SKU、カスタムフィールド、カテゴリ、タグなど、SearchWPが検索するフィールドを正確に設定でき、それぞれに独自の関連性重みがあります。
- 関連性でランク付けされた結果。SearchWPは、クエリとの一致度に基づいてすべて結果をスコアリングするため、最も最近公開された製品ではなく、最も関連性の高い製品が常に最初に表示されます。
それでは、SearchWPを使用してWooCommerceの検索結果ページをカスタマイズする方法を見てみましょう。
ステップ1：SearchWPのインストールと有効化
WooCommerceの検索結果ページをカスタマイズする前に、オンラインストア用にSearchWPを設定する必要があります。
そのためには、まずSearchWPのウェブサイトにアクセスし、新規アカウントにサインアップする必要があります。カバーされているWooCommerce連携には、Proプラン以上が必要ですので、そこから始めることをお勧めします。
サインアップしたら、アカウントダッシュボードのダウンロードタブに移動します。そこからSearchWPをダウンロードをクリックしてZIPファイルをコンピュータに保存し、同じ画面からライセンスキーをコピーします。
次に、WordPressでプラグインをインストールしてアクティブ化します。これに慣れていない場合は、WordPressプラグインのインストール方法に関するこのステップバイステップガイドを参照してください。
アクティベーションが成功すると、ウェルカムウィザードが表示されます。オンボーディングウィザードを開始をクリックするだけで、初期設定の構成に役立ちます。
SearchWPがアクティブになり、設定の準備ができました。WordPress管理サイドバーに新しいSearchWPメニューが表示されます。
ステップ2：WooCommerce統合拡張機能をインストールする
WooCommerce Integration拡張機能は、SearchWPを製品カタログに接続し、WooCommerceのデフォルトの検索動作を置き換えるものです。Proプラン以上に含まれています。インストール前に詳細を確認したい場合は、WooCommerce Integrationのドキュメントを参照してください。
WordPressダッシュボードから、SearchWP » Extensionsに移動します。拡張機能リストでWooCommerce Integrationを見つけて、Installをクリックします。
インストールされると、SearchWPは自動的にWooCommerceのフロントエンド製品検索クエリをインターセプトし、その関連性エンジンにルーティングします。
ステップ3：製品検索エンジンの設定
拡張機能がアクティブになったら、WooCommerceストアのどのコンテンツをインデックス化するかをSearchWPに指示する必要があります。WordPressダッシュボードから、SearchWP » Algorithmに移動します。
そこから、デフォルトエンジンのSources & Settingsをクリックします。
利用可能なソースのリストが表示されます。WooCommerce製品を検索可能なソースとして追加するには、Productsを選択します。
目的のソースを選択したら、Doneをクリックします。
Productsが追加されたら、さらにカスタマイズして、検索プロセスに追加の詳細を含めることができます。
どの製品フィールドをSearchWPが検索するかを選択するには、Add/Remove Attributesをクリックするだけです。
新しいウィンドウが開き、エンジン用のさまざまな製品属性を管理できるようになります。
たとえば、検索プロセスに製品タイトル、説明、SKU、カスタムフィールド、およびWooCommerceの組み込みカテゴリ、タグ、属性を含めることができます。
完了したら、Doneボタンをクリックします。
次に、Saveボタンをクリックして、新しい構成に基づいて検索インデックスの再構築を開始します。
完了！基盤は完成しました。次に、WooCommerce検索結果ページをカスタマイズする時間です。
ステップ4：検索結果テンプレートのカスタマイズ
SearchWPの結果テンプレートを使用すると、WooCommerce検索結果ページが買い物客にどのように表示されるかを正確に制御できます。
WordPressダッシュボードから、SearchWP » Templatesに移動します。カスタマイズを開始するにはデフォルトのテンプレートを開くか、または最初からストア固有のテンプレートを作成するにはAdd Newをクリックします。
次に、レイアウトテーマを選択できます。お好みの6つの事前デザインされたレイアウトテーマのいずれかを選択することから始めることができます。
SearchWP検索結果ページは、ウェブサイトの現在のデザインと効果的に融合し、検索結果ページの主要な要素の外観を大幅に制御できます。
全体として、検索結果ページを簡単にカスタマイズするための次のデザイン要素があります。次のものがあります：
- 6つの事前デザインされたテーマ
- 3つのページネーションスタイル
- 2つのレイアウトスタイル
そして数え切れないほどのスタイリングの組み合わせ。次のスタイリングオプションを調整することで、好みに合わせてWooCommerce検索結果ページをカスタマイズできます。
オプションは非常にわかりやすいので、これらの設定を問題なく好きなように変更できるはずです。上記のサンプルデザインに変更が反映されない場合でも心配しないでください。カスタマイズはライブ検索結果ページに表示されます。
WooCommerce検索結果ページのカスタマイズに満足したら、Saveをクリックして変更を保存します。
ステップ5：検索フォームの作成と設定
検索結果ページをニーズに合わせて変更したので、それを実行に移す時が来ました。SearchWPで作成されたすべての検索フォームで、SearchWPの検索結果ページを使用できます。
開始するには、SearchWP » Search Formsに移動し、Add Newをクリックします。このチュートリアルにアクセスして、高度な検索フォームの作成方法について詳しく知ることができます。
これで、検索フォームをニーズに合わせて調整できるようになりました。
検索フォームに名前を付け、レイアウトテーマを選択し、その他のスタイリング変更を行います。
私たちの主な目的は、検索結果ページをこの検索フォームにリンクすることです。
そうするには、下にスクロールして結果ページを見つけ、ドロップダウンからSearchWPを選択します。
さらに2つのフィールドが表示されます。ターゲットページの下で、結果が表示されるページを選択するか、デフォルトのままにしてSearchWPがルーティングを自動的に処理するようにします。テンプレートの下で、ステップ4でカスタマイズした結果テンプレートを選択します。
検索フォームの他の変更が完了したら、右上にある保存をクリックします。
これで、検索結果ページは検索フォームを通じて検索が実行された後にのみ表示されるため、検索フォームを発行するだけです。
そうするには、WooCommerceストアでショップページを編集します。コンテンツエディターで、+アイコンをクリックし、リストからSearchWPフォームブロックを見つけて選択します。
次に、SearchWPフォームブロックのドロップダウンから、数分前に作成した検索フォームを選択します。
これで、希望する場所に検索バーが表示されるはずです。
カスタムWooCommerce検索結果ページ用に作成された検索フォームを表示するには、更新または公開をクリックするだけです。
最後に、ウェブサイトのフロントエンドにアクセスして、カスタム WooCommerce 検索結果ページが機能していることを確認してください。
プロのヒント:ストア専用の結果ページを作成するには、新しいWordPressページを作成し、そこにSearchWP結果ブロックを追加します。ページを公開してから、検索フォーム設定のターゲットページの下でそれを選択します。
すべて設定したら、WooCommerceストアにアクセスして、いくつかのテスト検索を実行します。WooCommerceのデフォルトエンジンでは苦労したであろう検索、たとえば製品の素材、カスタム属性、または製品SKUから始めることをお勧めします。
WooCommerce検索結果ページを次のレベルへ
オンラインストアの検索結果ページの最適化は、ユーザーエクスペリエンスの向上と製品へのエンゲージメントの促進に不可欠です。SearchWP の高度な機能を使用してシームレスに統合できる、検索結果を改善するためのいくつかの効果的な戦略を探りましょう。
- ライブ検索を実装して即座のフィードバックを得る：ライブ検索機能を組み込んで、オンラインストアの検索エクスペリエンスを最新化します。Ajax を利用したライブ検索により、ユーザーは入力中に即座にフィードバックを受け取り、製品の探索を促進する、よりダイナミックで魅力的なブラウジングエクスペリエンスが生まれます。
- 検索結果を戦略的に優先順位付けして並べ替える：戦略的に検索結果を並べ替えることで、最も関連性の高い製品に顧客を誘導できます。WooCommerce 検索結果ページをカスタマイズすると、注目の製品やプロモーションを強調表示して、その可視性を高め、コンバージョンを促進できます。
- 関連製品を表示する：検索結果の横に関連製品を表示すると、エンゲージメントが高まり、発見が促進されます。補完的な製品や類似の製品を提示することで、買い物客に他の製品を探索するように促し、購入の可能性を高めることができます。
- 関連性のないコンテンツを除外する：関連性のない製品やカテゴリを除外することで、検索結果の品質を向上させます。SearchWP の設定を微調整して関連性のないコンテンツを除外することで、検索プロセスを合理化し、ユーザーが必要なものをすばやく簡単に見つけられるようにすることができます。
- 適切に設計された検索フォームを組み込む：適切に設計された検索フォームは、顧客の検索エクスペリエンスを簡素化します。直感的な検索オプションとフィルターを提供することで、ユーザーは検索クエリを絞り込み、特定のニーズを満たす製品を見つけることができます。
よくある質問
1. SearchWPはWooCommerce製品で機能しますか？
はい、SearchWPには専用のWooCommerce統合拡張機能（Pro+）が含まれており、WooCommerceのデフォルトの製品検索を置き換えます。すべてのフロントエンド製品検索クエリをSearchWPの関連エンジンにルーティングし、在庫切れのフィルタリングを含むWooCommerceの表示ルールを自動的に尊重します。私たちはあらゆる規模のWooCommerceストアで使用しており、すぐに信頼性の高い動作をします。
2. WooCommerce検索結果ページに表示されるものを変更するにはどうすればよいですか？
結果に表示される製品を制御するには、SearchWP »アルゴリズムに移動し、エンジンのソースと属性を構成します。製品ソースを追加してから、属性の追加/削除をクリックして、どの製品フィールドが検索されるかを選択します。関連性の重みスライダーを調整して保存をクリックし、次にインデックスの再構築をクリックして変更を適用します。
3. WooCommerce検索結果ページに製品画像を表示できますか？
はい。SearchWP の結果テンプレートを使用すると、検索結果に商品画像、タイトル、説明、価格、および行動喚起ボタンを表示できます。SearchWP » テンプレート に移動し、テンプレートを開いて、ストアのデザインに合わせて画像サイズとレイアウト設定を構成します。私たちの経験では、グリッドレイアウトに切り替えて画像を表示すると、結果ページのショッピングのしやすさが最も大きく向上します。
4. SearchWP は WooCommerce の商品属性と SKU を検索しますか？
SearchWP は、エンジンエディターで構成した商品属性、SKU、カスタムフィールドを含む任意の商品フィールドを検索できます。SearchWP » アルゴリズム に移動し、エンジンを開き、商品ソースの 属性の追加/削除 をクリックして、検索したいフィールドを有効にします。これにより、商品カテゴリ、タグ、カスタムフィールド、および WooCommerce が投稿メタに保存するデータがカバーされます。
5. WooCommerce で SearchWP を使用するにはどのプランが必要ですか？
WooCommerce Integration (Pro+) 拡張機能には、Pro プラン以上が必要です。Standard プランのコア SearchWP プラグインには、すでに結果テンプレート、検索フォーム、およびすべてのインデックス機能が含まれています。Pro にアップグレードすると、WooCommerce Integration と、Easy Digital Downloads および BigCommerce のその他の eコマース拡張機能が追加されます。
次は何をしますか…
これで、関連性がランク付けされ、完全にカスタマイズ可能で、コンバージョンを目的とした WooCommerce 検索結果ページが完成しました。SearchWP は、単一の管理パネルから商品検索、結果レイアウト、および買い物客のエクスペリエンスを処理し、セットアップ全体で 10 分もかかりません。
この記事が、WooCommerce 検索結果ページをカスタマイズする方法を学ぶのに役立ったことを願っています。ストアの検索エクスペリエンスをさらに向上させるために、カスタム WooCommerce 検索ウィジェットを追加する方法 および WordPress 検索結果ページをカスタマイズする方法 に関するガイドも参照してください。
ストアの検索を改善する準備はできましたか？ここから SearchWP を開始できます。
