In e-commerce websites, when the number and categorization of products are increasing, providing convenient filtering functions becomes an important way to improve shopping efficiency.Blocksy Introduced a new set of product screening Gutenberg Blocks to help websites better manage rich product categorization, attributes, brand information, and price ranges, improving overall page presentation and customer shopping convenience.
![Image[1]-Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427114148584-image.png)
Product Filtering Module Introduction
Blocksy's Product Filtering module is part of the Shop Extra extension for Blocksy Pro(Open for users of the Professional or Agency packages. The modules are based on Gutenberg The editor, with its flexible and easy-to-use features, supports the quick addition of many types of filters, including category filters, attribute filters, brand filters and price filters.
Setup Process
exist WordPress Backend, go to Appearance → Gadgets and select the corresponding WooCommerce Sidebar area, start adding filter blocks.
![Image [2]-Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427135111505-image.png)
Add Price Filter
- Search and add price filter blocks
![Image [3] - Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427135205927-image.png)
- The price filter consists of two sub-blocks: the header and the filter control.
![Image [4] - Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427135405767-image.png)
- You can enable an alert feature that displays a small value pop-up window when the customer drags the price range.
- Support for displaying the currently selected price range
- Reset button can be turned on, so that customers can restore the complete product list with one click
![Image [5]-Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427135454140-image.png)
Add Category Filter
- Search and add product filter blocks
![Image [6]-Blocksy Product Filtering Module to optimize the shopping experience of e-commerce websites](https://www.361sale.com/wp-content/uploads/2025/04/20250427135632462-image.png)
- Choose to filter by category, tag, brand or custom taxonomy in the settings
![Image [7]-Blocksy Product Filtering Module to optimize the shopping experience of e-commerce websites](https://www.361sale.com/wp-content/uploads/2025/04/20250427135840257-image.png)
- Supports multiple selections
![Image [8]-Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427140111637-image.png)
- Search box can be enabled to quickly locate filtered items
![Image [9]-Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427140156776-image.png)
- Supports display of checkboxes, parent-child category hierarchy, number of products per filter item
![Image [10]-Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427140324734-image.png)
- You can manually exclude categories you do not want to display
- Provide a reset filter button to facilitate the restoration of the initial state
![Image [11]-Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427140445855-image.png)
Add Brand Filter
- The operation is similar to the sorting and filtering
- Supports the display of brand icons to enhance brand recognition
![Image [12]-Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427140635597-image.png)
- Text labels can be turned off to keep only the branded icon display
![Image [13]-Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427140709214-image.png)
Adding Property Filters
- Select specific product attributes in the filter settings
- Swatches can be enabled, such as color blocks or patterns, to enhance visual intuition.
![Image [14]-Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427141023686-image.png)
Page display effect
On the front end page, customers can:
- Drag the price slider to quickly filter items that match the price range
![Image [15]-Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427141140256-image.png)
- Multi-filter by category, brand or attribute conditions to combine precise results
![Image [16]-Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427141222984-image.png)
- Easily view applied filters and cancel an item individually or reset all filters with one click!
The filter module supports simultaneous display in the sidebar or in the top area of the product list for flexible adjustment to the site layout.
Filter Reset Function
Blocksy Filter status management is also provided. In the product archive page settings, you can enable the "current filter conditions" area, so that customers can clearly see the filter conditions have been applied, and support for individual cancellation or one-click reset all the conditions, to further optimize the shopping process.
![Image [17]-Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427141534433-image.png)
![Image [18]-Blocksy Product Filtering Module to Optimize Ecommerce Website Shopping Experience](https://www.361sale.com/wp-content/uploads/2025/04/20250427141554661-image.png)
summarize
Blocksy s Product Filter module provides a flexible, beautiful and feature-rich product filtering system for e-commerce websites. Whether by price, category, brand or attribute, you can quickly build a professional-level filtering experience. The module is intuitive and simple to set up, and can effectively improve the efficiency of product browsing and customer satisfaction, suitable for all kinds of e-commerce platforms that need to strengthen the product display and screening functions.
Recent Updates
Link to this article:https://www.361sale.com/en/52430The article is copyrighted and must be reproduced with attribution.




















![Emoji[wozuimei]-Photonflux.com | Professional WordPress repair service, worldwide, rapid response](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![Emoticon[baoquan] - Photon Wave Network | Professional WordPress Repair Services, Worldwide Coverage, Rapid Response](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

No comments