DiviでWooCommerceの商品を検索する方法を知りたいですか？
これは、オンラインで成功したい場合に修正する必要がある、Diviを主要なページビルダーとして使用するすべてのWooCommerceストアオーナーにとっての問題です。
このチュートリアルでは、簡単な手順でDiviサイトでWooCommerceの商品による検索を有効にする方法を説明します。
さあ、始めましょう！
DiviでWooCommerceの商品を検索する理由
デフォルトのWordPressの検索エンジンはかなり弱く、顧客に肯定的なユーザーエクスペリエンスを提供したい場合、最良の選択肢ではありません。
たとえば、次のことができません。
- 検索を実行する際に商品の属性を考慮する
- 顧客が商品のタグで検索できるようにする
- 商品のカテゴリに注意を払う
- 正確な一致がない場合に部分一致を探す
- 訪問者の検索アクティビティに関するデータを収集する
- その他多数…
Diviは同じデフォルトのWordPress検索エンジンを使用するページビルダープラグインであるため、Diviの検索モジュールも同様です。
幸いなことに、WooCommerceサイトでの検索をよりスマートにし、訪問者が探している商品をより早く見つけられるようにする方法があります。
コーディングや技術的なスキルを必要とせずに、数回のクリックでそれがどのようにできるかを見てみましょう。
DiviでWooCommerceの商品を検索する方法
DiviでWooCommerceの商品を検索する最も簡単で迅速な方法は、SearchWPを使用することです。
SearchWPは、WordPressの検索を改善するのに役立つ多くの機能を備えた、初心者向けで強力なプラグインです。
これにより、WooCommerceの商品を検索可能にするだけでなく、ビジネスニーズに合わせて検索を完全にカスタマイズできます。
たとえば、検索を制限したり、商品のタグで検索を有効にしたり、検索結果で特定の商品を優先したりできます。
30,000以上のWordPressウェブサイトの所有者がSearchWPを使用して、訪問者に最も関連性の高い検索結果を提供しています。
このプラグインが非常に人気のあるその他の機能の一部を次に示します。
- ライブ検索結果。顧客が探しているものをより早く見つけ、売上を伸ばすのに役立つように、ライブモードで検索結果を提供します。
- 検索アクティビティ分析。訪問者の検索行動に関する詳細なレポートを取得して、入力した検索語、最も人気のある検索結果などを確認します。
- カスタム検索フォーム。複数のカスタム検索エンジンを追加し、サイト全体にわたる個々の検索フォームに接続します。
- 検索結果の制御。サイトの検索結果の順序を、特定ページを宣伝してページビューを増やす方法で変更します。
これで、SearchWPを使用してDiviでWooCommerceの商品を検索する方法について説明します。
ステップ1：SearchWPのインストールと有効化
まず、SearchWPのコピーを入手する必要があります。
プラグインのコピーを入手したら、SearchWPアカウントに移動し、ダウンロードタブに移動します。
次に、SearchWPをダウンロードボタンを押し、プラグインのZIPファイルをコンピューターにダウンロードします。
ダウンロード後、同じタブでプラグインライセンスキーをコピーしてください。
次に、SearchWP ZIPファイルをサイトにアップロードしてプラグインをインストールする必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するこの詳細なチュートリアルをご覧ください。
プラグインをインストールしたら、ライセンスキーでコピーをアクティブ化する必要があります。
これを行うには、WordPressダッシュボードに移動し、トップパネルのSearchWPボタンの下にあるライセンスのアクティブ化をクリックします。
次に、SearchWPライセンスキーをライセンスフィールドに貼り付け、アクティブ化をクリックします。
ライセンスをアクティブ化した後、次のステップはWooCommerce統合拡張機能をインストールすることです。
ステップ2：WooCommerce統合拡張機能をインストールする
この拡張機能を使用すると、SearchWPをWooCommerceとシームレスに統合し、製品検索を完全に制御できます。
インストールするには、WordPressダッシュボードの左側パネルにあるSearchWP »拡張機能に移動します。
次に、WooCommerce統合拡張機能を見つけて、インストールをクリックします。
拡張機能をインストールしてアクティブ化した後、DiviでWooCommerce製品を検索できるようになります。
ステップ3：検索エンジンの検索ソースをカスタマイズする
これを行うには、まずダッシュボードの左側パネルにあるSearchWPボタンをクリックします。
その後、SearchWP設定のエンジンタブに移動します。ここで検索エンジンを管理およびカスタマイズできます。
検索エンジンとは、サイトでの検索を実行する際にWordPressが従う設定とルールのセットです。
SearchWPを使用すると、DiviでWooCommerce製品を検索できるようにするなど、ビジネスニーズに合わせて完全にカスタマイズできます。
さらに、特定の製品を検索結果から非表示にしたり、製品SKUによる検索を有効にしたり、WordPressに特定の検索を実行させたり、その他多くのことができます。
DiviサイトでWooCommerce製品を検索可能にするには、それらをアクティブな検索ソースにする必要があります。
これを行うには、ソースと設定ボタンをクリックします。
次に、製品ソースの横にあるチェックボックスをオンにしてアクティブにし、完了を押して変更を保存します。
これで、DiviサイトでWooCommerce製品が検索されるようになります。
サイトでの検出可能性を高めるために、タグ、カテゴリ、カスタムフィールドなどのWooCommerce製品属性も検索可能にしましょう。
開始するには、製品検索ソースセクションの下にある属性の追加/削除ボタンを押します。
次に、カスタムフィールドフィールドをクリックします。
次に、ドロップダウンメニューから任意のメタキーオプションを選択します。
これはSearchWPのショートカットであり、サイトにあるカスタムフィールドのコンテンツを自動的に検索可能にすることができます。
次のステップは、製品タグとカテゴリによる検索を有効にすることです。
これを行うには、分類法フィールドをクリックし、製品タグと製品カテゴリの2つのオプションを選択します。
検索可能な商品属性の管理が終了したら、Products の検索ソースに加えられた変更を保存するために Done を押してください。
最後のステップは、カスタマイズした検索エンジンを保存することです。これは、右上にある Save Engines ボタンを押すことで実行できます。
次に、Rebuild Index ボタンをクリックして、WordPress に WooCommerce 商品を再インデックスさせ、それらがどのような属性を持っているかを確認します。
これで完了です。Divi WooCommerce 検索ははるかに賢くなり、顧客は適切な商品を簡単に見つけられるようになりました。
新しい Divi 検索ページを作成し、強化された検索バーを追加しましょう。
ステップ 4: Divi ページに検索ウィジェットを追加する
開始するには、WordPressダッシュボードの Pages » Add New に移動します。
ページにタイトルを追加し、Use The Divi Builder ボタンを押して Divi エディタで開きます。
次に、Build From Scratch セクションの下にある Start Building をクリックします。
Divi エディタに入ったら、ページ上の最初の行のレイアウトを選択します。たとえば、最初のレイアウトを選択します。
その後、ページに追加したいモジュールを選択できます。Search モジュールを検索してクリックします。
次に、緑色のチェックマーク ボタンを押して、新しいモジュールを保存します。
検索ページの外観に満足したら、Divi エディタの下部にある 3つのドット アイコンをクリックします。
次に、Divi エディタの右下隅にある Save ボタンを押して、ページを保存します。
ページを保存した後、最後のステップは新しい Divi 検索をテストすることです。
ステップ 5: 新しい Divi 検索をテストする
開始するには、Divi エディタの上部にある Exit Visual Builder ボタンをクリックして、ページに移動します。
次に、ストアにある WooCommerce 商品をいくつか検索します。たとえば、Fancy Coat を検索します。
ご覧のとおり、新しい Divi 検索フォームを使用して商品が見つかりました。これは、WooCommerce 商品を検索するようになったためです。
また、Divi 検索は SearchWP で強化され、はるかに賢くなったため、カテゴリで商品を検索してみましょう。
たとえば、Hats カテゴリに配置された商品を検索します。
Hats カテゴリの商品のみが表示されていることがわかります。これは、WooCommerce 商品属性を検索可能にすることに成功したことを意味します。
このガイドでは、Divi が WooCommerce 商品を検索できるようにする方法を学びました。
これにより、顧客を失うことなく、Divi を使用して WooCommerce ストアの美しいページやテーマを作成できるようになります。
Divi サイトの検索を強化する準備はできましたか？ここから SearchWP を入手できます。
Divi 検索が機能しなくなりましたか？簡単な手順でDivi 検索が機能しない場合の修正方法に関する詳細なチュートリアルをご覧ください。
Divi を使用して美しい検索ページを作成する方法をお探しですか？Divi 検索結果ページテンプレートの作成方法に関するガイドに従ってください。
