{"id":11223,"date":"2024-08-28T18:36:13","date_gmt":"2024-08-28T15:36:13","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&p=11223"},"modified":"2026-10-08T14:23:33","modified_gmt":"2026-10-08T11:23:33","slug":"filter-by-price","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/theme-blocks\/filter-by-price\/","title":{"rendered":"Filter by Price"},"content":{"rendered":"\n
\n
\"Filter\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
The Filter by Price block in action.<\/figcaption><\/figure>\n\n\n\n

The Filter by Price<\/strong> block lets customers narrow a WooCommerce product listing to a specific price range using an interactive slider.<\/p>\n\n\n\n

It is designed to work with Blocksy’s Product Filters system and can be placed in supported widget areas, filter canvases or other suitable block-based shop layouts.<\/p>\n\n\n\n

\n

Blocksy Pro required<\/strong>
The Filter by Price 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 Filter by Price 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 price filter.<\/li>\n\n\n\n
  5. Search for Filter by Price<\/strong> in the block inserter and add it to the layout.<\/li>\n<\/ol>\n\n\n\n

    The block automatically determines the relevant product price range from the current WooCommerce query and updates the displayed products as customers refine the minimum and maximum values.<\/p>\n<\/div>\n\n\n\n

    \n

    Granular Controls<\/h2>\n\n\n\n
    \n
    \n
    \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
    Configuring the Filter by Price block.<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n

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

    Enable Show Tooltip<\/strong> to display the current value next to the slider handle while the customer adjusts the selected price range.<\/p>\n\n\n\n

    Show Prices<\/h3>\n\n\n\n

    Enable Show Prices<\/strong> to display the currently selected minimum and maximum prices underneath the slider.<\/p>\n\n\n\n

    Price Input Fields<\/h3>\n\n\n\n

    The block can also display dedicated minimum and maximum price fields, allowing customers to enter an exact price range instead of relying only on the slider controls.<\/p>\n\n\n\n

    The input fields remain synchronised with the slider, so changing either control updates the selected range accordingly.<\/p>\n\n\n\n

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

    Enable Show Reset Button<\/strong> to provide a quick way to clear the selected price range and return the listing to its default price-filtering state.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    The Filter by Price block lets customers narrow a WooCommerce product listing to a specific price range using an interactive slider. It is designed to work with Blocksy’s Product Filters system and can be placed in supported widget areas, filter canvases or other suitable block-based shop layouts. Blocksy Pro requiredThe Filter by Price block is […]<\/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-11223","documentation","type-documentation","status-publish","hentry","doc_categories-theme-blocks"],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/11223","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=11223"}],"version-history":[{"count":4,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/11223\/revisions"}],"predecessor-version":[{"id":15334,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/11223\/revisions\/15334"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=11223"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=11223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}