数え切れないほどのWooCommerceウェブサイトの所有者と協力してきた結果、成功したオンラインストアには1つの重要な特徴があることがわかりました。それは、顧客が欲しいものを正確に見つけやすいということです。
Amazon のような大規模なマーケットプレイスでは、価格、色、サイズ、新着順での並べ替えにフィルターを使用しています。これは、顧客がどのように買い物をしているかを理解しているからです。
商品の絞り込みは、eコマースビジネスを成長させるために不可欠です。顧客が探しているものをすぐに見つけられない場合、購入せずに離れてしまうことがよくあります。
そのため、このステップバイステップガイドを作成し、WooCommerceストアに効果的な製品フィルタリングを追加するお手伝いをします。
ストアのナビゲーションを容易にし、買い物客にとってより楽しいものにする属性ベースのフィルターの作成方法を学びます。
💡クイックアンサー：WooCommerce製品をフィルタリングする方法
製品フィルターを追加する最も簡単な方法は、YITH WooCommerce Ajax Product Filterプラグインを使用することです。
プラグインをインストールしたら、YITH » Ajax Product Filterに移動して新しいフィルタープリセットを作成します。そこから、価格、色、カテゴリなどのフィルタリングする特定の属性を選択します。
設定が完了したら、提供されたショートコードをコピーして、メインのWooCommerceショップページまたはサイドバーウィジェットに貼り付けます。
WooCommerce 製品を属性でフィルターする理由
フィルターを使用すると、顧客はWooCommerceストアで商品を簡単に閲覧できます。
これにより、買い物客は色、価格帯、素材、サイズなど、さまざまな属性に基づいて検索を絞り込むことができます。
すべての商品コレクションをスクロールする代わりに、ユーザーは興味のある商品を簡単に閲覧できます。
フィルターを追加すると、ユーザーエクスペリエンスを向上させ、検索機能を改善し、オンラインストアの直帰率を減らすことができます。
また、顧客が興味のある商品の利用可能なすべてのオプションを確認できるようにすることで、売上を伸ばすことができます。これにより、より情報に基づいた購入が可能になります。
それでは、WooCommerceストアで簡単に商品をフィルターする方法を見てみましょう。属性とカスタム属性でWooCommerce商品をフィルターする方法を説明します。
属性でWooCommerce商品をフィルターする方法
WooCommerce製品をすばやく簡単にフィルタリングする方法を探しているなら、この方法が最適です。WooCommerce製品フィルタープラグインを使用して、簡単な属性設定によるフィルターを設定する方法を説明します。
まず、YITH WooCommerce Ajax Product Filterプラグインをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。
注意: YITH WooCommerce Ajax Product Filter プラグインの無料バージョンもあります。ただし、高度な機能が付属するプレミアムバージョンを使用します。
このプラグインは、デモウェブサイトで徹底的にテストしました。私たちの経験について詳しく知りたい場合は、YITH WooCommerce Ajax Product Filterレビューをご覧ください。
有効化したら、WordPressダッシュボードから**YITH » Ajax Product Filter**ページに移動します。
ここから、「+ 新しいプリセットを作成」ボタンをクリックして、フィルタープリセットの作成を開始します。
そこに着いたら、「プリセット名」ボックスにフィルターの名前を入力することから始めることができます。
プリセット名はストアに表示されず、参照用であることを覚えておいてください。
次に、プリセットレイアウトとして「水平」を選択し、下部にある「+ 新しいフィルターを追加ボタン」をクリックします。
プラグインの無料バージョンを使用している場合、このオプションは利用できません。代わりに、「デフォルト」のプリセットレイアウトが使用されます。
これで、WooCommerce 商品のフィルター作成を開始できます。
WooCommerce製品のフィルターを作成する
まず、「フィルター名」オプションの横にフィルター名を入力する必要があります。
たとえば、顧客が商品カテゴリを絞り込めるフィルターを作成する場合、その名前を「カテゴリで絞り込む」とすることができます。
次に、「Filter for」ドロップダウンメニューからフィルターのパラメーターを選択できます。
これらのオプションの違いについて詳しくは、WooCommerceにタグ、属性、カテゴリを追加する方法に関するガイドをお読みください。
価格帯で商品を並べ替えるフィルターを作成している場合は、「価格帯」オプションを選択する必要があります。同様に、人気度または平均評価で商品を並べ替えたい場合は、「並べ替え」オプションを選択する必要があります。
製品タグ、カテゴリ、色、サイズ、素材、スタイルなどをフィルタリングしたい場合は、「Taxonomy」オプションを選択することもできます。
色やサイズのようなものは属性ですが、WordPressはそれらを技術的にタクソノミーとして保存するため、このオプションの下で見つけることができます。このチュートリアルでは、「Taxonomy」オプションを使用します。
それが完了したら、フィルターの分類オプションから選択する必要があります。たとえば、色で商品をフィルターしたい場合は、ドロップダウンメニューからそのオプションを選択する必要があります。
製品カテゴリのフィルターを作成しているので、「製品カテゴリ」オプションを選択します。
次に、「タームを選択」セクションに、ウェブサイトのすべての商品カテゴリを入力する必要があります。
その後、ストアのフロントエンドでフィルターをどのように表示したいかを、「フィルタータイプ」ドロップダウンメニューから選択できます。
フィルターは、チェックボックス、ドロップダウンメニュー、テキスト、カラーサンプルなどで表示できます。このチュートリアルでは、ドロップダウンメニューを追加するために「選択」オプションを選択します。
次に、「検索フィールドを表示」スイッチを切り替えて、ドロップダウンメニュー内に検索ボックスを有効にします。
「トグルとして表示」スイッチをアクティブにすることで、作成中のフィルターをトグルとして表示することもできます。そうすると、顧客はフィルターをオン/オフできるようになります。
それが完了したら、「並べ替え順」ドロップダウンメニューからフィルターされたタームのデフォルトの順序を選択するだけです。フィルターカテゴリは選択した順序で表示されます。
フィルターカテゴリは、名前、ターム数、またはスラッグで並べ替えることができます。また、フィルターされたタームの「並べ替えタイプ」を昇順（ASC）または降順（DESC）で選択することもできます。
最後に、下部にある「フィルターを保存」ボタンをクリックしてフィルターを保存します。
次に、複数のフィルターを作成するためにこのプロセスを繰り返します。
それが完了したら、一番上に戻り、「一般設定」タブに切り替えて設定を構成してください。
一般設定を構成する
ここでは、まず「フィルターモード」オプションを選択する必要があります。フィルターをリアルタイムで適用するか、AJAXを使用して適用するか、またはサイトに「フィルター適用」ボタンを表示するかを選択できます。
次に、保存ボタンを表示するか、フィルター結果をすぐに表示するかを選択する必要があります。
これが完了したら、AJAXを使用して同じページにフィルター結果を表示するか、新しいページに結果をリロードするかを選択します。
次に、「空のタームを非表示」オプションまでスクロールし、空のフィルタータームを表示したくない場合はスイッチをオンにします。
例えば、WooCommerceストアに「マグカップ」カテゴリを追加したが、現在そのカテゴリに商品がない場合、「カテゴリで絞り込む」リストには表示されません。
その後、「在庫切れ商品を表示しない」スイッチをオンにすると、結果に在庫切れの商品を表示したくない場合に表示されなくなります。
他の設定はデフォルトのままにするか、好みに合わせて設定できます。
選択が完了したら、「オプションを保存」ボタンをクリックして変更を保存し、上部にある「カスタマイズ」タブに切り替えます。
カスタマイズ設定の構成（プレミアムプラグインのみ）
注意: 無料版のプラグインを使用している場合、「カスタマイズ」タブは利用できません。
ここから、WooCommerceフィルターのラベルスタイルの色、テキスト用語の色、カラー スウォッチのサイズ、フィルター領域の色などを選択できます。
色を追加すると、WooCommerceフィルターがより美しくなり、eコマースストアのブランディングに合わせることができます。
選択が完了したら、「オプションを保存」ボタンをクリックし、上部から「SEO」タブに切り替えます。
SEO設定を構成する
そこに着いたら、「SEOオプションを有効にする」スイッチを切り替えて設定を有効にします。
次に、ドロップダウンメニューからメタタグを追加して、フィルターページで使用できます。これにより、サイトの SEO が向上します。
詳細については、WordPressのメタデータとメタタグに関する記事をお読みください。
スイッチを切り替えて、フィルターリンクに「nofollow」属性を追加することもできます。これは、検索エンジンに特定のリンクをたどらないように指示する特別なタグを追加します。
これをオンにすることをお勧めします。これにより、Googleが何百もの一時的なフィルターページをクロールする時間を無駄にするのを防ぎ、代わりに実際の製品ページをランク付けすることに集中できます。
満足したら、「オプションを保存」ボタンをクリックして設定を保存します。
WooCommerceフィルターをショップページに追加する
作成したフィルターをWooCommerceのメインショップページに追加するには、上部から「Filter presets」タブに切り替える必要があります。
そこに着いたら、作成したフィルタープリセットのショートコードをコピーするだけです。
次に、WordPressダッシュボードからブロックエディターでWooCommerceショップページを開くだけです。これは通常、「ショップ」というタイトルのページで、すべての商品がリストされています。
そこに着いたら、左上隅にあるブロック追加「(+)」ボタンをクリックして、ショートコードブロックを見つけます。
次に、コピーしたフィルタープリセットショートコードをショートコードブロックに貼り付けます。
最後に、「公開」または「更新」ボタンをクリックして変更を保存します。
WordPressサイトにアクセスして、WooCommerceカスタム属性フィルターが機能していることを確認できるようになりました。
新しいグローバル属性でフィルタリングする方法
「素材」や「ブランド」などの特定の詳細で商品をフィルタリングする必要がある場合は、グローバル属性を使用する必要があります。
グローバル属性は、WordPressのメインダッシュボードで作成され、多くの異なる商品に割り当てることができます。これにより、顧客がその特定の用語でフィルタリングできるようになります。
これは、単一の商品ページ内で直接作成され、フィルタリングに簡単に使用できないローカルの「カスタム商品属性」とは異なります。
グローバル属性を作成する
グローバル属性を作成するには、WordPressダッシュボードから商品 » 属性ページにアクセスする必要があります。
そこに着いたら、カスタムタクソノミー属性の名前とスラッグを入力することから始めます。
たとえば、特定の製品素材のフィルターを作成したい場合は、属性に「素材でフィルタリング」という名前を付けることができます。
次に、その属性を共有するすべてのアイテムを単一のページに表示したい場合は、「アーカイブを有効にする」ボックスをチェックする必要があります。
その後、下部にある「属性を追加」ボタンをクリックします。
属性が作成されたら、「タームの設定」リンクをクリックして属性にタームを追加します。
これにより新しい画面に移動し、そこで「名前」ボックスにタームを入力する必要があります。
たとえば、「素材で絞り込む」という属性を作成した場合、ウールなどの個々の素材をタームとして追加できます。属性にはいくらでもタームを追加できます。
完了したら、「素材で新しいフィルターを追加」ボタンをクリックして用語を保存します。
グローバル属性を商品に追加する
属性を作成したら、それを個々のWooCommerce製品に追加する必要があります。
このために、編集したい製品ページを開きます。ここから「製品データ」セクションまでスクロールダウンし、「属性」タブに切り替えます。
次に、ドロップダウンメニューをクリックします。「カスタム商品属性」を選択する代わりに、作成したグローバル属性の名前（例：「素材でフィルタリング」）を探します。
リストから選択し、「追加」ボタンをクリックします。
カスタム属性が追加されたので、「タームを選択」オプションで商品に一致するタームを検索するだけです。
たとえば、素材の属性を作成し、編集中の製品がウール製の場合は、ドロップダウンメニューから「ウール」を選択する必要があります。
完了したら、「属性を保存」ボタンをクリックします。
次に、上部にある「更新」または「公開」ボタンをクリックして変更を保存します。
同じ属性を共有するすべての製品に対して、プロセスを繰り返す必要があります。
プラグインを使用してカスタム属性フィルターを作成する
次に、YITH WooCommerce Ajax Product Filterプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドを参照してください。
注意：WooCommerceのカスタム属性フィルターを作成するために、プラグインの無料版または有料版を使用できます。
有効化したら、WordPressダッシュボードからYITH » Ajax Product Filter ページに移動してください。
ここから、「+ 新しいプリセットを作成」ボタンをクリックしてください。
次に、作成中のプリセットの名前を「プリセット名」ボックスに入力する必要があります。
完了したら、下部にある「+ 新しいフィルターを追加」ボタンをクリックして、WooCommerceのカスタム属性フィルターの作成を開始します。
まず、「フィルター名」ボックスに名前を入力する必要があります。
たとえば、顧客がさまざまな素材オプションを絞り込めるフィルターを作成する場合、その名前を「素材で絞り込む」とすることができます。
次に、「フィルター対象」ドロップダウンメニューから「タクソノミー」を選択します。プラグインの無料版を使用している場合、このオプションはデフォルトで選択されています。
作成したカスタム属性は、「タクソノミーを選択」オプションの横にあるドロップダウンメニューで利用できるようになります。
ドロップダウンリストからカスタム属性を選択し、「タームを選択」ボックスに属性タームを入力してください。
次に、「フィルタータイプ」ドロップダウンメニューから、フィルターをストアのフロントエンドにどのように表示したいかを選択する必要があります。
フィルターは、チェックボックス、ドロップダウンメニュー、テキスト、カラーサンプルなどで表示できます。
それが完了したら、「並べ替え」ドロップダウンメニューからフィルターされた用語のデフォルトの順序を選択します。
フィルターカテゴリは、名前、ターム数、またはスラッグで並べ替えることができます。また、フィルターされたタームの「並べ替えタイプ」を昇順（ASC）または降順（DESC）で選択することもできます。
最後に、下部にある「フィルターを保存」ボタンをクリックして、カスタム属性フィルターを保存します。
次に、上部から「一般設定」タブに切り替える必要があります。ここから、フィルターモードを選択したり、空のタームを非表示にしたり、ニーズに応じてその他の設定を構成したりできます。
完了したら、「オプションを保存」ボタンをクリックして変更を保存し、上部の「カスタマイズ」タブに切り替えます。
注意: 無料バージョンを使用している場合、これらのカスタマイズ設定は利用できません。
ここから、フィルタープリセットがウェブサイトのフロントエンドでどのように表示されるかをカスタマイズできます。
たとえば、ラベルスタイルの色、テキスト用語の色、カラー スウォッチのサイズ、フィルター領域の色などを選択できます。
選択が完了したら、「オプションを保存」ボタンをクリックし、上部から「SEO」タブに切り替えます。
ここから、「SEOオプションを有効にする」スイッチを切り替えて設定をアクティブにします。
フィルターされたページで使用するロボットメタタグをドロップダウンメニューから追加できます。これにより、サイトのSEOが最適化されます。
「フィルターアンカーに“nofollow”を追加」スイッチを切り替えることで、すべてのフィルターアンカーにnofollow属性を自動的に追加することもできます。
満足したら、「オプションを保存」ボタンをクリックして設定を保存します。
WooCommerce製品ページにカスタム属性フィルターを追加する
WooCommerceのショップページにカスタム属性フィルターを追加するには、まず上部にある「フィルタープリセット」タブに切り替える必要があります。
ここから、カスタム属性フィルターのショートコードをコピーします。
次に、WordPress管理サイドバーからブロックエディターで製品ページを開きます。
ここで、左上隅の「ブロックを追加」（+）ボタンをクリックして、ショートコードブロックをドラッグアンドドロップします。
その後、コピーしたフィルタープリセットのショートコードをブロックに貼り付けるだけです。
最後に、「公開」または「更新」ボタンをクリックして変更を保存します。
これで、WooCommerceカスタム属性フィルターが機能していることを確認するためにウェブサイトにアクセスできます。
ボーナスのヒント：フィルタを即座に読み込むようにする
フィルタを追加することは、ユーザーエクスペリエンスを向上させる素晴らしい方法ですが、それらは高速である必要があります。顧客がフィルタをクリックして、商品の更新を永遠に待たなければならない場合、ストアを離れる可能性が高くなります。
商品フィルタは複雑なデータベースクエリに依存するため、ウェブサイトのホスティングは、それらがどれだけ速く機能するかに大きな役割を果たします。ストアをスムーズに実行し続けるためのいくつかの方法を次に示します。
高性能ホスティングにアップグレードする
AJAXフィルタを即座に読み込むようにするには、SiteGroundに切り替えることをお勧めします。
彼らはWooCommerceが推奨するホスティングプロバイダーであり、Ultrafast PHPを提供しています。このテクノロジーは、商品のフィルタリングに必要なデータベースクエリを高速化し、ストアの応答性を大幅に向上させます。
パフォーマンスがなぜ重要なのか、詳細については、SiteGroundへの切り替え理由に関するケーススタディをご覧ください。
高度なキャッシュを使用する
サイトが瞬時に読み込まれるように、高度なキャッシュの設定をお勧めします。これにより、フィルタリングされた商品結果の既製のバージョンが保持されるため、誰かがフィルターを変更するたびにサーバーが高価なデータベースクエリを実行するのを回避できます。
速度を向上させるために、最高のWooCommerceキャッシュプラグインのいずれかを使用できます。ただし、顧客が常に最新の在庫状況を確認できるように、プラグインを設定して特定のフィルター結果ページを除外するようにしてください。
その他にも、商品画像を最適化したり、読み込みの速いWooCommerceテーマを選択したり、最新のPHPバージョンを使用したり、DNSレベルのファイアウォールを有効にしたりするなど、顧客体験を向上させるために多くのことができます。
詳細な手順については、WooCommerceのパフォーマンスを高速化する方法に関する初心者向けガイドをご覧ください。
WooCommerce製品フィルターに関するよくある質問
WooCommerceに商品フィルターを追加することに関して、読者からよく寄せられる質問をいくつかご紹介します。
WooCommerceの商品フィルターはどのように使用しますか？
WordPressエディターの組み込みの「属性で商品をフィルタリング」ブロックを使用して、基本的なフィルターを追加できます。ただし、ページが再読み込みなしで瞬時に更新されるプロフェッショナルな体験のためには、YITH WooCommerce Ajax Product Filterのようなプラグインの使用をお勧めします。
カスタム属性でWooCommerceの商品をフィルタリングするにはどうすればよいですか？
カスタム属性でフィルタリングするには、まず**商品 » 属性**の下にグローバル属性を作成し、それを商品に割り当てる必要があります。割り当てたら、フィルターウィジェットまたはプラグインを使用して、顧客がその特定の用語（素材やブランドなど）で商品を並べ替えられるようにできます。
WooCommerceで商品を並べ替えるにはどうすればよいですか？
WooCommerceには、ショップページにデフォルトの並べ替えドロップダウンがあり、顧客は価格や人気順に並べ替えることができます。ストアオーナーは、**外観 » カスタマイズ » WooCommerce » 商品カタログ**に移動して、デフォルトの並べ替え順序を変更できます。
WooCommerceで商品をカテゴリ分けするにはどうすればよいですか？
商品 » カテゴリに移動して、新しいグループ（例：メンズ、レディース、アクセサリー）を作成することで、商品をカテゴリ分けできます。商品の編集時には、右側のサイドバーにある関連カテゴリのチェックボックスをオンにするだけで割り当てられます。
WooCommerceで商品検索を作成するにはどうすればよいですか？
「商品検索」ウィジェットをサイトのサイドバーまたはヘッダー領域に追加することで、検索バーを作成できます。カテゴリマッチングやスペルミス修正を含む、より強力な検索には、SearchWPのような専門プラグインの使用をお勧めします。
WooCommerceには注文管理機能がありますか？
はい、WooCommerceにはWooCommerce » 注文の下にある組み込みの注文管理システムがあります。このダッシュボードから、顧客の詳細を表示したり、配送状況を更新したり、払い戻しを処理したり、すべての受信注文を管理したりできます。
この記事が、属性とカスタム属性でWooCommerce製品をフィルターする方法を学ぶのに役立ったことを願っています。また、WooCommerceで配送料割引を提供する方法に関する記事や、最高のWooCommerceテーマのトップピックもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イジー・ヴァネック
WooCommerceを初めて見たとき、操作や設定がとても難しいと感じました。商品フィルターは、オンラインショップを検討しているほとんどの人が必要とするものでした。それが衣料品であれ、建築資材であれ、どのような商品であっても関係ありません。商品フィルターはオンラインショップにとって単に望ましいものであり、WooCommerceでどのように実装すればよいか分からず、ストレスを感じていました。この記事のおかげで、その方法を学び、ついに皆が私に求めていたスキルを習得しました。WooCommerceについてまだ学ぶべきことのToDoリストから、一つチェックを外すことができます。このウェブサイトを見つけた日は幸せな日でした。なぜなら、初心者としてここに来て、多くのことを学んで帰ることができるからです。