WooCommerce製品を色で絞り込みたい買い物客は、ほとんどのストアで同じ壁にぶつかります。ショップページにアクセスすると、利用可能なすべての色の混合グリッドが表示され、すべての製品をクリックせずに絞り込む方法がありません。
WooCommerceには、標準でショップページ用のカラーフィルターが含まれていません。これがないと、製品グリッドにはすべてが一度に表示され、特定の色を探している顧客は、それを見つけるためにすべてのリストをスクロールする必要があります。
カラーフィルターを使用すると、買い物客は色をクリックするだけで、一致する製品のみを即座に表示できます。この単一の追加により、顧客はページに長く留まり、競合他社に送ってしまうフラストレーションを減らすことができることがわかりました。
この記事では、コードを書かずにWooCommerceストアにカラーフィルターを追加する方法を説明します。
WooCommerceストアにカラーフィルターを追加する理由
私たちの経験から、複数の色で製品を販売しているストアは、この問題によって最も多くの売上を失っています。特定の色を念頭に置いている買い物客は、グリッドがそれを探すことを強制するとあきらめてしまいます。
すべてのシャツが、色に関係なく、並べ替えの方法がない同じラックに掛けられている衣料品店のようなものだと考えてください。彼らが探しに来た赤いシャツを見つけるために、混合された100のオプションをめくりたい人はいません。
これは、衣料品、室内装飾品、アクセサリー、または色が決定要因となるあらゆる製品を販売するストアにとって最も重要です。顧客が色をすぐに見つけられないと、彼らは去り、その売上はどこか他の場所に行きます。
カラーフィルターを追加すると、適切な製品が数秒で適切な顧客の前に表示されます。それを念頭に置いて、ストアに1つを追加する方法を見てみましょう。
WooCommerceにカラーフィルターを追加する
WooCommerceにカラーフィルターを追加する最も簡単な方法は、WPFiltersのようなプラグインを使用することです。
WPFiltersは、SearchWPと同じチームによって構築された、WordPressに最適なフィルタリングプラグインです。コードを一行も書かずに、Amazonスタイルのフィルターを任意のWooCommerceストアに追加できます。
WPFiltersは、WooCommerce製品属性から色値を直接取得し、ショップページでクリック可能なフィルターオプションに変換します。カラーフィルターを、価格帯スライダー、カテゴリチェックボックス、またはキーワード検索ボックスなどの他のフィルタータイプと組み合わせて、さらに正確なショッピング体験を提供することもできます。
WPFiltersでできることは次のとおりです。
- 任意の製品属性でフィルタリング: WooCommerceのカラー属性から色値を直接取得し、顧客が選択できるチェックボックスとして表示します。
- 複数の表示形式: ストアのデザインに合わせて、カラーオプションをチェックボックス、ドロップダウン、またはラジオリストとして表示します。
- 他のフィルターと組み合わせる: サイズ、ブランド、または価格フィルターと一緒にカラーフィルターをスタックして、顧客が複数の角度から一度に結果を絞り込めるようにします。
- インスタントAJAX更新: 顧客が色を選択すると、ページのリロードなしで製品グリッドが即座に更新されます。
Now, let’s walk through how to set up a color filter on your WooCommerce store.
ステップ 1: WPFilters のインストールと有効化
First, you will need to visit the SearchWP website and sign up for a WPFilters account.
Once you have an account, log in to your account area and go to the Downloads tab.
Then, click the Download WPFilters button to save the plugin’s ZIP file to your computer. We also recommend copying your license key from this page, as you will need it during setup.
Next, upload and install the plugin on your WordPress site. If you have not done this before, see this guide on how to install a WordPress plugin.
After activating the plugin, the setup wizard will appear. Simply click the Let’s Get Started button and follow the onscreen instructions to finish the setup.
WPFilters is all set! Now let’s prepare your WooCommerce product data.
Step 2: Set Up a Color Attribute in WooCommerce
Before you can build the filter, you need a Color product attribute set up in WooCommerce. WPFilters pulls its values directly from your product attributes, so this is a required step if you have not done it already.
Note: If you already have a Color attribute with terms assigned to your products, you can skip ahead to Step 3.
To start, first go to Products » Attributes from your WordPress dashboard and then add your attributes.
For step-by-step instructions, you can see this guide on how to properly set up product tags, attributes, and categories in WooCommerce.
Step 3: Create a Color Filter Element in WPFilters
Now navigate to WPFilters » Elements from your WordPress dashboard and click the Add New button.
Next, you can give your filter a name at the top of the editor, such as Filter by Color.
After that, you will need to head to the Filter Fields section and select the Checkbox option. This creates a list of checkboxes for each color that customers can select to narrow the product grid.
From here, you can scroll down to the Data Source section and click the dropdown menu.
Under the WooCommerce section, select the Product Color (pa_color) attribute you created in the previous step. WPFilters will automatically pull all of your color terms and add them to the filter.
Step 4: Customize the Color Filter Settings
With the data source connected, you can fine-tune how the filter looks and behaves for your shoppers.
Scroll to the Container section and enable the Show Title toggle to display a label above the checkboxes, and turn on Collapsible if you want visitors to be able to hide the filter widget to save space on mobile.
Next, scroll to the Items section.
Here, enabling the Item Count option shows customers how many products are available for each color so they can make faster decisions.
完了したら、一番上までスクロールして 保存 ボタンをクリックします。
左側のパネルにフィルターのライブプレビューが表示されます。
ステップ 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 を使い始めることができます。
