{"id":11219,"date":"2024-08-28T18:33:58","date_gmt":"2024-08-28T15:33:58","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&p=11219"},"modified":"2026-10-08T14:32:59","modified_gmt":"2026-10-08T11:32:59","slug":"shop-filters","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/theme-blocks\/shop-filters\/","title":{"rendered":"Shop Filters"},"content":{"rendered":"\n
\n
\"Shop\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
The Shop Filters block in action.<\/figcaption><\/figure>\n\n\n\n

The Shop Filters<\/strong> block lets customers refine WooCommerce product listings using product categories, tags, brands, attributes and other supported taxonomies.<\/p>\n\n\n\n

It forms part of Blocksy’s Product Filters<\/strong><\/a> system and can be placed in supported widget areas, the Filters Canvas or other suitable block-based shop layouts.<\/p>\n\n\n\n

\n

Blocksy Pro required<\/strong>
The Shop Filters block is part of the Product Filters<\/strong> module included with Shop Extra. WooCommerce, Blocksy Companion Pro and a Business or Agency plan are required.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Getting Started<\/h2>\n\n\n\n

Before adding the Shop Filters block, enable the Product Filters module:<\/p>\n\n\n\n

    \n
  1. Navigate to WordPress Dashboard \u2192 Blocksy \u2192 Extensions<\/strong>.<\/li>\n\n\n\n
  2. Locate and expand the Shop Extra<\/strong> extension.<\/li>\n\n\n\n
  3. Enable the Filters<\/strong> module.<\/li>\n\n\n\n
  4. Open the block editor for the shop area where you want to display the filter.<\/li>\n\n\n\n
  5. Search for Shop Filters<\/strong> in the block inserter and add it to the layout.<\/li>\n<\/ol>\n\n\n\n

    Select the block to choose what should be used for filtering. The available controls change depending on whether you select a taxonomy or a WooCommerce product attribute.<\/p>\n<\/div>\n\n\n\n

    \n

    Taxonomy Filters<\/h2>\n\n\n\n
    \n
    \n
    \"Taxonomy\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
    Controls available when filtering by taxonomy.<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n

    Filter By<\/h3>\n\n\n\n

    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

    Custom taxonomies registered for WooCommerce products can also be used as filtering sources.<\/p>\n\n\n\n

    Display Type<\/h3>\n\n\n\n

    Choose how the available terms are arranged:<\/p>\n\n\n\n

      \n
    • List<\/strong> \u2013 displays the filter terms vertically.<\/li>\n\n\n\n
    • Inline<\/strong> \u2013 arranges the terms horizontally and allows them to wrap onto additional rows when required.<\/li>\n<\/ul>\n\n\n\n

      Multiple Selections<\/h3>\n\n\n\n

      Enable Multiple Selections<\/strong> to let customers select more than one term from the same filter. Disable it when only one term should be active at a time.<\/p>\n\n\n\n

      Show Search Box<\/h3>\n\n\n\n

      Display a search field above the taxonomy terms so customers can quickly find a particular option when the filter contains a large number of choices.<\/p>\n\n\n\n

      The search field’s placeholder text can also be customised to better describe the available choices.<\/p>\n\n\n\n

      Show Checkboxes<\/h3>\n\n\n\n

      When multiple selections are enabled, display a checkbox alongside each taxonomy term to make the selection state clearer.<\/p>\n\n\n\n

      Show Hierarchy<\/h3>\n\n\n\n

      Preserve the parent-child structure of hierarchical taxonomies, such as product categories containing nested subcategories.<\/p>\n\n\n\n

      This option can also be used with hierarchical product-brand structures when the corresponding taxonomy supports them.<\/p>\n\n\n\n

      Show Images<\/h3>\n\n\n\n

      Display an image alongside taxonomy terms when image data is available for the selected taxonomy. This can be useful for visual category or brand filters where an image helps distinguish the available choices.<\/p>\n\n\n\n

      Show Counter<\/h3>\n\n\n\n

      Display the number of products that currently match each taxonomy term. The counters respond to the active filtering context so customers can see how many matching products remain available.<\/p>\n\n\n\n

      Exclude Category<\/h3>\n\n\n\n

      When filtering by product categories, exclude selected categories from the list of available filtering choices.<\/p>\n\n\n\n

      Show Reset Button<\/h3>\n\n\n\n

      Display a reset control that clears selections made through the filter and returns it to its initial state.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

      \n

      Attribute Filters<\/h2>\n\n\n\n
      \n
      \n
      \"Product\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
      Controls available when filtering by product attribute.<\/figcaption><\/figure>\n<\/div>\n\n\n\n
      \n

      Filter By<\/h3>\n\n\n\n

      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

      Display Type<\/h3>\n\n\n\n

      Display the available attribute values as a vertical List<\/strong> or an Inline<\/strong> arrangement that can wrap across multiple rows.<\/p>\n\n\n\n

      Multiple Selections<\/h3>\n\n\n\n

      Allow customers to select multiple values from the same product attribute when refining the product listing.<\/p>\n\n\n\n

      Show Search Box<\/h3>\n\n\n\n

      Display a search field for finding a specific attribute value when the filter contains many choices. The placeholder shown inside the search field can also be customised.<\/p>\n\n\n\n

      Show Checkboxes<\/h3>\n\n\n\n

      When multiple selections are available, display a checkbox alongside each attribute value to make its selected state more apparent.<\/p>\n\n\n\n

      Show Swatches<\/h3>\n\n\n\n

      When swatches are configured for the selected WooCommerce attribute, enable this option to display them inside the filter. Depending on the attribute configuration, these can provide a more visual representation of values such as Colors or other product options.<\/p>\n\n\n\n

      Show Label<\/h3>\n\n\n\n

      Choose whether the attribute value’s text label is displayed alongside its swatch. Disable the label when you want the filter to rely on the swatches themselves.<\/p>\n\n\n\n

      Show Counter<\/h3>\n\n\n\n

      Display the number of matching products alongside each attribute value. These counters update according to the current filtering context.<\/p>\n\n\n\n

      Show Tooltip<\/h3>\n\n\n\n

      Display the attribute value in a tooltip when visitors interact with a swatch. This is particularly useful when the text labels are hidden.<\/p>\n\n\n\n

      Exclude Product Attributes<\/h3>\n\n\n\n

      Exclude selected attribute values when they should not be presented as filtering choices.<\/p>\n\n\n\n

      Show Reset Button<\/h3>\n\n\n\n

      Display a reset control that clears selections made through the attribute filter and restores its initial state.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

      \n

      Combining Multiple Filters<\/h2>\n\n\n\n

      You can add multiple Shop Filters blocks to the same filtering area, with each block configured for a different taxonomy or product attribute. For example, a shop can provide separate filters for product categories, brands, sizes and Colors.<\/p>\n\n\n\n

      The filters work together against the current WooCommerce product listing, allowing customers to progressively narrow the available products using several criteria.<\/p>\n\n\n\n

      You can also combine Shop Filters with Blocksy’s Filter by Price<\/strong>, Filter by Status<\/strong> and Active Filters<\/strong> blocks to build a more complete product-filtering interface.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

      The Shop Filters block lets customers refine WooCommerce product listings using product categories, tags, brands, attributes and other supported taxonomies. It forms part of Blocksy’s Product Filters system and can be placed in supported widget areas, the Filters Canvas or other suitable block-based shop layouts. Blocksy Pro requiredThe Shop Filters block is part of the […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[133],"class_list":["post-11219","documentation","type-documentation","status-publish","hentry","doc_categories-theme-blocks"],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/11219","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\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=11219"}],"version-history":[{"count":7,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/11219\/revisions"}],"predecessor-version":[{"id":15340,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/11219\/revisions\/15340"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=11219"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=11219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}