{"id":8648,"date":"2023-07-06T09:57:35","date_gmt":"2023-07-06T06:57:35","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=7326"},"modified":"2026-10-29T17:52:36","modified_gmt":"2026-10-29T15:52:36","slug":"product-filters","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/woocommerce\/product-filters\/","title":{"rendered":"Product Filters"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The <strong>Product Filters<\/strong> module, available as part of Blocksy Pro&#8217;s <strong>Shop Extra<\/strong> extension, lets customers narrow down WooCommerce product listings using categories, attributes, brands and other supported product taxonomies.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once the module is active, the <strong>Shop Filters<\/strong> block becomes available in the WordPress block editor and can be placed in supported widget areas or other suitable block-based layouts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2023\/07\/Screen-Recording-2023-07-06-at-11.18.47.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Activating the Filters module.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To activate Product Filters:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open your <strong>WordPress dashboard<\/strong>.<\/li>\n\n\n\n<li>Navigate to <strong>Blocksy \u2192 Extensions<\/strong>.<\/li>\n\n\n\n<li>Locate and expand the <strong>Shop Extra<\/strong> extension.<\/li>\n\n\n\n<li>Enable the <strong>Filters<\/strong> module.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">You can then search for the <strong>Shop Filters<\/strong> block in the Gutenberg block library and add it to your preferred filtering area.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;galleryId&quot;:&quot;6af48a9613d6b&quot;}\" data-wp-interactive=\"core\/gallery\" class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6af48a96162d0&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6af48a96162d0\" class=\"wp-block-image size-large has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" data-id=\"7331\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-06-at-11.20.57.png\" alt=\"Shop Filters block available in the WordPress block editor\" class=\"wp-image-7331\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\">The Shop Filters block.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The available controls depend on whether the block is filtering by a product taxonomy or a WooCommerce product attribute.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Taxonomy Filters<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6af48a961804b&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6af48a961804b\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"1840\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/08\/Captura-de-ecran-din-2024-09-12-la-17.25.19.png\" alt=\"Taxonomy configuration options for the Shop Filters block\" class=\"wp-image-11351\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Controls available when filtering by taxonomy.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h4 class=\"wp-block-heading\">Filter By<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Select the taxonomy that should be used for filtering. Depending on your WooCommerce configuration, this can include product categories, tags, brands and other supported product taxonomies.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Display Type<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose how the available filter terms are arranged:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>List<\/strong> &#8211; displays the filter terms vertically.<\/li>\n\n\n\n<li><strong>Inline<\/strong> &#8211; places the terms horizontally and allows them to wrap onto additional lines when required.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Multiple Selections<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Allow customers to select more than one term from the filter instead of restricting the filter to a single selection.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Show Search Box<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Add a search field above the available terms. This is particularly useful for taxonomies containing a large number of choices.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Show Checkboxes<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">When <strong>Multiple Selections<\/strong> is enabled, display a checkbox next to each term to make multi-selection clearer.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Show Hierarchy<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Preserve the parent-child structure of hierarchical taxonomies, such as product categories with nested subcategories.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Show Counter<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Display the number of matching products next to each available filter term.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Exclude Category<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Exclude selected product categories from the list of available filtering choices.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Show Reset Button<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Add a reset control that lets customers clear the selections made through the filter.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Attribute Filters<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6af48a9618c6c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6af48a9618c6c\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"2060\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/08\/Captura-de-ecran-din-2024-09-12-la-17.25.42.png\" alt=\"Product attribute configuration options for the Shop Filters block\" class=\"wp-image-11352\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Controls available when filtering by product attribute.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h4 class=\"wp-block-heading\">Filter By<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Select the WooCommerce product attribute that should be used for filtering, such as size, Color, material or another attribute configured for your products.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Display Type<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Display the available attribute terms as a vertical <strong>List<\/strong> or an <strong>Inline<\/strong> arrangement that can wrap across multiple rows.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Multiple Selections<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Allow customers to select multiple values from the same product attribute when refining the product listing.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Show Search Box<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Display a search field for quickly finding a particular attribute value when the filter contains many choices.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Show Checkboxes<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">When multiple selections are available, display checkboxes next to the attribute values.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Show Swatches<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">When the selected product attribute has swatches configured, display those swatches inside the filter instead of relying only on text values.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Show Label<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose whether the text label is displayed alongside each attribute swatch. Disable it if you prefer to show the swatches on their own.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Show Counter<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Display the number of matching products alongside each attribute value.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Show Tooltip<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Display the attribute value inside a tooltip when visitors interact with a swatch. This is particularly useful when text labels are hidden.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Exclude Product Attributes<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Remove selected attribute values from the filter so they are not presented as filtering choices.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Show Reset Button<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Add a reset control that clears the selections made through the attribute filter.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Front-End Result<\/h2>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6af48a961957c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6af48a961957c\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-06-at-11.57.04.png\" alt=\"Example of Blocksy Product Filters displayed on a WooCommerce product archive\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">An example of Product Filters displayed on the front end.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The Product Filters module, available as part of Blocksy Pro&#8217;s Shop Extra extension, lets customers narrow down WooCommerce product listings using categories, attributes, brands and other supported product taxonomies. Once the module is active, the Shop Filters block becomes available in the WordPress block editor and can be placed in supported widget areas or other [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[117],"class_list":["post-8648","documentation","type-documentation","status-publish","hentry","doc_categories-woocommerce"],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/8648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=8648"}],"version-history":[{"count":6,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/8648\/revisions"}],"predecessor-version":[{"id":15459,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/8648\/revisions\/15459"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=8648"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=8648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}