Skip to main content
Knowledge

Building WooCommerce product filters in Breakdance

Breakdance has strong WooCommerce elements, but no complete filter package for your product listings. Many filter plugins are built for other builders or run heavy database queries on every click. Here is how to build filters that work natively in Breakdance and stay fast on a large catalog.
In short
  • Use native Breakdance elements instead of separate widgets
  • Let counts come from a dedicated filter index
  • Give every filter state its own shareable URL

What a good filter package needs

A filter has to be accurate, fast and easy to style. Accurate means the counts next to each option match what the visitor sees after clicking, also on category pages. Fast means a click does not take seconds. And you want to style it in the builder, not with separate CSS.

Native elements in the Breakdance builder

Spark Power Filters provides real Breakdance elements: a filter panel that builds itself from your product attributes, separate facets, variation swatches and titles that follow the selected filters. You build facets in the backend, pick a source (WooCommerce attribute, taxonomy, product meta or price) and a display.
  • Checkbox, radio, buttons and a searchable dropdown
  • Color and image swatches, price and number ranges
  • Mobile filter drawer, filter chips and a reset button

Fast, even on large catalogs

Counts come from a dedicated index with atomic rebuilds, not from repeated database queries. Tested up to 50,000 products, that is about seven times faster than the usual approach. The index is rebuilt in the background and only swapped in when it is ready, so visitors never see a half-finished state.

Not only for Breakdance

On another site with Elementor or a regular theme, you place the same filters with shortcodes such as [spf_facet] and [spark_filters]. For Divi 5 there are native modules. Moving from WP Grid Builder? The migration takes over your filters in one click, with a backup per page and an undo button.

Tip: Combine Power Filters with Spark Speed. Known, finite filter states are then cached as regular pages, so filtered results come straight from the cache.

Want filters that belong in Breakdance?

Frequently asked questions

Yes. Every product list on a page has its own filters and its own state, so they never get in each other's way.

Yes. The server fully renders every filter state. Shareable links therefore always work, and search engines see the same result as visitors.

Yes. Choose from the Spark, Aurora, Noir and Editorial styles, or use Skeleton without styling if you style everything yourself in Breakdance.