商品フィルタリング機能は、最新のeコマースサイトには欠かせないツールだ。WooCommerce いくつかのフィルターブロックが用意されているが、そのうちのアクティブ?プロダクト?フィルタースクリーニングWare "ブロックは、"Selected Conditions "ユーティリティ機能を表示するために使用される。
この記事では、このブロックが何をするのか、どのように追加するのか、どこに配置するのか、実踐的なアドバイスを紹介する。
![畫像 [1] - WooCommerce Activity Filter Block Explained: 選択された條件を表示する便利なコンポーネント](http://gqxi.cn/wp-content/uploads/2025/05/20250528093840584-image.png)
Active Product Filtersブロックとは何ですか?
このブロックは、カラー、ブランド、価格帯など、ユーザーが現(xiàn)在選択しているフィルターを表示するために使用されます。ユーザーはクリックしてフィルターを削除したり、「すべてクリア」ボタンを使ってフィルターをリセットすることができます。
フィルタリングツールそのものではなく、他のフィルタリングと連攜して現(xiàn)在のフィルタリング狀況を表示する役割を擔っていることを忘れてはならない。
このブロックを追加する方法
操作方法は以下の通り:
- とおす ワードプレス エディターで、追加したい場所を選択します。
- 新しいブロックを追加し、"Active Product Filters "を検索して挿入する。
![畫像 [1] - WooCommerce Activity Filter Block Explained: 選択された條件を表示する便利なコンポーネント](http://gqxi.cn/wp-content/uploads/2025/05/20250528093840584-image.png)
- ページにまだ他のフィルターがない場合、このブロックは空白またはプレースホルダーを表示します。
![畫像 [1] - WooCommerce Activity Filter Block Explained: 選択された條件を表示する便利なコンポーネント](http://gqxi.cn/wp-content/uploads/2025/05/20250528093840584-image.png)
- ブロックは、ユーザーがフィルタリングしている場合にのみ、フロントエンドにコンテンツを表示します。
用フィルター
このブロックが正しく動作するためには、ページに少なくとも1つの WooCommerce フィルターブロックを提供:
- 価格で商品を絞り込む
- 色やサイズなどの屬性で商品を絞り込む
![畫像 [1] - WooCommerce Activity Filter Block Explained: 選択された條件を表示する便利なコンポーネント](http://gqxi.cn/wp-content/uploads/2025/05/20250528093840584-image.png)
- 在庫で商品を絞り込む
実際のニーズに合わせてこれらのフィルターを組み合わせ、アクティブな商品フィルターと組み合わせてページ內(nèi)容を完成させることができます。
スタイルと設(shè)定オプション
このブロックの設(shè)定項目は多くないが、基本的な機能は十分だ:
- 表示モードデフォルトはリストですが、タブ(チップ)に切り替えることもできます。
![畫像 [1] - WooCommerce Activity Filter Block Explained: 選択された條件を表示する便利なコンポーネント](http://gqxi.cn/wp-content/uploads/2025/05/20250528093840584-image.png)
- タイトルレベルカスタマイズ可能キャプションH3、H4などの階層は、ページ構(gòu)造と組み合わせて使われる。
![畫像 [1] - WooCommerce Activity Filter Block Explained: 選択された條件を表示する便利なコンポーネント](http://gqxi.cn/wp-content/uploads/2025/05/20250528093840584-image.png)
- カスケーディングスタイルシート クラス名カスタムクラス名を入力し、インターフェイスをさらに美しくするためのスタイルコードを記述するために使用することができる。
推奨配置
より推奨される方法は、このブロックをショップページのフィルターと並んで配置することです。
例えば、フィルターをページの左側(cè)に配置した場合、左側(cè)の下に配置することもできるし、フィルターが上部にある場合は、すぐ下に配置する。
このレイアウトは、より明確で、ページ上で視覚的な干渉を引き起こさないだけでなく、ユーザーがいつでも現(xiàn)在のスクリーニングステータスを表示するのに便利です。
使用上の推奨事項
- このブロックは他のフィルターと一緒に使用しないと何も表示されません。
![畫像 [1] - WooCommerce Activity Filter Block Explained: 選択された條件を表示する便利なコンポーネント](http://gqxi.cn/wp-content/uploads/2025/05/20250528093840584-image.png)
- ページレイアウトを崩さない範囲で、できるだけフィルターの下に追加する。
- ラベルのスタイルはモバイルで読みやすく、小さな畫面表示にも適しています。
よくある質(zhì)問
Q: このブロックは単獨で使用できますか?
いいえ。他のフィルターに依存しており、ページにフィルターがない場合、コンテンツは表示されません。
Q: フロントエンドでこのブロックが表示されないのはなぜですか?
ユーザーがまだフィルター條件を選択していないときは表示されません。フィルタリングの動作があると、ブロックが表示されます。
Q:このブロックはどこに設(shè)置される予定ですか?
商品一覧ページ(ショップページ)のフィルターと同じエリアに設(shè)置すると、併用しやすくなります。
概要
アクティブ商品フィルター」ブロックは、顧客が現(xiàn)在選択されているフィルターを明確に確認し、簡単に削除できる非常に便利なウィジェットです。
価格フィルター、屬性フィルター、在庫フィルターなどの他のツールと併用することで、全體的なブラウジングプロセスがよりスムーズになります。
建設(shè)中の場合 WooCommerce モールは、フィルタリング機能をより完全で直感的なものにするために、このブロックを使用することを強く推奨する。
スタイルを追加する必要がある場合は、次のように組み合わせることもできる。 カスケーディングスタイルシート 表示を調(diào)整します。あなたがより多くのWooCommerceのチュートリアルを知りたい場合は、光子のゆらぎネットワークをフォローすることを歓迎し、我々は、WordPressのウェブサイト構(gòu)築に関連する知識を共有し続けます。
お問い合わせ | |
---|---|
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業(yè)サイトのための無料ヘルプ! |
![]() カスタマーサービス WeChat
|
① 電話:020-2206-9892 | |
② QQ咨詢:1025174874 | |
三 Eメール:info@361sale.com | |
④ 勤務時間: 月~金、9:30~18:30、祝日休み |
この記事へのリンクhttp://gqxi.cn/ja/56342この記事は著作権で保護されており、必ず帰屬表示を付けて複製してください。
コメントなし