Woo Filter By Category Element

Last Update: March 19, 2026

The Woo Filter By Category Element helps customers quickly explore products by category through a more streamlined shopping experience. With customizable layouts, gap controls, and refined styling for images and hover states, it blends seamlessly into Avada while enhancing usability and store design.

Watch the video below for a visual overview of all Woo Filter Elements, and read on to see all the options.

Note – These filters are for advanced users and must be added to a Layout Section, as they are Layout Elements. They also only work with Archives.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The Avada Woo Filter By Category Element

The Avada Woo Filter By Category Element is designed to filter products based on a specific category. This Element can be used separately, or in conjunction with any of the other Avada Woo Filter Elements. These would typically be found in a sidebar on a shop page (try using a sticky column), where you could use the filter Elements to filter the products.

It works differently to the other filters in that it filters to the chosen category by going to that category url, as opposed to the other filters, which remain on the orginal url and add query parameters. To keep filtering active on the category page, you can just add the same filters from the shop page to the category layout. See the How To Use the Avada Woo Filter Elements video for a full run through.

To create a filterable shop page or a Product Categories page, first create a layout and set the conditions to be Archives > Product Archives Types, and/or Archives > All Product Categories. Then, create a Content Layout Section and add your Woo Products using the Post Card Archives Element. Set the Post Card of your choice, then select “Post Cards Display to Posts” in the Post Cards section. Next, on the Layout Section Options tab, choose the Archive Type as “Products”.

Thereafter, you can add the Filter Elements to a Sticky Sidebar. Depending on your products’ attributes, various Filter Elements could be used.

Element Options

General

Heading		Description
Collapsible Filter		Choose if the filter should be collapsible.
Collapsed On Page Load		Choose if the filter should be collapsed on page load.
Show Title		Choose if title should show or not.
Title		Add the title that will display on element.
Title Tag		Choose HTML tag of the title, either div or the heading tag, h1-h6.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Margin		In pixels or percentage, ex: 10px or 10%.
Title Typography		Controls the typography of the title. Leave empty for the global font family.
Collapse Arrow Color		Controls the color of vollapse arrow.
Number of Columns		Set the number of columns.
Column Gap		Set the gap size between columns. In Pixels.
Brand Thumb Opacity		Controls the opacity of the brand thumbs. In percentage, 1 = 100%.
Brand Thumb Border Size		Controls the border size of the brand thumbs. In pixels.
Brand Thumb Border Color		Controls the border color of the brand thumbs.
Brand Thumb Border Radius		Controls the border radius of the brand thumbs. In pixels.
Display Brand Names		Select if you want to display the brand names.
Display Count Number		Select if you want to display the product counter.
Name/Counter Typography		Controls the typography of the brand name and counter. Leave empty for the global font family.
Name/Counter Color		Controls the color of the brand name and counter.

Extras

Heading		Description
Conditional Rendering		Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results.
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.