SearchWPブログ

WordPressのチュートリアル、ヒント、リソースでビジネスを成長させる

WooCommerceに星評価フィルターを追加する方法

買い物客は良いものへの近道を愛しており、WooCommerceの星評価フィルターはそれを提供します。ワンタッチで、4つ星以下のすべてをスキップし、顧客がすでに絶賛している製品のみを閲覧できます。

良い点は、ストアにこのフィルターが必要なものが既に備わっていることです。レビューを承認するたびに、WooCommerceは商品の平均評価を計算して保存するため、WPFiltersはコードなしでその評価をシンプルなスライダーに変換できます。

独自のデモWooCommerceストアでこれを設定したところ、数分以内にショップのサイドバーに動作する評価スライダーが設置されました。

この記事では、評価の有効化からショップページでのスライダーのテストまで、WooCommerceのスター評価フィルターを追加する方法を説明します。

WooCommerceのスター評価フィルターとは?

スター評価フィルターを使用すると、買い物客は自分が気にかけている評価以下のすべての商品を非表示にできます。これは、大手ショッピングサイトでよく見かける「4つ星以上」のオプションです。

その背後にある数値は、お客様から提供されます。スター評価付きのレビューを承認するたびに、WooCommerceは商品の新しい平均評価を計算し、商品とともに保存します。

その平均評価はカスタムフィールドに保存されます。これは、WordPressが投稿や商品と一緒に保存する追加情報です。

まだレビューされていない商品は0としてカウントされます。並べ替えとフィルターは異なる役割を果たします。

並べ替えは商品の順序を変更しますが、フィルターは一致しない商品を削除するため、買い物客は残ったものだけを見ることができます。

買い物客が商品を評価でフィルターしたい理由

私たちの経験では、買い物客は複数の類似商品を比較する際に、レビューを最も重視します。

  • 買い物客は他の購入者を信頼します。実際の顧客からの平均4.5つ星評価の商品は、実績のない商品よりも安全な選択肢のように感じられます。
  • 並べ替えではすべてが表示されます。平均評価で並べ替えをオンにしても、買い物客は良い商品がどこにあるかを知るために、評価の低い商品をスクロールして通り過ぎる必要があります。
  • 大きなカタログはベストセラーを隠します。カテゴリが数ページにまたがる場合、評価の高い商品は3ページ目に表示される可能性があり、そこまで見る買い物客はほとんどいません。
  • 組み込みオプションは限られています。WooCommerce独自の評価フィルターは、ブロックベースのショップページ用に構築されているか、スターリンクの行を表示しますが、他の多くのツールはElementor、Divi、または特定のテーマ内でのみ機能します。

靴屋で、店員のおすすめ商品が壁の他のすべてのペアに混ざっているようなものです。

良い靴はそこにありますが、買い物客はそれらを見つけるためにすべてを試着する必要があります。

次に、ストアに評価フィルターを追加する最も簡単な方法を見てみましょう。

WPFiltersでWooCommerceスター評価フィルターを追加する方法

WooCommerceのスター評価フィルターを追加する最も簡単な方法として、WPFiltersをお勧めします。

WPFilters - 最高のWordPressフィルタリングプラグイン

WPFiltersは、SearchWPと同じチームによって構築された、WordPress向けの最高のフィルタリングプラグインです。

コードを書かずに、ストアに既に存在するカテゴリ、タグ、属性、カスタムフィールドからフィルターを構築できます。

WPFiltersが評価フィルターに適している理由となる機能の一部を以下に示します。

  • カスタムフィールドフィルター。WPFiltersは、WooCommerceが提供する_wc_average_ratingフィールドを含む、任意のカスタムフィールドをカスタムフィールドフィルターに変換できます。
  • レンジスライダー。 スライダー要素は、評価のような数値をドラッグ可能な範囲に変換するため、買い物客は一度の操作で「星4つから5つ」を選択できます。
  • ページリロードなし。 買い物客がスライダーを動かすと、WPFiltersはAJAXを使用して同じページの商品を更新します。
  • 共有可能なフィルターURL。 すべての選択はページURLに保存されるため、買い物客は評価の高い商品のページをブックマークしたり共有したりできます。

これで、WPFiltersを使用して、あなたのWooCommerceストアに星評価フィルターを追加する方法を見てみましょう。

ステップ 1: WPFilters のインストールと有効化

まず、SearchWPのウェブサイトでWPFiltersプランにサインアップできます。

サインアップしたら、アカウントダッシュボードのダウンロードタブに移動できます。そこから、WPFiltersプラグインZIPファイルをダウンロードしてください。

WPFilters プラグイン ZIP ファイルをダウンロード

その際に、ライセンスキーもコピーしておいてください。すぐに必要になります。

次に、プラグインをアップロードしてWordPressサイトにインストールできます。ヘルプが必要な場合は、WPBeginnerのWordPressプラグインのインストール方法ガイドに従ってください。

有効化すると、WPFiltersセットアップウィザードが開きます。開始をクリックして、画面の指示に従ってください。

WPFiltersセットアップウィザード

注意: WPFiltersは、サイトにフィルターを表示するためにアクティブなライセンスが必要です。続行する前に、キーが検証されていることを確認してください。

ライセンスがアクティブになれば、WPFiltersは評価フィルターの準備ができています。

ステップ2: WooCommerceで商品評価をオンにする

フィルターを作成する前に、フィルター対象となる商品に星評価が必要です。確認するには、WooCommerce » 設定に移動し、商品タブをクリックします。

次に、レビューセクションまでスクロールします。そこから、商品レビューを有効にするとレビューで星評価を有効にするの両方がチェックされていることを確認してください。

両方ともデフォルトでオンになっていますが、ストアがセットアップされたときにオフになっている可能性があります。

WooCommerce 商品レビューで星評価を有効にする

それが完了したら、ページの下部にある「変更を保存」をクリックします。

プロのヒント: 星評価は必須であり、オプションではありませんをチェックしたままにしてください。これはデフォルト設定です。これにより、顧客が残すすべてのレビューに星評価が付き、平均値に加算されます。

承認されたレビューのみが商品の評価に含まれることに注意してください。新しいレビューをモデレーションのために保留している場合は、フィルターを変更する前に承認する必要があります。

ステップ3: 評価スライダーフィルターを作成する

これでフィルター自体を作成できます。

これを行うには、WordPressダッシュボードからWPFilters » 要素に移動します。次に、新規追加ボタンをクリックします。

WPFilters要素画面

ビルダーの上部で、要素名の横にある鉛筆アイコンをクリックし、買い物客が理解できる名前(例:「顧客評価」)を付けます。

その後、フィルターフィールドセクションを探し、スライダーを選択します。

スライダーは、チェックボックスのリストが長い行の小数値を表示するのに対し、4.5のような平均値で機能するため、評価に適していると考えています。

スライダーで WooCommerce 星評価フィルターを作成する

そこから下にスクロールしてデータソースセクションに移動し、ドロップダウンを開きます。

リストは投稿、タクソノミー、カスタムフィールドにグループ化されています。

カスタムフィールドグループ内にある_wc_average_ratingを選択してください。

カスタムフィールドの平均評価で WooCommerce 商品をフィルターする

注:その下には、_wc_rating_count と _wc_review_count も表示されます。これらのフィールドは、製品の平均評価ではなく、評価とレビューの数を追跡するため、_wc_average_rating を選択するようにしてください。

WPFilters は、ショップページに表示されている製品の中から、すべてのページにわたる最低評価と最高評価を読み取り、それらをスライダーの両端として使用します。

すべての製品の評価が同じ場合(たとえば、まだレビューがない新しいストアなど)、WPFilters は少なくとも 2 つの製品の評価が異なるまで、スライダーを非表示にします。

次に、フィルターの外観を選択できます。

コンテナの下で、タイトルを表示をオンにすると、「顧客評価」という名前がスライダーの上に表示されます。

フィルターのコンテナ設定を編集する

買い物客がフィルターを折りたたむことができるように、折りたたみ可能をオンにすることもできます。

見た目が良くなったら、保存をクリックします。

WPFilters は、この名前を使用してフィルターの URL も構築するため、「顧客評価」はショップページの URL に customer-rating として表示されます。

ステップ 4: ショップページに評価フィルターを追加する

次に、フィルターを製品の横に配置できます。

WPFilters は、ショップページが既に表示している製品リストと連携するため、両者を接続するための追加設定は必要ありません。

ショップのサイドバーに追加するには、外観 » ウィジェットに移動します。そこから、テーマがショップページで使用しているウィジェットエリアを開きます。

WPFilters要素ウィジェットブロックをWooCommerceサイドバーに追加

アストラテーマで実行されているデモストアでは、それはWooCommerce サイドバーです。その後、+ アイコンをクリックし、「WPFilters」を検索して、WPFilters 要素ブロックを追加します。

次に、ブロック設定の要素を選択ドロップダウンから「顧客評価」フィルターを選択します。

WooCommerce ショップページに評価フィルターを追加する

それが完了したら、更新をクリックしてウィジェットを保存します。

この手順は、使用している WordPress テーマによって異なる場合があることに注意してください。

テーマにショップサイドバーがない場合、フィルタービルダーの埋め込みボタンを使用すると、フィルターを表示したい場所に貼り付けることができるショートコード(例:)が生成されます。

ステップ 5: 星評価フィルターをテストする

フィルターを配置したら、新しいブラウザタブでショップページにアクセスできます。各端にハンドルがあり、その下に現在の範囲が表示された「顧客評価」スライダーが表示されます。

最初のテストでは、左側のハンドルを 4 までドラッグします。スライダーの下の数値は 4.0 から 5.0 になり、製品はページをリロードせずにすぐに更新されるはずです。

デモストアでは、Summit Waterproof Hiking Boots(星 4.5)、Ridgeline Waterproof Chelsea Boots(星 4)、Men’s Jacket(星 5)が保持されます。

Puddle Jumper Waterproof Rain Boots(星 3)およびレビューのない製品はリストから除外されます。

WooCommerce レビューフィルターで評価の高い商品を表示

2 回目のテストでは、スライダーを移動した後のページの URL を確認します。

customer-rating に続いて、選択した範囲が含まれていることに気付くでしょう。

その URL をコピーしてプライベートウィンドウで開くと、同じトップ評価の製品が引き続き表示されることを確認できます。

ボーナス: カテゴリフィルターと評価を組み合わせる

評価フィルターが機能したら、買い物客がさらに絞り込めるようになります。

そのために、WPFilters » Elements で 2 番目の要素を作成し、Data Source ドロップダウンの Taxonomies グループから商品カテゴリーを選択します。

カテゴリデータソースの選択

両方のフィルターを同じサイドバーに追加すると、連携して機能します。

買い物客は、「ブーツ」のようなカテゴリーを選択し、評価スライダーを 4 にドラッグして、4 つ星以上の評価のブーツのみを表示できます。

「カテゴリー別に WooCommerce 商品をフィルターする方法」ガイドでは、そのフィルターについて詳しく説明しています。

また、リセット要素を使用して、買い物客がすべての選択をワンクリックで解除できるようにすることもできます。これは、「WordPress にリセットフィルターボタンを追加する方法」ガイドで説明しています。

よくある質問

1. WooCommerceには組み込みの星評価フィルターがありますか?

WooCommerce には Rating Filter ブロックが含まれていますが、これはブロックベースのショップページにある Product Filters ブロック内に配置するように作られています。

古い Filter Products by Rating ウィジェットは星のリンクの行のみを表示するため、クラシックなショップサイドバーにドラッグ可能な範囲が必要な場合は、WPFilters のようなプラグインで代わりに _wc_average_rating フィールドでフィルターできます。

2. WooCommerceのレーティングフィルターが表示されないのはなぜですか?

フィルターは WooCommerce が保存した評価のみを使用できるため、まず Enable product reviews と Enable star rating on reviews がオンになっていることを確認してください。

承認されたレビューのみがカウントされ、レビューのない商品は評価 0 となります。すべての商品が同じ評価を持つ場合、WPFilters は少なくとも 2 つの商品が異なる評価を持つまでスライダーを非表示にします。

3. 星評価フィルターをカテゴリまたは価格フィルターと組み合わせることはできますか?

はい、カテゴリーフィルター、価格フィルター、評価フィルターを同じページに追加できます。

WPFilters がそれらを組み合わせるため、買い物客は設定したすべてのフィルターに一致する商品のみを表示します。

4. レーティングフィルターはスライダーの代わりに星アイコンを表示できますか?

WPFilters は、星のアイコンの行ではなく、スライダーとして評価を表示し、その下に数値範囲を表示します。

設定時間よりもクリック可能な星の行が重要であれば、FacetWP には専用の Star Rating ファセットがありますが、最初に独自のインデックスを構築する必要があります。

結論

お客様が残したレビューから構築された評価スライダーが、ストアに表示されるようになりました。

この記事が、WooCommerce の星評価フィルターをストアに追加する方法を学ぶのに役立ったことを願っています。

「WordPress で範囲フィルターを作成する方法」および「WordPress で WooCommerce 商品をフィルターする方法」のガイドも参照してください。

評価の高い商品を買い物客が見つけられるようにする準備はできましたか? 14 日間の返金保証付きで、WPFilters をこちらから開始できます。

著者アバター
アジム・アクター

今日からより良いWordPress検索エクスペリエンスを作成しましょう

役に立たない検索結果で訪問者を失うことはもうありません。SearchWPを使用すると、独自のスマートなWordPress検索をすばやく簡単に作成できます。

今すぐSearchWPを入手
複数の検索エンジンアイコン