Canvas Docs

Store Price Filter

A double-handle price range control that filters a product grid in place. It is shown in the block inserter as Canvas Store Price Filter and registered as canvas-core/store-price-filter.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Store Price Filter settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

  • Input classDefaultrange_23

    The class the range-slider library binds to.

  • Target grid IDDefaultEmpty

    The product grid this control filters, without the leading #.

  • Lowest priceDefaultEmpty

    Where the left end of the slider starts. Ignored while the bounds are read from the catalogue.

  • Highest priceDefaultEmpty

    Where the right end of the slider stops. Ignored while the bounds are read from the catalogue.

  • Take the bounds from the catalogueDefaultOn

    Reads the cheapest and dearest published product instead of the two values above, so the control stays correct as the catalogue changes.

  • Currency prefixDefault$

    Character printed before each figure on the slider.

  • Hide the end labelsDefaultOn

    Hide the two fixed figures at the ends of the scale, leaving only the figures on the handles.

  • Hide the handle labelsDefaultOff

    Hide the figures that follow the handles as the shopper drags them.

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in WooCommerce: Add to Cart, Cart Table, Cart Totals, Checkout Billing, Checkout Order Review, Conference Tickets.

Was this page helpful?