WooCommerceの商品フィルターの設定方法と顧客離れを防ぐ方法

初めてWooCommerceストアに商品フィルターを追加したとき、それは大失敗でした。1999年にデザインされたような見た目で、顧客を助けるどころか混乱させ、最悪なことにチェックアウトページを壊してしまいました。数時間のうちに削除しなければなりませんでした。

しかし、私のストアにはフィルターが必要だとわかっていました。何百もの商品がある場合、顧客は選択肢を素早く絞り込む方法を探します。適切なフィルターがなければ、顧客は圧倒されてしまい、お金を持って去ってしまいます。

そこで、私は袖をまくり上げ、見つけられる限りの主要なWooCommerceフィルターソリューションをすべてテストしました。数週間のテストの後、最高のプラグインを見つけました。設定が簡単で、見た目も美しく、そして最も重要なことに、顧客が必要なものを見つけ（そして購入し）るのに役立ちます。

このガイドでは、WooCommerceの商品フィルターをどのように設定したかを共有します。これにより、あなたもリードを失うのをやめることができます。

WooCommerceの商品フィルターを追加する理由

商品フィルターにより、買い物客は探しているものを正確に見つけやすくなります。長い商品リストをスクロールする代わりに、数回のクリックで価格、サイズ、色、評価などで結果を絞り込むことができます。

これは重要です。なぜなら、ナビゲーションが不十分だとカート放棄や売上損失につながることが多いからです。訪問者が探しているものをすぐに見つけられないと、多くの場合、何も購入せずに離れてしまいます。

さらに、WooCommerceストアにフィルターを追加すると、直帰率を大幅に削減できます。顧客はより多くの時間を閲覧に費やし、実際に購入を完了します。

商品フィルターを追加すると、ショッピング体験とストアのパフォーマンスの両方が向上します。方法は次のとおりです。

• ⏱️ お客様の時間を節約 – ショッパーは、何百もの商品の中から数秒で適切な商品を絞り込むことができるため、閲覧が速く、フラストレーションが軽減されます。
• 📈 売上増加 – 顧客が探している商品をすぐに見つけることができると、カートに追加してチェックアウトプロセスを完了する可能性が高くなります。
• 🧑‍💻 滞在時間の延長 – クリアなフィルターは、訪問者が他の場所を探すのではなく、ストアを探索し続けるようにします。
• 📱 モバイルショッピングを改善 – フィルターにより、モバイルユーザーは小さな画面で延々とスクロールすることなく、カタログを簡単に閲覧できるようになります。
• 🌟 顧客の信頼構築 – クリーンで整理されたストアは、ショッピング体験を大切にしていることを示し、ブランドへの信頼構築に役立ちます。

これを踏まえ、WooCommerceの商品フィルターを追加する方法を説明します。このガイドでは以下の内容をすべてカバーします：

方法1：Amazon風WooCommerce商品フィルターを追加する（推奨）

WPFiltersは最高のWooCommerceフィルタープラグインです。初心者にも使いやすく、すぐに素晴らしい見た目になります。設定するために開発者である必要はなく、顧客が探しているものを簡単に見つけられる、クリーンなAmazonスタイルのフィルターを提供します。

さらに、どのWooCommerceテーマとも美しく連携するため、使用しているテーマに関係なく安全な選択肢となります。

このツールに関する詳細については、WPFiltersの詳細レビューをご覧ください。

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

製品フィルターを開始するには、WPFiltersをインストールする必要があります。

まず、SearchWPのウェブサイトでWPFiltersアカウントにサインアップする必要があります。SearchWPはWPFiltersの背後にある会社であり、ヘルプが必要な場合は信頼性の高いサポートを提供しています。

今すぐWPFiltersを入手ボタンをクリックし、プランを選択して、チェックアウトを完了する手順に従ってください。

サインアップが完了したら、アカウントダッシュボードにログインし、プラグインのZIPファイルをダウンロードします。これはアカウントのダウンロードエリアにあります。

これでプラグインのインストールと有効化の準備が整いました。WordPressの管理画面で、プラグイン » プラグインの追加 に移動してください。

次の画面で、「プラグインをアップロード」をクリックしてファイルアップローダーを開きます。

次に、「ファイルの選択」ボタンをクリックし、ローカルコンピューター上のzipファイルを選択して、「今すぐインストール」をクリックします。

インストールプロセスを完了するには、「有効化」をクリックすることを忘れないでください。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関する初心者向けガイドを参照してください。

有効化後、WPFiltersは自動的にセットアップウィザードを起動し、開始を支援します。「開始する」ボタンをクリックしてください。

このウィザードが基本的な設定を案内し、プラグインをWooCommerceストアに接続します。

セットアップウィザードの画面の指示に従ってください。プロセスは1〜2分で完了し、ストアですべてが正しく設定されていることを確認します。

ステップ2：WooCommerce商品用の新しいフィルター要素を作成する

WPFiltersがインストールされたので、最初のフィルター要素を作成する時間です。フィルター要素とは、顧客が色やサイズでフィルタリングするなど、使用できる単一のフィルタリングオプションのことです。

開始するには、WordPress管理ダッシュボードのWPFilters » Elementsに移動します。次に、ページ上部の「新規追加」ボタンをクリックします。

まず、フィルターの名前を入力する必要があります。

この名前は管理画面での参照用です。ただし、整理しやすくするために、「色」や「フィルター」のような説明的な名前を選択することをお勧めします。

次に、顧客がこのフィルターとどのようにやり取りするかを決定するフィルターフィールドタイプを選択します。

WPFiltersにはいくつかのオプションがあります：

• チェックボックス – お客様が一度に複数のオプションを選択できます
• ラジオボタン – 一度に1つの選択のみを許可します
• ドロップダウン – スペースを節約するために、ドロップダウンメニューにオプションを表示します
• ドロップダウン（複数選択） – 複数の選択を許可するドロップダウンの種類
• 検索 – 顧客が探しているものを入力できる検索ボックスを追加する
• スライダー – 価格帯や数値に適しています
• リセット – すべての選択されたフィルターをクリアするボタンを追加します

色、サイズ、ブランドなどのほとんどの製品属性には、チェックボックスオプションを使用することをお勧めします。お客様が最も使いやすく、複数の選択肢を組み合わせることができます。

フィルタータイプを選択したら、データソースを追加する必要があります。これにより、WPFiltersは、製品カテゴリ、タグ、またはカスタム属性などの製品情報をフィルタリング対象として認識します。

データソースのドロップダウンをクリックし、フィルターしたい属性を選択します。WooCommerceで商品属性を設定している場合、それらがこのリストに表示されます。

ステップ3：WooCommerce商品フィルターをカスタマイズする

フィルター要素を作成したら、ストアでの表示方法と動作をカスタマイズできます。WPFiltersでは、フィルターをブランドに合わせ、ユーザーエクスペリエンスを向上させるためのいくつかのオプションが用意されています。

「コンテナ」セクションの設定を調整することから始めることができます。そこでは、次のことができます。

• タイトルを表示 – オプションの上にフィルター名を表示または非表示にします。
• 折りたたみ可能 – 1ページに複数のフィルターがある場合に便利です。顧客は、レイアウトをすっきりさせるために、各フィルターを展開または折りたたむことができます。
• さらに表示/非表示 – 最初はオプションの数を制限し、顧客がさらに表示したい場合はリストを展開できるようにします。これにより、長いフィルターリストがページを占有するのを防ぐのに役立ちます。
• 水平 – フィルターオプションを列ではなく行に表示します。これは、サイズのように選択肢が少ないシンプルなフィルターに適しています。

ここで「コンテナ」設定を調整する方法を示します。

次に、「アイテム」設定セクションに進みます。

• アイテム数 – 各オプションに一致する製品の数を示します。たとえば、顧客は「青 (15)」または「赤 (8)」のように表示され、クリックする前に何が利用可能かを知ることができます。
• 空 – 一致する製品がないオプションを非表示にし、フィルターをすっきりと保ち、行き止まりを回避します。
• 階層型 – 関連するオプションをグループ化し、顧客がメインカテゴリからサブカテゴリにドリルダウンできるようにします。これは大規模なストアに最適です。

これらの設定を調整したら、「変更を保存」をクリックして設定を保存します。

WPFilters は、このビルダー内のライブプレビューを更新します。

何かうまくいかない場合は、設定を元に戻して完璧になるまで調整できます。

ステップ4：フィルターをストアに埋め込む

フィルターの準備ができたので、オンラインストアに追加する時期です。WPFiltersは、フィルターを表示したい場所について柔軟なオプションを提供します。

顧客が商品を閲覧するショップページに直接フィルターを追加したり、サイドバーに配置してどのページでも簡単にアクセスできるようにしたりできます。

両方の方法をご紹介しますので、ストアに最適な方法を選択してください。

オプション 1: WooCommerce ショップページに商品属性フィルターを表示する

ブロックテーマ（DiviやTwenty Twenty-Fiveなど）を使用している場合は、ショップページをサイトエディターで開くだけで、フィルターブロックをドラッグして配置できます。

まず、WPFilters のビジュアルビルダーで「埋め込み」ボタンをクリックします。

次に、利用可能なオプションからGutenbergブロックメソッドを選択します。

次に、新しいページを作成するか既存のページを選択するかを選択します。

すでにショップページが設定されている場合は、ドロップダウンメニューから選択するだけです。

「Let’s Go!」をクリックします。

すると、ビジュアルビルダーがブロックエディターでショップページを開きます。

次に、「+」アイコンをクリックしてWPFilters Elementブロックを追加します。

ブロック設定パネルから、作成したばかりのフィルター要素を選択します。

それがコンテンツエディターにすぐに表示されるのがわかります。

作成したすべてのWPFilters要素に対して、このプロセスを繰り返すことができます。

完了したら、「変更を保存」または「更新」をクリックしてフィルターを公開します。

これで、WPFilters製品フィルターがショップページで公開され、顧客が利用できるようになりました。

オプション2：サイドバーに製品属性フィルターを表示する

フィルターをサイドバーに追加することは、特に複数のページで表示したい場合に、もう1つの優れたオプションです。サイドバーは、メインコンテンツ領域のスペースを取らずにフィルターにアクセスできるようにします。

サイドバーにフィルターを追加するには、管理画面の「外観」→「ウィジェット」に移動します。これにより、サイドバーのコンテンツを管理できるウィジェットカスタマイザーが開きます。

ここから、利用可能なウィジェットエリアのリストでWooCommerceサイドバーを探します。それをクリックしてサイドバーを展開し、現在どのようなウィジェットがあるかを確認します。

次に、プラスアイコンをクリックして新しいウィジェットを追加し、WPFilters Elementウィジェットを追加します。

表示される要素設定パネルで、ドロップダウンメニューからフィルターを選択します。

複数のフィルターウィジェットを追加して、顧客にいくつかのフィルターオプションを提供できます。

フィルターを選択したら、「更新」または「公開」をクリックしてサイドバーの変更を保存します。

このサイドバーが表示されるすべてのWooCommerceページにフィルターが表示されます。

ステップ5：WooCommerce商品フィルターをテストする

完了する前に、フィルターをテストするために数分時間を取ってください。ストアをシークレットウィンドウで開いて、顧客と同じように表示されるようにします。

フィルターの組み合わせをいくつか試して、結果が正しく更新されることを確認してください。たとえば、「グリーン」を選択して、一致する製品のみが表示されることを確認します。

また、追加した各属性をテストして、フィルターロジックがスムーズに機能することを確認することもお勧めします。各オプションの横にある製品数にも注意してください。フィルターを適用または削除すると、それらは変化するはずです。

何かうまくいかない場合は、WooCommerceで商品属性を再確認してください。すべてがスムーズに機能したら、フィルターの準備は完了です。ストアでのショッピングがずっと簡単になりました。

方法2：シンプルなWooCommerce製品フィルターを追加する（無料の方法）

WPFiltersの簡単な代替手段を探しているなら、Filter Everythingが良い選択肢です。このプラグインを選んだのは、軽量で、すべての重要なフィルター機能を提供する無料バージョンがあるからです。

Filter Everythingはクラシックテーマでより良く機能し、見栄えが良いことに注意してください。ブロックはサポートしていないため、ショートコードを使用する必要があります。これは通常、柔軟性が低いです。

ステップ1：プラグインのインストールと設定

まず、WordPress管理エリアのプラグイン » プラグインを追加に移動します。

次の画面で、検索バーを使用してFilter Everythingプラグインをすばやく見つけます。

次に、検索結果で「今すぐインストール」と「有効化」をクリックして、プロセスを完了します。

ヘルプについては、WordPressプラグインのインストール方法に関するガイドを参照してください。

有効化後、いくつかの重要なオプションを設定するには、 Filter Everything » Settings に移動してください。これらの設定は、ストアのフロントエンドでフィルターがどのように動作するかを制御します。

まず、モバイルの動作とAJAX設定を構成できます。

• モバイルデバイス – モバイルでフィルターを折りたたむか、デスクトップと同じように表示するかを選択します。折りたたんで一番上に移動することをお勧めします。これにより、見つけやすくなり、小さい画面でスペースを取りすぎなくなります。
• AJAX – フィルターが結果を即座に更新するか、各選択後にページを再読み込みするかを選択します。これにより、ページ全体を再読み込みせずに商品が即座に更新され、より高速なショッピング体験が実現するため、これを有効にしたいはずです。

「投稿コンテナのHTML IDまたはクラス」も表示されます。これは、フィルターが適用されたときにページのどの部分を更新するかをプラグインに指示します。デフォルトでは#primaryに設定されており、ほとんどの場合、そのままにしておいても安全です。

最後に、「その他」セクションに移動して、いくつかの視覚的および高度なオプションを微調整します。

• ウィジェットのプライマリカラー – フィルターボタンとチェックボックスに影響するため、ブランドのカラースキームに合った色を選択してください。
• フィルターコンテナの最大高さ（px） – フィルター領域の最大高さを設定します。リストが長すぎると、ページを下方向に押し出すのではなく、スクロール可能になります。
• 選択済みフィルター（チップ）の統合 – アクティブなフィルターを小さな「チップ」として表示できます。before_main_contentのような場所名を追加することで、表示場所を選択できます。
• デバッグモード – 何かが機能していない場合に役立つメッセージを表示します。セットアップ中に役立つ場合があります。

私の画面ではこのようになります。

これらの設定を調整したら、「変更を保存」をクリックして設定を保存します。

ステップ2：フィルターセットの作成

次に、単に連携して機能する複数のフィルターのグループであるフィルターセットを作成します。たとえば、1つのセットにカテゴリ、色、サイズのフィルターを含めることができます。

WordPressダッシュボードの Filter Everything » Filter Sets に移動します。ここで、すべての製品フィルターを整理および管理します。

これにより、フィルターセットビルダーに移動します。

最初のセットの構築を開始するには、「新しいフィルターセットを追加」ボタンをクリックしてください。

次に、わかりやすい名前を付けます。

これは参照用ですが、整理しやすくするために、「商品フィルター」や単に「フィルター」のようなわかりやすい名前を使用することをお勧めします。

次に、フィルターしたい投稿タイプ（ページ、投稿、製品、またはカスタム投稿タイプ）を選択します。

WooCommerceの商品を扱っているので、ドロップダウンから「商品」を選択し、「フィルターを追加」をクリックします。

これで、このセット内に最初の個別のフィルターを設定します。

• Filter By – ドロップダウンメニューから「Product Categories」を選択します。これにより、プラグインは割り当てられたカテゴリに基づいて製品をフィルターするようになります。
• フィルタータイトル – カテゴリーや商品カテゴリーなど、ストアに最適なものを使用してください。
• URLの変数名 – このフィールドは、categoriesのようなもので自動的に入力されます。顧客がフィルターを使用する際に、クリーンでSEOフレンドリーなURLを作成するのに役立ちます。
• ウィジェットでの表示 – 商品は多くのカテゴリーに属することができ、サブカテゴリーも特定しやすくなるため、カテゴリーにはドロップダウンが適しています。

「フィルターを追加」を再度クリックして、このセットにフィルターを追加できます。価格、色、サイズ、またはストアで使用しているその他の商品属性のフィルターを追加することをお勧めします。

必要なフィルターをすべて追加したら、「公開」をクリックしてフィルターセットをアクティブにします。

ステップ3：WooCommerceストアにフィルターを追加する

フィルターセットが作成されたので、WooCommerceストアに表示する準備ができました。Filter Everythingは、フィルターを配置するための柔軟なオプションを提供します。

サイドバーにフィルターを直接追加して簡単にアクセスできるようにする方法、またはGutenbergブロックを使用してショップページのコンテンツにフィルターを追加する方法を説明します。

オプション1：サイドバーにシンプルな商品フィルターを表示する

サイドバーにフィルターを追加するのは簡単で、複数のWooCommerceページで表示したい場合に最適です。サイドバーは、主要なコンテンツスペースを占有することなく、フィルターにアクセスできるようにします。

WordPressダッシュボードで 外観 » ウィジェット に移動します。これにより、サイドバーのすべてのコンテンツを管理するウィジェットカスタマイザーが開きます。

ウィジェットパネルで、WooCommerceのサイドバーエリアを検索します。

次に、「+」ボタンをクリックして、Filter Everything – Filterウィジェットを追加します。

ウィジェットの設定が自動的に開きます。次に、表示するものを選択できます。

• Title – ウィジェットの上部にフィルタータイトルを表示します。
• 見つかった投稿数 – 選択したフィルターに一致する製品の数を表示します。
• 選択したターム（チップ） – アクティブなフィルターを小さなチップとして表示し、顧客が一目で適用されているものを確認できるようにします。
• 水平レイアウト – フィルターを列ではなく行で表示します。これはコンパクトなレイアウトに適しています。

画面には次のように表示されます。

これらの設定を調整して、ストアのデザインに合わせることができます。

完了したら、「更新」をクリックしてウィジェットを公開します。

これで完了です！

これで、このサイドバーエリアが表示されるすべてのページで、サイドバーにフィルターが表示されます。

オプション2：WooCommerceショップページにシンプルな商品フィルターを表示する

フィルターをショップページに直接追加するには、Gutenbergエディター内の[fe_widget]ショートコードを使用します。

ただし、製品セットが複数ある場合は、そのショートコードにIDを追加する必要があります。たとえば、[fe_widget id="123"]です。このID番号は、Filter Everything » Filter Setsページの名前の横に記載されています。

製品フィルターを追加するには、Pages » All Pagesに移動して、ブロックエディターでショップページを開きます。

Gutenbergエディターで、先ほどコピーしたショートコードを通常の段落ブロックに貼り付けます。

どのように表示されるかを確認したい場合は、ページをプレビューするだけです。ショートコードブロックを配置した場所に正確に表示されるはずです。

配置に満足したら、「更新」または「公開」をクリックして変更を保存します。

製品フィルターがショップページに表示されました：

ボーナスのヒント：スマートなWooCommerce商品検索を追加する

製品フィルターを追加したので、オンラインストアのナビゲーションを次のレベルに引き上げるもう1つの機能があります。それはスマート製品検索です。

フィルターは顧客が特定の属性で閲覧するのに役立ちますが、スマート製品検索バーを使用すると、探しているものを正確に入力できます。この組み合わせにより、買い物客は好みの方法で製品を見つける柔軟性が得られます。

WooCommerceのスマート製品検索は、WordPressの基本的な検索を超えています。製品の属性、カテゴリ、SKU、さらには部分一致も理解し、関連性の高い結果を迅速に表示します。

たとえば、「青いスニーカー」を検索した場合、スマート検索はスニーカーカテゴリ内のすべての青い靴を表示します。通常のWordPress検索では、正確なフレーズがタイトルに含まれていない場合、製品が見逃される可能性があります。

フィルターとスマート検索の両方を追加することで、あらゆるニーズに対応できます。お客様は快適な方法で買い物をすることができ、より多くの購入完了につながります。

設定方法については、スマートWooCommerce製品検索を作成する方法に関する詳細ガイドをご覧ください。プロセス全体をステップバイステップで説明しています。

WooCommerce商品フィルターの設定に関するFAQ

WooCommerceでの製品フィルターの使用について、まだ質問がある場合は、これらの簡単な回答がお役に立つはずです。

製品フィルター用の信頼性が高く、高速なプラグインはありますか？

はい、WPFiltersは、WooCommerce製品フィルターの中で最も信頼性が高く、最も高速なプラグインの1つです。特に速度のために構築されており、AJAXテクノロジーを使用してページを再読み込みせずに結果を更新するため、ストアはスムーズに動作し続けます。

WooCommerce向けの最高の無料製品フィルターは？

Filter Everythingの無料版は良い選択肢です。サイトの速度を低下させることなく、カテゴリ、価格、属性などの基本的なフィルターをサポートします。唯一の欠点は、クラシックテーマで最も効果を発揮することです。

カスタム属性でWooCommerce製品をフィルターする方法は？

まず、製品 » 属性で属性を作成し、製品に割り当てる必要があります。次に、WPFiltersのようなWooCommerceフィルタープラグインを使用して、これらの属性をショップページにフィルターとして表示します。

複数のフィルターを持つWooCommerceショップページを作成する方法は？

ショップサイドバーに複数のフィルターウィジェットを追加するか、価格、カテゴリ、評価、属性などのフィルターを1つのパネルに組み合わせることができる製品フィルタープラグインを使用できます。

WooCommerceでの製品フィルターコードは何ですか？

WooCommerceには、高度なフィルター用の単一のショートコードは含まれていません。ほとんどのフィルター機能はウィジェットまたはプラグインから提供され、これらはサイトのどこにでも配置できる独自のショートコードまたはブロックを生成します。

WooCommerceストア設定を完了するための次のステップ

WooCommerceの商品フィルターの設定が完了しました。さらにWooCommerceストアを改善するために、以下の関連記事をご覧ください。

• WooCommerce SEO 完全ガイド
• WooCommerce商品ページのカスタマイズ方法
• WooCommerceで製品バンドルを販売する方法
• WooCommerceで注文後のアンケートを簡単に作成する方法
• WooCommerce向けベスト商品グリッドプラグイン

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。