{"id":11219,"date":"2024-08-28T18:33:58","date_gmt":"2024-08-28T15:33:58","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=11219"},"modified":"2024-09-12T17:43:24","modified_gmt":"2024-09-12T14:43:24","slug":"shop-filters","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/theme-blocks\/shop-filters\/","title":{"rendered":"Shop Filters"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/08\/Captura-de-ecran-din-2024-09-12-la-17.17.51.png\" alt=\"\" class=\"wp-image-11350\" \/><figcaption class=\"wp-element-caption\">&#8220;<strong>Shop Filters<\/strong>&#8221; block in action.<\/figcaption><\/figure>\n\n\n\n<p>The <strong>Shop Filters<\/strong> block provides a simple and effective way for customers to filter products by various taxonomy terms, including categories, tags, brands, or any other attributes available. This enhances their shopping experience by making it easier to find exactly what they\u2019re looking for.<\/p>\n\n\n\n<p>To add this block to your page, open the Gutenberg block library and search for the \u201cShop Filters\u201d block, which is represented by an icon with two setting sliders.<\/p>\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\u00a0<strong>Multiple Selections<\/strong>\u00a0option 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","protected":false},"excerpt":{"rendered":"<p>The Shop Filters block provides a simple and effective way for customers to filter products by various taxonomy terms, including categories, tags, brands, or any other attributes available. This enhances their shopping experience by making it easier to find exactly what they\u2019re looking for. To add this block to your page, open the Gutenberg block [&hellip;]<\/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"],"blocksy_meta":{"docs_item_badge":"PRO","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"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":5,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/11219\/revisions"}],"predecessor-version":[{"id":11356,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/11219\/revisions\/11356"}],"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}]}}