オンラインショッピングは簡単に感じるはずです。しかし、店舗に何十、何百もの製品が1ページに詰め込まれていると、適切な商品を見つけることは、整理された店を閲覧するというより、フリーマーケットの服の山を掘り起こすようなものになります。
これは多くのWooCommerceストアオーナーが直面する問題です。製品はすべて揃っており、ストアは素晴らしく見えますが、顧客は必要なものを十分な速さで見つけることができません。
そして、それが起こると、彼らは去っていきます。ドロップダウンフィルターは、買い物客がカテゴリ、サイズ、色、価格、またはその他の属性で製品を1回のクリックで絞り込めるようにすることで、これを解決します。
このチュートリアルでは、WooCommerce製品のドロップダウンフィルターを作成する方法を説明します。
WooCommerceストアにドロップダウンフィルターが必要な理由
何も整理されていない服屋に入ることを想像してください。シャツ、パンツ、靴、ジャケットがすべて同じラックに混ざっています。あなたは中くらいのサイズの青いジャケットを探していますが、それを見つける唯一の方法は、すべてのアイテムを一つずつ確認することです。ほとんどの人はそのまま出ていくでしょう。
ドロップダウンフィルターのないWooCommerceストアでは、まさにこれが起こります。
顧客がストアページにアクセスしたときに、並べ替えの方法がない製品の壁を見ると、すぐにイライラします。
彼らは、目的の商品を見つけるためだけに10ページものアイテムをクリックしたくありません。そのほとんどは手間をかけません。タブを閉じて、ナビゲートしやすい競合他社から購入します。
優れた製品を持っているがフィルタリングが不十分なストアで、この状況を何度も見てきました。トラフィックはありますが、売上はそれに追いついていません。顧客はストアページにアクセスしても、何も購入せずに去っていきます。ドロップダウンフィルターは、しばしば欠けているピースです。
ドロップダウンフィルターがこれほど実用的な解決策である理由は次のとおりです。買い物客に、結果を絞り込むためのクリーンで使い慣れた方法を提供します。
200個の製品をスクロールする代わりに、顧客はドロップダウンを開き、「大きい」、「赤」、または「50ドル未満」を選択するだけで、一致する製品のみを即座に表示できます。これは、人々をあなたのサイトに長く留め、チェックアウトに近づけるような体験です。
これがないと、多くの売上を逃していることになります。そして良いニュースは、設定に開発者や技術的な知識は必要ないということです。WooCommerceストアにドロップダウンフィルターを簡単に追加する方法を見てみましょう。
WooCommerceでドロップダウンフィルターを表示する方法
WooCommerceにドロップダウンフィルターを追加する最も簡単な方法は、WPFiltersのようなプラグインを使用することです。
WPFiltersは、WordPressに最適なフィルタリングプラグインであり、コードを一行も書かずにAmazonスタイルのフィルターをWooCommerceストアに追加できます。
SearchWPと同じチームによって構築されているため、信頼性が高く、製品データを効率的に処理できることを私たちは知っています。
WPFiltersを使用すると、顧客がカテゴリ、タグ、商品属性、またはカスタムタクソミーで商品を絞り込めるドロップダウンメニューを作成できます。ドロップダウンフィルターを、価格スライダー、チェックボックス、キーワード検索ボックスなどの他のフィルタータイプと組み合わせることもできます。
WPFiltersでできることのいくつか：
- 商品カテゴリ、タグ、属性、カスタムフィールドのドロップダウンフィルターを作成
- サイドバーまたは商品グリッドの上に複数のフィルターをまとめて表示
- コードに触れることなく、ラベル、プレースホルダーテキスト、表示オプションをカスタマイズ
- ページをリロードせずにリアルタイムで結果を絞り込む
それでは、WooCommerceストアでドロップダウンフィルターを設定する方法を説明しましょう。
ステップ 1: WPFilters のインストールと有効化
まず、SearchWPのウェブサイトにアクセスし、WPFiltersアカウントにサインアップする必要があります。アカウントを作成したら、ログインしてアカウントダッシュボードのダウンロードタブをクリックしてください。
次に、WPFiltersのダウンロードボタンをクリックして、プラグインのZIPファイルをコンピューターに保存します。このページからライセンスキーをコピーしておくこともお勧めします。セットアップ中に必要になります。
次に、プラグインをWordPressサイトにアップロードしてインストールする必要があります。これを行ったことがない場合は、WordPressプラグインのインストール方法に関するこの初心者向けガイドに従ってください。
プラグインがアクティブになると、WPFiltersセットアップウィザードが画面に表示されます。「開始しましょう」ボタンをクリックしてください。
これで、最初のドロップダウンフィルターの作成に進むことができます。
ステップ2：新しいフィルター要素を追加する
WPFiltersが稼働したので、ドロップダウンフィルターを作成する時間です。
開始するには、WordPressダッシュボードからWPFilters » Elementsに移動し、「新規追加」ボタンをクリックします。
画面の上部には、フィルターに名前を付けるフィールドがあります。
後でフィルターをさらに追加する予定がある場合は、特に「商品カテゴリ」や「タグで絞り込む」のように、わかりやすい名前を使用することをお勧めします。明確な名前は、整理を維持するのに役立ちます。
次に、名前の下にあるフィルターフィールドセクションを確認します。ここで、フィルターがストアでどのように表示され、どのように機能するかを選択します。
WPFiltersでは、チェックボックス、ラジオボタン、スライダーなど、いくつかのオプションが用意されています。
ドロップダウンフィルターを作成しているので、「ドロップダウン」オプションを選択してください。
設定を保存するとすぐに、フィルターのライブプレビューが右側のパネルに表示されることに気付くでしょう。
ステップ3：フィルターをWooCommerceデータソースに接続する
ドロップダウンフィルタータイプが選択されたら、次のステップはWPFiltersに情報の取得元を伝えることです。これが、フィルターが買い物客にとって実際に役立つ理由です。
「データソース」セクションまでスクロールダウンし、ドロップダウンメニューをクリックします。利用可能なデータソースのリストが表示されるので、そこから選択します。今回はWooCommerceストアを扱うので、リストからWooCommerce固有のオプションを選択したいはずです。
たとえば、顧客がカテゴリでフィルタリングしたい場合は「商品カテゴリ」、商品にタグを付けた場合は「商品タグ」を選択できます。
WooCommerceで設定した色、サイズ、素材などの特定の商品属性を選択することもできます。
それが完了すると、WPFiltersは関連データを自動的に取得し、ドロップダウンフィルターに接続します。
ステップ4：ドロップダウンフィルターの設定をカスタマイズする
フィルターがデータソースに接続されたので、ストアに合わせて見た目と感触を調整する時期です。WPFiltersは、設定に圧倒されることなく、カスタマイズオプションの良いセットを提供します。
まず「コンテナ」セクションまでスクロールダウンできます。ここでフィルター全体の動作を制御します。
「タイトルを表示」オプションを有効にすると、訪問者はドロップダウンが何のためのものかを正確に知ることができます。
フィルターを「折りたたみ可能」にするオプションもあります。これは、複数のフィルターをサイドバーに追加する場合に便利です。これにより、物事が整理され、ページが過度に散らかるのを防ぎます。
フィルターの選択肢を垂直に積み重ねるのではなく、横並びに表示したい場合は「水平」オプションもあります。
次に、「アイテム」セクションまで少しスクロールダウンします。ここでは、「アイテム数」などのオプションを有効にできます。これは、買い物客にドロップダウンの各オプションで利用可能な商品の数を示します。
右側のライブプレビューで全体の外観に満足したら、一番上までスクロールバックして「保存」ボタンをクリックし、変更を保存します。
ステップ5：ドロップダウンフィルターをWooCommerceストアに追加する
ドロップダウンフィルターを保存したら、顧客が実際に使用できる場所に配置する時期です。WPFiltersでは、これを行うためのいくつかの異なる方法が提供されています。
1. ドロップダウンフィルターをショップページに追加する
ショップページは、ほとんどの顧客が閲覧する場所なので、ドロップダウンフィルターを追加するのに最適な場所の1つです。開始するには、フィルター要素ページの右上隅にある「埋め込み」ボタンをクリックします。
ポップアップウィンドウが表示され、いくつかの埋め込みオプションがあります。「Gutenbergブロック」、「ショートコード」、「PHPコード」から選択できます。ほとんどのストアオーナーにとって、Gutenbergブロックは最も簡単なオプションです。
「Gutenbergブロック」オプションを選択し、「既存のページを選択」をクリックします。
そこから、ショップページの Стр.名をタイプして、ドロップダウンメニューから選択します。Let’s Go ボタンをクリックすると、WPFilters はフィルターブロックが既に追加された状態で、WordPress コンテンツエディターにショップページを読み込みます。
見た目に満足したら、Update ボタンをクリックして変更を保存してください。
2. サイドバーにドロップダウンフィルターを追加する（推奨）
フィルターをサイドバーに追加することは、もう一つの優れた選択肢であり、ほとんどの WooCommerce ストアオーナーに推奨するものです。なぜなら、お客様がストア内のさまざまなページを閲覧する際に、常に表示させておきたいからです。
これを行うには、WordPress ダッシュボードから Appearance » Widgets に移動します。使用している WordPress テーマによって、この手順が若干異なる場合があることに注意してください。
WooCommerce ストアのサイドバーセクションを見つけ、+ ボタンをクリックして新しいブロックを追加します。WPFilters Element ウィジェットブロックを検索して追加します。
ブロックが追加されたら、右側の設定パネルを確認します。
Select Element ドロップダウンメニューをクリックして、作成したばかりのドロップダウンフィルターを選択するだけです。完了したら、Update ボタンをクリックしてすべてを保存します。
ステップ 6: ドロップダウンフィルターをテストする
フィルターがストアで公開されたので、すべてが意図したとおりに機能していることを確認することが重要です。テストは数分で完了しますが、後でお客様が問題に遭遇するのを避けることができます。
サイトのフロントエンドで WooCommerce ストアにアクセスしてください。ドロップダウンフィルターを追加したページまたはサイドバーに移動して、訪問者にどのように表示されるかを確認してください。
ここから、ドロップダウンをクリックして利用可能なオプションのいずれかを選択できます。たとえば、製品タグで並べ替えるようにフィルターを設定した場合は、リストからタグを選択してください。
ページ上の製品は、選択した項目と一致するアイテムのみを表示するようにすぐに更新されるはずです。
フィルターが正しく機能している場合、製品グリッドが関連する結果のみに絞り込まれるのがわかります。
WooCommerce のドロップダウンフィルターに関する FAQ
1. 複数のドロップダウンフィルターを一度に追加できますか？
はい。必要な数のフィルター要素を作成し、同じ場所に配置できます。たとえば、「カテゴリでフィルタリング」ドロップダウンと「色でフィルタリング」ドロップダウン、および価格帯スライダーを積み重ねて、顧客が複数の角度から一度に結果を絞り込めるようにすることができます。
2. ドロップダウンフィルターは製品のバリエーションで機能しますか？
はい。WPFilters は、バリアブル製品を含む、すべての標準 WooCommerce 製品タイプで機能します。色やサイズなどの製品属性でフィルタリングする場合、WPFilters は一致するバリエーションオプションを持つ製品を表示します。
3. フィルタリングは即座に行われますか、それともページがリロードされますか？
フィルタリングはページをリロードせずにリアルタイムで行われます。顧客がドロップダウンからオプションを選択すると、製品リストは即座に更新され、ショッピング体験は迅速かつスムーズに保たれます。
4.自分で追加したカスタムタクソノミーで使用できますか？
はい。WPFiltersは、組み込みのWooCommerce製品カテゴリや属性に加えて、カスタムタクソノミーもサポートしています。製品にカスタムタクソノミーを登録した場合、フィルターの設定時にデータソースのドロップダウンにオプションとして表示されます。
この記事がWooCommerce製品のドロップダウンフィルターの作成方法を学ぶのに役立ったことを願っています。WooCommerce製品リストに検索ボックスフィルターを追加する方法やWordPressで範囲フィルターを作成する方法に関するガイドも参照することをお勧めします。
顧客が製品を見つけるためのより良い方法を提供する準備はできましたか？ここからWPFiltersを使い始めることができます。
