Woo Filter By Brand Element

Last Update: March 9, 2026

The Avada Woo Filter By Brands Element allows users to filter online products by the Woo Brand taxonomy. Brands are set up on the WordPress Dashboard > WooCommerce > Products > Brands page. When you create and edit a brand, you can also add a thumbnail. The brand is then selected in a metabox in the actual product.

Once your products have brands assigned, you can use the Woo Filter By Brand Element to show a list of the brands in your WooCommerce Filtering. Watch the video below for a visual overview of all Woo Filter Elements, and read on to see all the options.

Note – The Avada Layout Elements are only available when editing Content Layout Sections in Avada Layouts.

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 Brand Element

The Avada Woo Filter By Brands Element is designed to filter products based on a specific brand. This Element can be used 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.

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.

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.

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.