サイズや色の異なる商品を販売している場合、顧客が欲しいものを正確に見つけるのがいかに難しいかをご存知でしょう。特定のサイズが在庫にあるかどうかを確認するためだけに、何十ものページをクリックしなければならないことがよくあります。
このフラストレーションは、通常、顧客が何も購入せずにサイトを離れることにつながります。ショッピング体験がナビゲートするにはあまりにも煩雑だったために、多くのストアオーナーが潜在的な売上を失っているのを見てきました。
解決策は、訪問者が生地、サイズ、ブランドなどの特定の属性で商品をフィルタリングできるようにすることです。それは、親切な店員がすぐに適切な棚に案内してくれるようなものです。
この記事では、開発者を雇わずにWooCommerceの商品を属性でフィルタリングする方法を紹介します。
WooCommerceショップに属性フィルターを追加する理由
買い物客として、私たちは皆そこにいました。オンラインストアを訪れ、好きなカテゴリを見つけましたが、サイズや色など、重要なものでフィルタリングできません。
黒があるかどうかを確認するためだけに20個の異なる商品をクリックしなければならなかったeコマースサイトは数え切れないほど訪れました。それはフラストレーションであり、通常は他の場所で購入するためにサイトを離れる原因となります。
あなたのストアに属性フィルターがない場合、あなたの顧客も同じ不満を感じている可能性が高いです。カテゴリは広範なグループには適していますが、ユーザーが特定の要件を持っている場合には機能しません。
ユーザーにカタログと商品ページの間を行き来させることは、摩擦を生み出します。楽しいショッピングスプレを雑用に変えてしまいます。
属性フィルターを、通路に立っている知識豊富な従業員と考えてください。顧客が漫然と検索するのを許すのではなく、フィルターはすぐに彼らのニーズに合ったものにオプションを絞り込みます。
この特定のペインポイントを修正することで、人々がサイトに長く滞在することがわかりました。閲覧からチェックアウトまでのジャーニーをスムーズにします。
とはいえ、これらのフィルターをサイトに追加するために従うことができる手順を見てみましょう。
属性でWooCommerceの商品をフィルタリングする
特定の属性で商品をフィルタリングする最も簡単な方法は、WPFiltersのようなプラグインを使用することです。
WPFiltersは、WordPressの最高のフィルタリングプラグインです。なぜなら、すぐにWooCommerceと連携するように構築されているからです。
通常、フィルターの設定には複雑な設定やコードの編集が含まれます。
WPFiltersは、数分で機能的なフィルターを構築できるゼロコードセットアップでこれを解決します。
既存の商品属性を、ユーザーフレンドリーなチェックボックス、ラジオボタン、またはドロップダウンに変換できます。あなたのショップをプロフェッショナルに見せるために開発者を雇う必要はありません。
WPFiltersで利用できるその他の機能の一部を次に示します。
- 共有可能なフィルターURL：すべての検索は一意のリンクを作成するため、顧客は特定のフィルター結果をブックマークしたり、友人と共有したりできます。
- フィルターをどこにでも配置：Gutenbergブロックまたは簡単なショートコードを使用して、フィルターを任意のページまたはサイドバーに簡単に追加できます。
- 完全なカスタマイズ性: CSS を一行も触ることなく、フィルターの見た目や動作を正確に制御できます。
- 高度なデータサポート: 基本的な カテゴリー を超えて、カスタムフィールドやタグなどでコンテンツをフィルターできます。
- ユニバーサル互換性: このプラグインは、投稿、ページ、カスタム投稿タイプで完璧に動作するため、サイト全体で使用できます。
それでは、サイトで属性フィルターをセットアップする方法を見ていきましょう。
ステップ 1: WPFilters のインストールと有効化
開始するには、SearchWP のウェブサイトにアクセスし、WPFilters アカウントにサインアップする必要があります。
完了したら、アカウントダッシュボードに移動し、 ダウンロード タブをクリックしてください。
次に、 WPFilters をダウンロード ボタンを押し、ZIP ファイルをコンピューターに保存します。ライセンスキーは後でプラグインを検証するために必要になるため、今すぐコピーしておくことをお勧めします。
次に、ファイルをサイトにアップロードしてインストールする必要があります。おさらいが必要な場合は、WordPress プラグインのインストール方法 に関するこのステップバイステップガイドを確認してください。
有効化すると、セットアップウィザードが画面に表示されます。 開始しましょう ボタンをクリックして、画面の指示に従ってセットアップを完了してください。
ステップ 2: 商品属性の新しいフィルター要素を追加する
次に、お客様が操作する新しいフィルター要素を作成する必要があります。
これを行うには、WordPress ダッシュボードから WPFilters » 要素 に移動し、 新規追加 ボタンをクリックするだけです。
その後、上部に「商品の色」や「サイズ」などのフィルターの名前を入力できます。この内部名は、後で WooCommerce ストアに複数のフィルターを追加する場合に、整理しておくのに役立ちます。
次に、利用可能なオプションから フィルターフィールド を選択してください。
商品属性フィルターの場合、一度に複数のオプションを選択できるため、チェックボックス オプションを使用します。ただし、ストアのデザインに応じて、ドロップダウンメニューやラジオボタンを選択することもできます。
レイアウトを選択したら、データソース セクションまでスクロールして、商品データを接続します。ここで、WPFilters にストア内のどの情報を具体的に探すかを指示します。
ドロップダウンメニューをクリックして、フィルターを設定したい商品属性を選択してください。
たとえば、このチュートリアルでは特定の属性として「商品の色」を選択します。
商品属性が追加されていない場合は、WooCommerce に商品タグ、属性、カテゴリーを追加する方法 に関するこのガイドを参照してください。
ステップ 3: フィルター設定をカスタマイズする
ソースを選択したら、コンテナ セクションまでスクロールして、商品属性フィルターを微調整およびカスタマイズできます。
ここでは、「タイトルを表示」オプションを有効にし、折りたたみ可能にし、コンテンツアイテムを水平に配置できます。
次に、フィルターをさらにカスタマイズするには、アイテムセクションまで下にスクロールしてください。
たとえば、アイテム数を有効にして、クリックする前に訪問者が利用可能な製品数を確認できるようにすることができます。
設定が完了したら、一番上までスクロールして保存ボタンをクリックするだけで、変更を保存できます。
変更を加えるたびにリアルタイムで更新される、画面右側の便利なプレビューに気づくでしょう。
ステップ4：WooCommerceストアにフィルターを表示する
フィルターの準備ができたので、最後のステップはそれをウェブサイトに配置して、顧客が実際に使用できるようにすることです。
WPFiltersは、WordPressブロックエディターを使用してこれらのフィルターをどこにでも配置できるため、使用するのが気に入っています。
また、フィルターを希望のページに直接埋め込むための組み込みオプションも付属しています。要素エディターで埋め込みオプションをクリックするだけです。
次に、埋め込みモードとターゲットページを選択できるポップアップウィンドウが開きます。
WPFiltersは、Gutenbergブロック、ショートコード、またはPHPコードを含む3つの埋め込みモードを提供します。
このチュートリアルでは、WooCommerceのショップページとオンラインストアのサイドバーに製品属性フィルターを追加する方法を説明します。
1. WooCommerceショップページに製品属性フィルターを表示する
まず、Gutenbergブロックオプションを選択し、「既存のページを選択」ボタンをクリックするだけです。
その後、ページ名を入力し、ドロップダウンメニューから選択する必要があります。
それが完了したら、「開始」ボタンをクリックするだけです。
次の画面で、製品フィルターがWordPressエディターに追加されていることがわかります。
または、WooCommerceショップページにWPFilters要素ブロックを追加し、右側の設定パネルで作成したフィルターを選択することもできます。
最後に、保存または公開ボタンをクリックできます。
これで、ライブストアにアクセスしてフィルターをテストし、製品が正しく並べ替えられていることを確認できます。
2.サイドバーに製品属性フィルターを表示する
WooCommerce製品属性フィルターをストアのサイドバーに追加するには、WordPressダッシュボードから外観 » ウィジェットに移動できます。
注意：このチュートリアルではAstra WordPressテーマを使用しています。ウィジェットの追加手順は、サイトで使用しているテーマによって異なる場合があります。
次に、WooCommerceサイドバーセクションの下にWPFilters要素ウィジェットブロックを追加する必要があります。
開始するには、+ボタンをクリックしてブロックを追加するだけです。
その後、右側のパネルにある要素設定から製品属性フィルターを選択する必要があります。
完了したら、「更新」ボタンをクリックするだけです。
これで、WooCommerceストアにアクセスして、サイドバーにフィルターが表示されていることを確認できます。
ステップ5：製品属性フィルターをテストする
フィルターをWooCommerceストアに埋め込んだ後、次のステップはそれをテストして正しく機能していることを確認することです。
このチュートリアルでは、訪問者が色で商品を並べ替えられるフィルターを作成しました。
フィルターで特定の色を選択すると、商品が自動的に並べ替えられ、正しい商品が表示されました。
これで、ストアにさらに多くの商品属性フィルターを追加できます。たとえば、フィルターにブランド、サイズ、素材、その他の属性を表示できます。
WooCommerce商品属性フィルターに関するよくある質問
1. WooCommerceの商品を属性でフィルターする最も簡単な方法は？
WooCommerceの商品を属性でフィルターする最も簡単な方法は、WPFiltersのようなプラグインを使用することです。このプラグインは、数分でユーザーフレンドリーなフィルターオプションを作成するためのノーコードセットアップを提供します。
2. 特定のページにフィルターを追加できますか、それともサイドバーのみですか？
はい、WPFiltersを使用すると、グーテンベルクブロック、ショートコード、またはPHPコードを使用して、WooCommerceのショップページのような特定のページやサイドバーなど、サイトのどこにでもフィルターを埋め込むことができます。
3. WooCommerceショップに属性フィルターを追加することが重要なのはなぜですか？
属性フィルターを追加すると、顧客はサイズ、色、素材などの特定の基準に一致する商品をすばやく見つけることができるようになり、ショッピング体験が向上し、フラストレーションが軽減され、購入の可能性が高まります。
この記事で、WooCommerceの商品を属性でフィルターする方法を学べたことを願っています。スマートなWooCommerce商品検索を追加する方法やWooCommerceで商品SKUで検索する方法に関するガイドも参照してください。
オンラインストアのナビゲーションを簡単にする準備はできましたか？ここからWPFiltersを使い始めることができます。
