Woo Filter by Attribute Element

Last Update: May 23, 2024

The Woo Filter By Attribute Element is one of four Woo Filter Elements, and designed to replace the corresponding WooCommerce Widgets. The Woo Filter by Attribute Element allows a user to filter products by a specific attribute (in the screenshot below, it is size). Please read on for all the details on this useful Element, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Woo Filter By Attribute Element

The Woo Filter By Attribute Element is designed to filter products based on a specific attribute. This element will be used in conjunction with the Woo Filter Active Element, and potentially one of the other Woo Filter Elements, the Woo Filter By Price Element, and/or the Woo Filter By Rating Element. 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 shop products.

You first need to ensure your WooCommerce products have attributes. See the How To use WooCommerce Attribute Swatches for more details on that process. Then when adding the Element, you choose which attribute you want to be able to filter by. You can add this Element multiple times if your products have multiple different attributes.

IMPORTANT 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.

So, to make a filterable shop page, or a Product Categories page, 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, add your Woo Products with the Post Card Archives Element, using the Post Card of your choice, Post Cards Display set to Posts, and on the Layout Section Options tab, set the Archive Type as Products.

Then you can add the Filter Elements in a Sticky Sidebar. Depending on the attributes of your products, the various Filter Elements could be used.

Woo Filter By Attribute Element
Woo Filter By Attribute Element

Element Options

General

HeadingDescription
Show TitleChoose if title should show or not.
TitleAdd the title that will display on element.
Title TagChoose HTML tag of the title, either div or the heading tag, h1-h6.
AttributeSelect the attribute that will display on element.
Display TypeSelect display type that will display on element.
Query TypeSelect query type that will display on element.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
MarginIn pixels or percentage, ex: 10px or 10%.
Title TypographyControls the typography of the title. Leave empty for the global font family.
Attribute Item TypographyControls the typography of the list item. Leave empty for the global font family.
Attribute Item PaddingIn pixels or percentage, ex: 10px or 10%.
Attribute Item AlignmentSelect the content alignment within the details area.
Attribute Separator ColorControls the list separator of attribute filter.
Attribute Background ColorControls the list background color of attribute filter.
Attribute ColorControls the list color of attribute filter.
Show Count NumberDisplay the count number of items.
Count Number TypographyControls the typography of the count number. Leave empty for the global font family.
Count Number ColorControls the count number color.
Swatch PaddingIn pixels or percentage, ex: 10px or 10%.
Swatch Background ColorControls the attribute background color.
Swatch ColorControls the attribute color.
Swatch Border ColorControls the attribute border color.
Dropdown Border ColorControls the dropdown border color of attribute filter.
Dropdown Background ColorControls the dropdown background color of attribute filter.
Dropdown Text ColorControls the dropdown text color of attribute filter.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article