WooCommerce製品を色で絞り込みたい買い物客は、ほとんどのストアで同じ壁にぶつかります。ショップページにアクセスすると、利用可能なすべての色の混合グリッドが表示され、すべての製品をクリックせずに絞り込む方法がありません。
WooCommerceには、標準でショップページ用のカラーフィルターが含まれていません。これがないと、製品グリッドにはすべてが一度に表示され、特定の色を探している顧客は、それを見つけるためにすべてのリストをスクロールする必要があります。
カラーフィルターを使用すると、買い物客は色をクリックするだけで、一致する製品のみを即座に表示できます。この単一の追加により、顧客はページに長く留まり、競合他社に送ってしまうフラストレーションを減らすことができることがわかりました。
この記事では、コードを書かずにWooCommerceストアにカラーフィルターを追加する方法を説明します。
WooCommerceストアにカラーフィルターを追加する理由
私たちの経験から、複数の色で製品を販売しているストアは、この問題によって最も多くの売上を失っています。特定の色を念頭に置いている買い物客は、グリッドがそれを探すことを強制するとあきらめてしまいます。
すべてのシャツが、色に関係なく、並べ替えの方法がない同じラックに掛けられている衣料品店のようなものだと考えてください。彼らが探しに来た赤いシャツを見つけるために、混合された100のオプションをめくりたい人はいません。
これは、衣料品、室内装飾品、アクセサリー、または色が決定要因となるあらゆる製品を販売するストアにとって最も重要です。顧客が色をすぐに見つけられないと、彼らは去り、その売上はどこか他の場所に行きます。
カラーフィルターを追加すると、適切な製品が数秒で適切な顧客の前に表示されます。それを念頭に置いて、ストアに1つを追加する方法を見てみましょう。
WooCommerceにカラーフィルターを追加する
WooCommerceにカラーフィルターを追加する最も簡単な方法は、WPFiltersのようなプラグインを使用することです。
WPFiltersは、SearchWPと同じチームによって構築された、WordPressに最適なフィルタリングプラグインです。コードを一行も書かずに、Amazonスタイルのフィルターを任意のWooCommerceストアに追加できます。
WPFiltersは、WooCommerce製品属性から色値を直接取得し、ショップページでクリック可能なフィルターオプションに変換します。カラーフィルターを、価格帯スライダー、カテゴリチェックボックス、またはキーワード検索ボックスなどの他のフィルタータイプと組み合わせて、さらに正確なショッピング体験を提供することもできます。
WPFiltersでできることは次のとおりです。
- 任意の製品属性でフィルタリング: WooCommerceのカラー属性から色値を直接取得し、顧客が選択できるチェックボックスとして表示します。
- 複数の表示形式: ストアのデザインに合わせて、カラーオプションをチェックボックス、ドロップダウン、またはラジオリストとして表示します。
- 他のフィルターと組み合わせる: サイズ、ブランド、または価格フィルターと一緒にカラーフィルターをスタックして、顧客が複数の角度から一度に結果を絞り込めるようにします。
- インスタントAJAX更新: 顧客が色を選択すると、ページのリロードなしで製品グリッドが即座に更新されます。
それでは、WooCommerceストアにカラーフィルターを設定する方法を説明します。
ステップ 1: WPFilters のインストールと有効化
まず、SearchWPのウェブサイトにアクセスし、WPFiltersアカウントにサインアップする必要があります。
アカウントをお持ちになったら、アカウントエリアにログインし、ダウンロードタブに移動します。
次に、WPFiltersをダウンロードボタンをクリックして、プラグインのZIPファイルをコンピュータに保存します。このページからライセンスキーをコピーしておくこともお勧めします。セットアップ中に必要になります。
次に、WordPressサイトにプラグインをアップロードしてインストールします。以前にこれを行ったことがない場合は、WordPressプラグインのインストール方法に関するこのガイドを参照してください。
プラグインをアクティブ化した後、セットアップウィザードが表示されます。開始するボタンをクリックし、画面の指示に従ってセットアップを完了してください。
WPFiltersの準備ができました！次に、WooCommerceの商品データを準備しましょう。
ステップ2：WooCommerceでカラー属性を設定する
フィルターを作成する前に、WooCommerceにカラー商品属性を設定する必要があります。WPFiltersは商品属性から直接値を取得するため、まだ設定していない場合は必須の手順です。
注意：すでにカラー属性があり、商品にタームが割り当てられている場合は、ステップ3にスキップできます。
まず、WordPressダッシュボードから商品 » 属性に移動し、属性を追加します。
ステップごとの手順については、WooCommerceで商品タグ、属性、カテゴリを正しく設定する方法に関するこのガイドを参照してください。
ステップ3：WPFiltersでカラーフィルター要素を作成する
次に、WordPressダッシュボードからWPFilters » 要素に移動し、新規追加ボタンをクリックします。
次に、エディタの上部で、フィルターに「カラーで絞り込む」などの名前を付けることができます。
その後、フィルターフィールドセクションに移動し、チェックボックスオプションを選択する必要があります。これにより、顧客が商品グリッドを絞り込むために選択できるカラーのチェックボックスリストが作成されます。
ここから、データソースセクションまでスクロールダウンし、ドロップダウンメニューをクリックします。
WooCommerceセクションの下で、前のステップで作成した商品カラー（pa_color）属性を選択します。WPFiltersはすべてのカラータームを自動的に取得し、フィルターに追加します。
ステップ4：カラーフィルター設定をカスタマイズする
データソースを接続したら、買い物客にとってフィルターの外観と動作を微調整できます。
コンテナセクションまでスクロールし、タイトルを表示トグルを有効にしてチェックボックスの上にラベルを表示し、訪問者がフィルターウィジェットを非表示にしてモバイルスペースを節約できるようにしたい場合は折りたたみ可能をオンにします。
次に、アイテムセクションまでスクロールします。
ここで、アイテム数オプションを有効にすると、各カラーで利用可能な商品の数が顧客に表示されるため、より迅速な意思決定が可能になります。
完了したら、一番上までスクロールして 保存 ボタンをクリックします。
左側のパネルにフィルターのライブプレビューが表示されます。
ステップ 5: WooCommerce ストアにカラーフィルターを追加する
フィルターを保存したら、最後のステップはストアに配置することです。お客様がスクロールしても常に表示され、標準の WooCommerce レイアウトに適合するため、ショップページのサイドバー ウィジェットエリア に追加することをお勧めします。
まず、WordPress ダッシュボードから 外観 » ウィジェット に移動します。お使いのテーマによって、この手順は異なる場合があります。
ここから、ショップページが使用するサイドバーエリア（通常は WooCommerce サイドバー）を見つけ、+ ボタンをクリックして新しいブロックを追加する必要があります。次に WPFilters Element を検索してウィジェットを追加します。
WPFilters Element ウィジェットブロックを追加したら、カラーフィルターを選択できます。
右側の 要素設定 パネルで、要素を選択 ドロップダウンを開き、「色でフィルタリング」フィルターを選択します。
完了したら、更新 をクリックします。
これでショップページにアクセスしてフィルターをテストしてください。チャコールカラーを選択し、割り当てられた色を持つ製品のみがグリッドに表示されることを確認します。
カラーフィルターの追加に関するよくある質問
1. WPFilters は WooCommerce からカラー値を自動的に取得しますか？
はい。フィルターを WooCommerce カラー製品属性に接続すると、WPFilters はすべてのカラータームを自動的に取得し、それぞれをチェックボックスオプションとして表示します。プラグイン内で色を手動で入力する必要はありません。
2. カラーフィルターを価格またはカテゴリフィルターと組み合わせることはできますか？
はい。WPFilters で価格、カテゴリ、サイズ、またはその他の属性の個別のフィルター要素を作成し、すべて同じサイドバーに追加できます。お客様は、たとえば赤と 50 ドル未満の価格帯でフィルタリングするなど、複数の角度から結果を絞り込むことができます。
3. カラーフィルターは、バリエーションのある WooCommerce 製品でも機能しますか？
はい。WPFilters は、バリエーション製品を含む、すべての標準 WooCommerce 製品タイプで機能します。お客様が色でフィルタリングすると、WPFilters は、他のバリエーションが異なる色で利用可能であっても、その色に一致するバリエーションを持つすべての製品を表示します。
4. お客様は一度に複数の色を選択できますか？
はい。チェックボックスフィールドタイプを使用すると、お客様は複数の色を同時に選択できます。お客様が青と黒の両方をチェックした場合、WPFilters はどちらかの色で利用可能なすべての製品を表示します。一度に 1 つの選択肢に制限したい場合は、ラジオフィールドタイプに切り替えます。
この記事が、WooCommerce 製品を色でフィルタリングする方法を学ぶのに役立ったことを願っています。また、属性で WooCommerce 製品をフィルタリングする方法 および タグで WooCommerce 製品をフィルタリングする方法 に関するガイドも参照してください。
お客様が色で製品を見つけるためのより速い方法を提供する準備はできましたか？ ここから WPFilters を使い始めることができます。
