数え切れないほどのWooCommerceウェブサイトの所有者と協力してきた結果、成功したオンラインストアには1つの重要な特徴があることがわかりました。それは、顧客が欲しいものを正確に見つけやすいということです。
Amazon のような大規模なマーケットプレイスでは、価格、色、サイズ、新着順での並べ替えにフィルターを使用しています。これは、顧客がどのように買い物をしているかを理解しているからです。
商品の絞り込みは、eコマースビジネスを成長させるために不可欠です。顧客が探しているものをすぐに見つけられない場合、購入せずに離れてしまうことがよくあります。
そのため、このステップバイステップガイドを作成し、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製品のフィルターを作成する
まず、「フィルター名」オプションの横にフィルター名を入力する必要があります。
たとえば、顧客が商品カテゴリを絞り込めるフィルターを作成する場合、その名前を「カテゴリで絞り込む」とすることができます。
次に、「フィルター対象」ドロップダウンメニューからフィルターのパラメーターを選択できます。無料版のプラグインでは、製品カテゴリとタグのフィルターのみが提供されることに注意してください。
これらのオプションの違いについて詳しくは、WooCommerceにタグ、属性、カテゴリを追加する方法に関するガイドをお読みください。
価格帯で商品を並べ替えるフィルターを作成している場合は、「価格帯」オプションを選択する必要があります。同様に、人気度または平均評価で商品を並べ替えたい場合は、「並べ替え」オプションを選択する必要があります。
製品タグ、カテゴリ、色、サイズ、素材、スタイルなどを絞り込む場合は、「分類」オプションを選択することもできます。このチュートリアルでは、このオプションを選択します。
それが完了したら、フィルターの分類オプションから選択する必要があります。たとえば、色で商品をフィルターしたい場合は、ドロップダウンメニューからそのオプションを選択する必要があります。
製品カテゴリのフィルターを作成しているので、「製品カテゴリ」オプションを選択します。
次に、「タームを選択」セクションに、ウェブサイトのすべての商品カテゴリを入力する必要があります。
その後、ストアのフロントエンドでフィルターをどのように表示したいかを、「フィルタータイプ」ドロップダウンメニューから選択できます。
フィルターは、チェックボックス、ドロップダウンメニュー、テキスト、カラーサンプルなどで表示できます。このチュートリアルでは、ドロップダウンメニューを追加するために「選択」オプションを選択します。
次に、「検索フィールドを表示」スイッチを切り替えて、ドロップダウンメニュー内に検索ボックスを有効にします。
「トグルとして表示」スイッチをアクティブにすることで、作成中のフィルターをトグルとして表示することもできます。そうすると、顧客はフィルターをオン/オフできるようになります。
それが完了したら、「並べ替え順」ドロップダウンメニューからフィルターされたタームのデフォルトの順序を選択するだけです。フィルターカテゴリは選択した順序で表示されます。
フィルターカテゴリは、名前、ターム数、またはスラッグで並べ替えることができます。また、フィルターされたタームの「並べ替えタイプ」を昇順（ASC）または降順（DESC）で選択することもできます。
最後に、下部にある「フィルターを保存」ボタンをクリックしてフィルターを保存します。
次に、複数のフィルターを作成するためにこのプロセスを繰り返します。
それが完了したら、一番上に戻り、「一般設定」タブに切り替えて設定を構成してください。
一般設定を構成する
ここでは、まず「フィルターモード」オプションを選択する必要があります。フィルターをリアルタイムで適用するか、AJAXを使用して適用するか、またはサイトに「フィルター適用」ボタンを表示するかを選択できます。
次に、保存ボタンを表示するか、フィルター結果をすぐに表示するかを選択する必要があります。
これが完了したら、AJAXを使用して同じページにフィルター結果を表示するか、新しいページに結果をリロードするかを選択します。
次に、「空のタームを非表示」オプションまでスクロールし、空のフィルタータームを表示したくない場合はスイッチをオンにします。
例えば、WooCommerceストアに「マグカップ」カテゴリを追加したが、現在そのカテゴリに商品がない場合、「カテゴリで絞り込む」リストには表示されません。
その後、「在庫切れ商品を表示しない」スイッチをオンにすると、結果に在庫切れの商品を表示したくない場合に表示されなくなります。
他の設定はデフォルトのままにするか、好みに合わせて設定できます。
選択が完了したら、「オプションを保存」ボタンをクリックして変更を保存し、上部にある「カスタマイズ」タブに切り替えます。
カスタマイズ設定の構成（プレミアムプラグインのみ）
注意: 無料版のプラグインを使用している場合、「カスタマイズ」タブは利用できません。
ここから、WooCommerceフィルターのラベルスタイルの色、テキスト用語の色、カラー スウォッチのサイズ、フィルター領域の色などを選択できます。
色を追加すると、WooCommerceフィルターがより美しくなり、eコマースストアのブランディングに合わせることができます。
選択が完了したら、「オプションを保存」ボタンをクリックし、上部から「SEO」タブに切り替えます。
SEO設定を構成する
そこに着いたら、「SEOオプションを有効にする」スイッチを切り替えて設定を有効にします。
次に、ドロップダウンメニューからメタタグを追加して、フィルターページで使用できます。これにより、サイトの SEO が向上します。
詳細については、WordPressのメタデータとメタタグに関する記事をお読みください。
「フィルターアンカーに“nofollow”を追加」スイッチをオンにすることで、すべてのフィルターアンカーにnofollow属性を自動的に追加することもできます。これにより、検索エンジンはページランク付け時にフィルターアンカーを使用しないようになります。
満足したら、「オプションを保存」ボタンをクリックして設定を保存します。
WooCommerceフィルターを製品ページに追加する
作成したフィルターをWooCommerce製品ページに追加するには、上部から「フィルタープリセット」タブに切り替える必要があります。
そこに着いたら、作成したフィルタープリセットのショートコードをコピーするだけです。
次に、WordPressダッシュボードからブロックエディターでWooCommerceの商品ページを開きます。
そこに着いたら、左上隅にあるブロック追加「(+)」ボタンをクリックして、ショートコードブロックを見つけます。
次に、コピーしたフィルタープリセットショートコードをショートコードブロックに貼り付けます。
最後に、「公開」または「更新」ボタンをクリックして変更を保存します。
WordPressサイトにアクセスして、WooCommerceカスタム属性フィルターが機能していることを確認できるようになりました。
カスタム属性でWooCommerce製品をフィルタリングする方法
カスタム属性を使用してWooCommerce製品フィルターを作成したい場合は、この方法が最適です。
カスタム属性の作成
カスタム属性を作成するには、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カスタム属性フィルターが機能していることを確認するためにウェブサイトにアクセスできます。
WooCommerceの売上を伸ばすためのボーナスのヒント
検索フィルターを追加する以外に、オンラインストアのコンバージョンを向上させるもう1つの方法は、ウェブサイトの速度を向上させることです。
より高速に読み込まれるWooCommerceストアは、顧客を容易に維持し、より多くのリードを生み出すことができます。
ストアの読み込み時間を改善するために、SiteGroundへの切り替えをお勧めします。彼らはWooCommerce推奨のホスティングプロバイダーであり、ウェブサイトを非常に高速にし、Ultrafast PHP、eコマースキャッシングなどの素晴らしい機能を提供します。
もう1つのヒントは、WooCommerceストアでキャッシュを設定することです。
これは、パフォーマンスを向上させるためにウェブサイトのデータを一時的な場所に保存する技術です。速度を向上させるために、最高のWooCommerceキャッシュプラグインのいずれかを使用できます。
その他にも、商品画像を最適化したり、読み込みの速いWooCommerceテーマを選択したり、最新のPHPバージョンを使用したり、DNSレベルのファイアウォールを有効にしたりするなど、顧客体験を向上させるために多くのことができます。
詳細な手順については、WooCommerceのパフォーマンスを高速化する方法に関する初心者向けガイドをご覧ください。
この記事が、属性とカスタム属性でWooCommerce製品をフィルターする方法を学ぶのに役立ったことを願っています。また、WooCommerceで配送料割引を提供する方法に関する記事や、最高のWooCommerceテーマのトップピックもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イジー・ヴァネック
WooCommerceを初めて見たとき、操作や設定がとても難しいと感じました。商品フィルターは、オンラインショップを検討しているほとんどの人が必要とするものでした。それが衣料品であれ、建築資材であれ、どのような商品であっても関係ありません。商品フィルターはオンラインショップにとって単に望ましいものであり、WooCommerceでどのように実装すればよいか分からず、ストレスを感じていました。この記事のおかげで、その方法を学び、ついに皆が私に求めていたスキルを習得しました。WooCommerceについてまだ学ぶべきことのToDoリストから、一つチェックを外すことができます。このウェブサイトを見つけた日は幸せな日でした。なぜなら、初心者としてここに来て、多くのことを学んで帰ることができるからです。