{"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":"2024-09-12T19:07:14","modified_gmt":"2024-09-12T16:07:14","slug":"product-filters","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/woocommerce\/product-filters\/","title":{"rendered":"Product Filters"},"content":{"rendered":"\n<p>The <strong>Product Filters<\/strong> extension for WooCommerce offer an extensive solution for quickly letting your visitors filter their products by category or by an attribute that has been added to the product listings. They are very easy to work with, so follow along.<\/p>\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\"><\/video><figcaption class=\"wp-element-caption\">Activating the <strong>Filters<\/strong> sub-extension.<\/figcaption><\/figure>\n\n\n\n<p>To activate the <strong>Product Filters<\/strong> sub-extension, please go to the main <strong>Blocksy Dashboard -&gt; Extensions -&gt; Shop Extra -&gt; Filters<\/strong>. Once these have been activated, a new <strong>Shop Filters<\/strong> widget should be available in your main widgets customisation pane.<\/p>\n\n\n\n<figure 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;6a0394d70c451&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a0394d70c451\" 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-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=\"\" 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\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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\">New <strong>Shop Filters<\/strong> widget.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Granular Controls for Taxonomies<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 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 class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"1840\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/08\/Captura-de-ecran-din-2024-09-12-la-17.25.19.png\" alt=\"\" class=\"wp-image-11351\" \/><\/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<h3 class=\"wp-block-heading\">Filter By<\/h3>\n\n\n\n<p>This setting allows you to choose what criteria the filters will use. For example, selecting &#8220;<strong>Category<\/strong>&#8221; enables visitors to filter products by categories, while choosing &#8220;<strong>Attribute<\/strong>&#8221; allows filtering by product attributes like color, size, etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Display Type<\/h3>\n\n\n\n<p>This option determines how the filters appear on the front end. Selecting &#8220;<strong>List<\/strong>&#8221; will display the filters in a vertical list format, while &#8220;<strong>Inline<\/strong>&#8221; arranges them in a single, horizontal line that can wrap into multiple rows if needed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Multiple Selections<\/h3>\n\n\n\n<p>This setting controls whether customers can apply multiple filters simultaneously. When enabled, customers can refine their search using multiple criteria, creating more advanced filtering combinations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Search Box<\/h3>\n\n\n\n<p>Enable this option to add a search box above the filters, making it easier for users to search through a large number of filter options.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Checkboxes<\/h3>\n\n\n\n<p>When the&nbsp;<strong>Multiple Selections<\/strong>&nbsp;option is active, this setting allows you to show or hide checkboxes next to each filter option, providing a more visual way to select multiple filters.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Hierarchy<\/h3>\n\n\n\n<p>If the selected filtering criteria have a parent-child relationship (e.g., categories with subcategories), this option will display the hierarchy to better represent the structure.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Counter<\/h3>\n\n\n\n<p>Displays a small counter next to each filter option, indicating the number of products available under that filter.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exclude Category<\/h3>\n\n\n\n<p>Use this option to exclude specific categories from appearing in the filter list.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Reset Button<\/h3>\n\n\n\n<p>Adds a reset button that clears all active filters at once, allowing users to start a new search easily.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Granular Controls for Attributes<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 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 class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"560\" height=\"2060\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/08\/Captura-de-ecran-din-2024-09-12-la-17.25.42.png\" alt=\"\" class=\"wp-image-11352\" \/><\/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<h3 class=\"wp-block-heading\">Filter By<\/h3>\n\n\n\n<p>This setting allows you to choose what criteria the filters will use. For example, selecting &#8220;<strong>Category<\/strong>&#8221; enables visitors to filter products by categories, while choosing &#8220;<strong>Attribute<\/strong>&#8221; allows filtering by product attributes like color, size, etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Display Type<\/h3>\n\n\n\n<p>This option determines how the filters appear on the front end. Selecting &#8220;<strong>List<\/strong>&#8221; will display the filters in a vertical list format, while &#8220;<strong>Inline<\/strong>&#8221; arranges them in a single, horizontal line that can wrap into multiple rows if needed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Multiple Selections<\/h3>\n\n\n\n<p>This option determines if customers can apply more than one filter at a time. When enabled, users can combine multiple filtering criteria to refine their product search with greater precision.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Search Box<\/h3>\n\n\n\n<p>Turn on this option to display a search box above the filters. This is useful when there are many filter options, allowing users to quickly search through them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Checkboxes<\/h3>\n\n\n\n<p>When <strong>Multiple Selections<\/strong> is enabled, this option lets you display or hide checkboxes next to each filter item, helping users visually select multiple filters at once.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Swatches<\/h3>\n\n\n\n<p>If you\u2019re using variation swatches for product attributes, this option allows you to display those swatches instead of just the attribute names, offering a more visually engaging filter interface.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Label<\/h3>\n\n\n\n<p>If you prefer to show only the variation swatches without any text labels, this option lets you hide the attribute labels for a cleaner look.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Counter<\/h3>\n\n\n\n<p>This option adds a small counter next to each filter choice, showing the number of products available for each attribute.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Tooltip<\/h3>\n\n\n\n<p>If the attribute labels are disabled and only swatches are shown, enabling this option will display a tooltip that reveals the name of each filter when hovered over.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exclude Product Attributes<\/h3>\n\n\n\n<p>This setting allows you to exclude specific product attributes from being displayed in the filters.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Reset Button<\/h3>\n\n\n\n<p>Adds a reset button to the filter area, enabling users to quickly remove all selected filters and start a new search.<\/p>\n<\/div>\n<\/div>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a0394d719d8d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a0394d719d8d\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-06-at-11.57.04.png\" alt=\"\" class=\"wp-image-7338\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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\">Final result &#8211; how filters might look like on the front-end.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The Product Filters extension for WooCommerce offer an extensive solution for quickly letting your visitors filter their products by category or by an attribute that has been added to the product listings. They are very easy to work with, so follow along. To activate the Product Filters sub-extension, please go to the main Blocksy Dashboard [&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"],"blocksy_meta":{"docs_item_badge":"PRO"},"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":2,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/8648\/revisions"}],"predecessor-version":[{"id":11359,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/8648\/revisions\/11359"}],"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}]}}