Woo Filter By Category Element

Last Update: April 14, 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.

There is an important global option for this element, which can be found at Options > WooCommerce > General WooCommerce. It’s called WooCommerce AJAX Category Navigation and controls how navigation takes place when using the Woo Filter By Category Element. The options are Off, Change Page After AJAX, and Filter on Page. See the above video for a visual overview of these options, but see below for a quick summary.

Off – when filtering to categories, WooCommerce will load the product category page, and any active filtering will be lost.
Change page after AJAX – when filtering to Categories, the AJAX request will load the corresponding category page without page change, and add query vars to the url to handle filtering.
Filter on Page– it won’t change from the inventory page when changing categories, instead adding the categories as a query variable.

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.