BLACK FRIDAY: 50% OFF all Pro plans Code: BLACKFRIDAY50
Pro from $10 a year or $30 lifetime, no code needed: Code: BLACKFRIDAY50
Ends Cyber Monday, 30 Nov. Lock in the price today. Code: BLACKFRIDAY50
Get 50% Off
Bright Addons

Product Filter block guide

Pro

How to add the Product Filter block and what every setting does. It comes with Bright Addons Blocks Pro, which also includes every free block.

See the Product Filter block All block guides

Start

Add the block

Shop filters for the product archive: categories, price, rating, stock, sale and A to Z.

  1. Install the plugins

    Install Bright Addons Blocks Pro from your account and activate your licence. It includes every free block. WooCommerce must be active.

  2. Add the block

    Open a page or post in the block editor, press +, and search for “Product Filter”. It is in the Bright Addons Pro category.

  3. Set it up

    Open the block sidebar and work through Behaviour.

  4. Publish

    Preview the page on desktop, tablet and phone, then publish. The block loads its own CSS and JavaScript only on pages that use it.

Panel 1 of 1

Behaviour

Open the block sidebar and find the Behaviour panel.

Setting What it does Choices
Layout Use one of each on the same page if you like: a top bar above the grid and a sidebar next to it. Sidebar: sections under each other, Top bar: a row of dropdown buttons
Grid CSS ID Only needed with several grids on one page: the CSS ID set in the grid's Advanced tab. Empty: the first grid on the page. –
Apply filters Choose one. At once, With a button
Button text Text you type. –
Button icon Icon picker. –
Icon position Choose one. Before, After
Show chosen filters On or off. –
"Clear all" text Text you type. –
Sections can be closed On or off. –
"Show more" text Text you type. –
"Show less" text Text you type. –
Fold behind a button on small screens Choose one. Never, On phones, On tablets and phones, On every screen
Button text Text you type. –

Questions

Good to know

Is the Product Filter block free?

Product Filter is a Pro block. It comes with Bright Addons Blocks Pro, which has the same plans and prices as Bright Addons Pro for Elementor and includes all 62 free blocks.

Does it need WooCommerce?

Yes. This block shows WooCommerce data, so WooCommerce must be active. Without it, the block shows nothing on the page.

Do I need Elementor for this block?

No. It is a block for the WordPress block editor (Gutenberg). Elementor is not needed. If you use Bright Addons Pro for Elementor on the same site, both plugins work side by side.

Will it slow down my pages?

No. Each block loads only its own small CSS and JavaScript, and only on pages where it is used. Blocks you do not need can be switched off in Bright Blocks.

Does it work with my theme?

Yes. The blocks work with block themes and classic themes, and follow your theme fonts. Wide and full width alignment are supported.

Bright Addons Blocks

Build with every block

Blocks Pro adds 99 Pro blocks, Pro effects for every block, Theme Templates and popups to the 62 free blocks.

See Blocks Pro prices See the Product Filter block