WooCommerceにAjax検索を追加する方法をお探しですか？
これにより、訪問者は即座に検索結果を取得し、探している商品をより速く見つけることができます。
このチュートリアルでは、ストアにAjax検索を追加するメリットと、最小限の労力でそれを実現する方法について説明します。
さあ、始めましょう！
WooCommerceのAjax検索とは
まず、Ajax検索とは何かを明確にしましょう。Ajaxは、ページをリロードせずにデータを転送できるため、ユーザーはスムーズな体験を得られます。
その結果、Ajaxを使用すると、サイト所有者はページをリロードせずにリアルタイムで検索結果を表示できます。
ライブ検索はほとんどのモダンなeコマースサイトで一般的であり、訪問者が期待するものです。
オンラインで成功し、売上を伸ばしたいのであれば、WooCommerceストアにこれを追加することが重要です。
WooCommerceストアにAjax検索を追加する理由
Ajaxライブ検索がビジネスにどのように役立つかを詳しく見てみましょう。
- 訪問者が探しているものを予測しようとし、適切な商品をより速く見つけるのに役立ちます
- 訪問者の検索体験をよりインタラクティブにし、さらに検索するように促します
- 訪問者がキーワードを増やすにつれて検索が絞り込まれるのを確認できるため、スマート検索だと感じさせます
- 訪問者がサイトに長く滞在し、満足して離れるようになり、Googleがサイトをより高くランク付けするためのポジティブなシグナルとなります
WooCommerceストアにAjax検索を追加する利点について説明した後、その方法を見てみましょう。
WooCommerceストアにライブAjax検索を追加する方法
WooCommerceサイトにライブAjax検索を追加する最も簡単な方法は、SearchWPプラグインを使用することです。
これは、WooCommerceストアでの検索方法を完全にカスタマイズできる、ナンバーワンのWordPress検索プラグインです。
たとえば、数回のクリックでサイトにAjax検索を追加したり、商品属性を検索可能にしたり、特定の商品の検索結果を除外したりできます。
すでに50,000以上のサイト所有者がSearchWPを使用して、サイトの検索を改善し、訪問者に最も関連性の高い検索結果を提供しています。
SearchWPがこれほど人気のあるその他の機能は次のとおりです。
- 検索追跡：顧客がサイトで探しているもののデータを収集し、需要をより深く理解して新しい商品アイデアを考案します。
- 複数の検索エンジン：独自のルールを持つ追加の検索エンジンを作成し、ビジネスニーズに合わせてサイトの個々の検索フォームに接続します。
- 検索結果の完全な制御：検索結果をWooCommerce商品のみに制限し、顧客が適切な商品をより速く見つけて売上を伸ばすのに役立ちます。
- あいまい検索：WordPressが、完全一致がない場合に部分一致を検索するようにし、顧客がタイプミスをした場合でも探しているものを見つけられるようにします。
SearchWPがWooCommerceストアにAjax検索を追加するための最良のソリューションである理由を学んだら、次にその方法を見てみましょう。
ステップ1：SearchWPをインストールしてサイトで有効化する
最初のステップは、ウェブサイトにアクセスして新規アカウントにサインアップすることで、SearchWPプラグインのコピーを入手することです。
次に、SearchWPアカウントに移動し、ダウンロードタブに移動する必要があります。
そこに移動したら、SearchWPをダウンロードボタンをクリックするだけで、プラグインZIPファイルをコンピューターにダウンロードできます。
ダウンロードが完了したら、同じタブでライセンスキーをコピーすることもお勧めします。
次に、ダウンロードしたSearchWP ZIPファイルをサイトにアップロードします。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関する詳細なチュートリアルをご覧ください。
有効化すると、ウェルカム画面とセットアップウィザードが表示されます。「オンボーディングウィザードを開始」ボタンをクリックし、画面の指示に従ってください。
さて、次のステップは、数回クリックするだけでWooCommerceストアにライブ検索を追加できるいくつかのSearchWP拡張機能をインストールすることです。
ステップ2：SearchWP拡張機能をインストールする
開始するには、まずWordPressダッシュボードからSearchWP »拡張機能に移動する必要があります。
このページでは、このプラグインの機能をさらに拡張する多くの便利なSearchWP拡張機能を見つけることができます。
最初にインストールする必要がある拡張機能は、WooCommerce統合拡張機能です。この拡張機能により、SearchWPをWooCommerceと統合できるため、ストアでの検索を完全にカスタマイズできます。
これを行うには、WooCommerce統合拡張機能に移動し、インストールボタンをクリックします。
次のステップは、ライブ検索拡張機能をインストールすることです。この拡張機能を使用すると、コーディングなしでクリックするだけでサイトでライブAjax検索を有効または無効にできます。
インストールするには、単にライブ検索拡張機能に移動し、インストールをクリックします。
これで完了です。これで、WooCommerceストアのすべての既存の検索フィールドにライブモードで検索結果が表示されます。
追加のページビューを獲得できるように、ショップページにAjax検索フォームを追加する方法も見てみましょう。
ステップ3：WooCommerceショップページにAjax検索フォームを追加する
まず、WordPressダッシュボードの左側のパネルにあるページをクリックする必要があります。
ここでは、WooCommerceストアのすべてのページを確認できます。
ここから、WooCommerceのショップページを見つけてクリックし、WordPressコンテンツエディターで開きます。
ページにSearchWP検索ブロックを追加するには、まずプラスボタンをクリックします。
次に、SearchWPフォームブロックを検索し、クリックしてショップページに追加します。
次に、コンテンツエディターにSearchWPフォームブロックが表示されます。
次に、ドロップダウンメニューから検索フォームを選択できます。カスタムフォームを作成するには、WordPressで検索フォームを作成する方法に関するガイドを参照してください。
完了したら、WordPressコンテンツエディターの右上隅にある保存ボタンをクリックして、行った変更を保存します。
ショップページにライブAjax検索フォームを追加した後、それがどのように機能するかを見てみましょう。
ステップ4：新しいAjax WooCommerce検索をテストする
これを行うには、サイトにアクセスして検索を実行してください。
たとえば、テスト用のWooCommerceサイトで「Beanie」を検索します。
商品名を入力しようとすると、ライブ検索が機能していることに気づくでしょう。
お客様が適切な商品を見つけ、ユーザーエクスペリエンスを向上させ、売上を増加させるのに役立ちます。
この記事が、WooCommerceにAjax検索を追加する方法を学ぶのに役立ったことを願っています。また、WooCommerceで商品タグで検索する方法やスマートなWooCommerce商品検索を作成する方法に関するガイドも参照してください。
数回のクリックでサイトにライブ検索を追加する準備はできましたか？ここからSearchWPを入手できます。
