WooCommerce Active Product Filters Block User Guide

The product filtering feature is an essential tool in modern e-commerce websites.WooCommerce A number of filter blocks are provided, of which the Active Product FiltersscreeningThe "Ware" block is a small utility to show the "Selected Conditions".

This article takes you through what this block does, how to add it, where to place it, and some practical advice.

Image [1] - WooCommerce Activity Filter Block Explained: Useful Component for Displaying Selected Criteria

What is the Active Product Filters block?

This block is used to display the user's currently selected filters, such as color, brand, or price range. Users can click to remove a filter or reset the filter using the "Clear All" button.

It should be reminded that it is not a filtering tool itself, the role is to cooperate with other filters to show the current filtering status.

Ways to add this block

The method of operation is as follows:

  • show (a ticket) WordPress editor, select the location where you want to add it.
  • Add a new block, search for "Active Product Filters" and insert it.
Image [1] - WooCommerce Activity Filter Block Explained: Useful Component for Displaying Selected Criteria
  • If there are no other filters on the page yet, this block displays a blank space or placeholder.
Image [1] - WooCommerce Activity Filter Block Explained: Useful Component for Displaying Selected Criteria
  • The block will only display content on the front end if the user is filtering.

Filters for use with

For this block to work properly, the page needs to include at least one WooCommerce Filter blocks provided, including:

  • Filter Products by Price
  • Filter Products by Attribute (attribute filtering, e.g. color, size)
Image [1] - WooCommerce Activity Filter Block Explained: Useful Component for Displaying Selected Criteria
  • Filter Products by Stock

You can combine these filters to suit your actual needs, and then pair them with the active product filter to complete the page content.

Styles and Setting Options

Although there are not many settings in this block, the basic functions are sufficient:

  • Display mode: The default is a list, you can also switch to tabs (Chips), more suitable for clean layout.
Image [1] - WooCommerce Activity Filter Block Explained: Useful Component for Displaying Selected Criteria
  • Title level: CustomizablecaptionHierarchies, such as H3, H4, etc., are used in conjunction with the page structure.
Image [1] - WooCommerce Activity Filter Block Explained: Useful Component for Displaying Selected Criteria
  • CSS class name: You can enter a custom class name that can be used to write style code to further beautify the interface.

Recommended placement

The more recommended practice is to put this block in the store page with the filters.

For example, if you put the filter on the left side of the page, it can also be placed below the left side; if the filter is at the top, it is placed immediately below.

This layout is clearer, does not cause visual interference on the page, and is also convenient for users to view the current screening status at any time.

Recommendations for use

  • This block must be used with other filters or nothing will be displayed.
Image [1] - WooCommerce Activity Filter Block Explained: Useful Component for Displaying Selected Criteria
  • Add as far below the filter as possible without disrupting the page layout.
  • Label styles are easier to read on mobile and are suitable for small screen displays.

Frequently Asked Questions

Q: Can I use this block alone?
No. It relies on other filters, and if there are no filters on the page, the content will not be displayed.

Q: Why can't I see this block in the frontend?
It is not displayed when the user has not yet selected the filter criteria. Once there is filtering behavior, the block appears.

Q: Where is this block proposed to be placed?
It is recommended to place it in the product listing page (Shop page) in the same area as the filters for easy use together.

summarize

The Active Product Filters block is a very useful widget that allows customers to clearly see the currently selected filters and easily remove them.

Use with other tools such as Price Filter, Attribute Filter, Inventory Filter, etc. for a smoother overall browsing process.

If you are building WooCommerce Mall, it is highly recommended to use this block to make the filtering function more complete and intuitive.

If you need to add styles, you can also combine CSS Adjust the display. If you want to know more WooCommerce tutorials, welcome to follow the photon fluctuation network, we continue to share WordPress website building related knowledge.


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
Customer Service
Customer Service
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
This article was written by: thieves will be rats and mice courage
THE END
If you like it, support it.
kudos103 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments