WooCommerceストアに商品を追加する際、それらがすべて1ページに混在してどのように表示されるかについては、おそらく考えていないでしょう。
単純な商品、複数のサイズや色のオプションがある商品、バンドルオファー、さらにはダウンロード可能なファイルまで、すべてが混在している可能性があります。
これが買い物客にとってどれほど混乱を招くかは、すでに見てきました。彼らはストアページにアクセスしても、並べ替える方法もなく、あらゆる種類の商品がごちゃ混ぜになっているのを目にします。
解決策は、買い物客が商品タイプで並べ替えることができるフィルターを追加することです。これにより、表示されるものを制御でき、数秒で適切な種類の商品を見つけるのに役立ちます。
この記事では、WooCommerceを商品タイプでフィルターする方法を説明します。
WooCommerceの商品をタイプ別にフィルターする理由
設定プロセスを説明する前に、商品タイプフィルターがストアにとってなぜ重要なのかについて話しましょう。
ギフトカードまたはダウンロード可能な商品のみを購入したい顧客を考えてみてください。フィルターがないと、使用できない物理的な商品をスクロールしてスキップしなければなりません。
商品タイプが混在すると、チェックアウト時にも混乱が生じることに気づきました。一部の商品に送料がかかるのに他の商品にはかからない理由、または一部の商品にはサイズオプションがあり、他の商品には固定されている理由を顧客は常に理解しているわけではありません。
商品タイプフィルターは、買い物客が探しているものを正確に絞り込めるようにすることで、これらの問題を解決します。バリアブル商品を検索している人は、ワンクリックですべてのシンプルな商品を非表示にできます。
これにより、ショッピング体験がスムーズになり、フラストレーションが軽減されます。顧客が必要なタイプの商品を簡単に見つけることができるようになると、購入を完了する可能性が高まります。
それでは、オンラインストアで商品タイプ別に簡単にフィルターする方法を見てみましょう。
商品タイプでWooCommerceの商品をフィルターする
WooCommerceストアに商品タイプフィルターを追加する最も簡単な方法は、WPFiltersを使用することです。
WPFiltersは、顧客にとって商品の並べ替えを簡単にする最高のWordPressフィルタープラグインです。すぐにWooCommerceとシームレスに連携します。
SearchWPのチームによって作成されたこのプラグインは、コーディング知識を必要とせずに強力なフィルターオプションを提供します。数分でプロフェッショナルなAmazonスタイルのフィルターを設定できます。
このプラグインを使用すると、商品タイプ、カテゴリ、タグ、属性、カスタムフィールドのフィルターを作成できます。顧客は、商品をより速く見つけるために必要な制御を得ることができます。
WPFiltersが提供する機能の一部を次に示します。
- 複数のフィルタータイプ: ストアのデザインに合わせて、チェックボックス、ラジオボタン、ドロップダウンなどから選択できます。
- 共有可能なフィルターURL: フィルターされた検索ごとに一意のリンクが作成され、顧客はブックマークしたり、友人と共有したりできます。
- 簡単な配置: Gutenbergブロックまたは簡単なショートコードを使用して、サイトのどこにでもフィルターを追加できます。
- 完全なWooCommerceサポート: すべての商品タイプを含む、WooCommerceの商品データと連携するように特別に構築されています。
- モバイル対応: フィルターはスマートフォンやタブレットで素晴らしく見え、完璧に機能します。
それでは、ストアで商品タイプフィルターを設定する方法を見ていきましょう。
ステップ 1: WPFilters のインストールと有効化
まず、SearchWP のウェブサイトにアクセスし、WPFilters アカウントにサインアップする必要があります。
アカウントを作成したら、アカウントエリアに移動し、「ダウンロード」タブをクリックしてください。
ここから「WPFiltersのダウンロード」ボタンをクリックし、プラグインファイルをコンピューターに保存します。設定中に必要になるため、ライセンスキーをコピーしておくこともお勧めします。
次に、WPFiltersプラグインファイルをWordPressサイトにアップロードし、プラグインをインストールする必要があります。この手順にヘルプが必要な場合は、WordPressプラグインのインストール方法に関するこちらのガイドを参照してください。
プラグインをアクティブ化した後、WPFiltersセットアップウィザードが画面に表示されます。「開始する」ボタンをクリックし、画面の指示に従ってセットアップを完了してください。
ステップ2: 商品タイプフィルター要素の作成
次に、お客様がタイプ別に商品を並べ替えるために使用するフィルターを作成する必要があります。
まず、WordPressダッシュボードからWPFilters » 要素に移動し、「新規追加」ボタンをクリックしてください。
次の画面で、フィルターの設定を開始します。まず、フィルターの名前を一番上に入力します。たとえば、「商品タイプフィルター」など、整理に役立つ名前を付けます。
次に、作成したいフィルターの種類を選択する必要があります。WPFiltersは、複数のチェックボックス、ラジオボタン、ドロップダウン、検索バーを提供しています。
商品タイプフィルターには、チェックボックスオプションの使用をお勧めします。これにより、お客様はシンプルな商品とバリアブル商品を同時に表示したい場合に、複数の商品タイプを一度に選択できます。
画面の右側にあるパネルにフィルターのライブプレビューが表示されます。これは変更を保存すると更新されるため、どのように表示されるかを正確に確認できます。
次に、データソースセクションまでスクロールします。ここで、フィルターに使用する情報をWPFiltersに指示します。
ドロップダウンメニューをクリックし、商品タイプオプションを探します。これをデータソースとして選択してください。
WPFiltersは、ストアで使用しているすべての商品タイプを自動的に検出します。これには通常、シンプルな商品、バリアブル商品、グループ化された商品、外部商品が含まれます。
ステップ3: 商品タイプフィルターのカスタマイズ
データソースを選択した後、フィルターがお客様にどのように表示され、どのように動作するかをカスタマイズできます。
表示設定を調整するには、コンテナセクションまでスクロールします。ここで、フィルターがストアにどのように表示されるかを制御できます。
たとえば、「タイトルを表示」オプションを有効にすると、フィルターの上に「商品タイプ」のようなラベルをお客様に表示できます。これにより、何を並べ替えているのかを理解しやすくなります。
また、「折りたたみ可能」オプションをオンにすると、ユーザーが必要ないときにフィルターを非表示にできます。これにより、サイドバーが整理され、お客様はインターフェースを制御できます。
「水平」オプションは、フィルターの選択肢を縦長のリストではなく、横並びに配置します。
次に、コンテナ設定の下にあるアイテムセクションを確認します。これは、個々のフィルターオプションが顧客にどのように表示されるかを制御します。
「アイテム数」を有効にすると、各タイプにいくつの製品が存在するかを表示できます。たとえば、「シンプルな製品（24）」や「バリアブル製品（18）」と表示され、顧客は何を期待できるかを知ることができます。
すべてが表示される状態に満足したら、ページの上部までスクロールし、保存ボタンをクリックして変更を保存します。
右側のパネルに完成したフィルターのプレビューが表示され、顧客にどのように表示されるかが正確にわかります。
ステップ4：フィルターをストアに追加する
フィルターの準備ができたので、顧客が実際に使用できる場所にWooCommerceストアに配置する必要があります。
WPFiltersは、フィルターを埋め込むための複数の方法を提供することで、これを簡単にします。開発に慣れている場合は、Gutenbergブロック、ショートコード、またはPHPコードを使用できます。
開始するには、要素ページの右上にある「埋め込み」ボタンをクリックします。
ポップアップウィンドウが表示され、さまざまな埋め込みオプションが表示されます。既存のページにフィルターを追加することも、新しいページを作成することもできます。
このチュートリアルでは、製品タイプフィルターをWooCommerceショップページのサイドバーに追加する方法を説明します。ほとんどの顧客はここにフィルターオプションを見つけることを期待しています。
WordPressダッシュボードから外観 » ウィジェットに移動するだけです。これらの手順は、ストアで使用しているWordPressテーマによって若干異なる場合があることに注意してください。
ここから下にスクロールして、WooCommerceサイドバーまたはショップサイドバーセクションを見つけます。次に、+ボタンをクリックしてWPFilters Elementウィジェットブロックを追加します。
WPFilters Elementブロックを追加したら、表示するフィルターを指定する必要があります。画面の右側にある「設定」パネルを確認してください。
次に、「要素を選択」ドロップダウンメニューをクリックし、前のステップで作成した製品タイプフィルターを選択します。
完了したら、上部にある更新ボタンをクリックして変更を保存します。フィルターはストアで公開されました。
ステップ5：製品タイプフィルターをテストする
フィルターをストアに追加した後、最後のステップはそれをテストして、すべてが正しく機能することを確認することです。
WooCommerceショップページにアクセスして、製品タイプフィルターが機能していることを確認します。サイドバーに、ストアのすべての製品タイプが表示されているはずです。
フィルターには、シンプルな製品、バリアブル製品、グループ化された製品など、お持ちの各製品タイプのチェックボックスが表示されるはずです。
では、フィルターが実際に機能するかどうかをテストしましょう。フィルターの製品タイプのいずれかをクリックしてください。
たとえば、チェックボックスリストから「バリアブル製品」を選択すると、ショップページが更新され、サイズや色のオプションのような複数のバリエーションを持つ製品のみが表示されるはずです。
シンプルな製品、グループ化された製品、その他のタイプの製品はすべて表示されなくなります。バリアブル製品のみが表示されたままになります。
複数のチェックボックスを選択することで、一度に複数の商品タイプを選択できるようになります。ショップページには、選択した両方のタイプの商品の表示が切り替わります。
これにより、顧客はさまざまな商品タイプを比較したり、必要なものを正確に絞り込んだりする柔軟性を得られます。
WooCommerceの商品タイプフィルターに関するよくある質問
1. WooCommerceストアに複数のフィルターを追加できますか？
はい、必要に応じて多くのフィルターを作成できます。たとえば、サイドバーに複数のフィルターを積み重ねて、顧客が商品タイプ、カテゴリ、価格、属性で一度に並べ替えることができます。各フィルターは独立して機能し、買い物客に表示される内容を正確に制御できます。
2. 現在のWooCommerceテーマで動作しますか？
WPFiltersは、ほぼすべてのWooCommerceテーマで動作します。Astra、Storefront、OceanWPなどの人気テーマで問題なくテスト済みです。フィルターは、既存のサイドバーとショップページのレイアウトにシームレスに統合されます。
3. フィルター結果を表示するために、顧客はページを再読み込みする必要がありますか？
デフォルトでは、顧客がフィルターオプションを選択するとページが更新されます。ただし、WPFiltersはAjaxフィルターをサポートしており、ページ全体を再読み込みせずに結果を即座に更新します。これにより、顧客にとってよりスムーズなショッピング体験が生まれます。
WooCommerceストアに商品タイプフィルターを追加すると、顧客は無関係な商品をスクロールすることなく、探しているものを正確に見つけることができます。
WPFiltersを使用して、これらのフィルターを数ステップで設定する方法を示しました。顧客は、簡単な商品、バリエーション商品、グループ化された商品などをワンクリックで並べ替えることができるようになりました。
この小さな変更は、買い物客があなたのストアを体験する方法に大きな違いをもたらします。検索に費やす時間が減り、購入に費やす時間が増えるため、ビジネスの売上が向上します。
この記事で、WooCommerceの商品タイプでフィルターする方法を学べたことを願っています。また、WooCommerceの商品をタグでフィルターする方法やスマートなWooCommerce商品検索を追加する方法に関するガイドも参照してください。
顧客に商品カタログをより細かく制御させませんか？ここからWPFiltersを使い始めることができます。
