Woo Filter Active Element

Last Update: February 21, 2023

The Woo Filter Active Element is one of four Woo Filter Elements, designed to replace the default WooCommerce filter widgets. 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 Active Element

The Woo Filter Active Element is designed to show the user which Woo Filters are currently active. This will be used in conjunction with at least one of the other Woo Filter Elements, the Woo Filter By Attribute, the Woo Filter By Price Element, and/or the Woo Filter By Rating 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 shop products. The Filter Active Element then shows which filters are active.

IMPORTANT NOTE. These filters are for advanced users and need to 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. The Woo Filter Active Element will only display on the front end when there is an active filter.

Element Options

General

Heading		Description
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. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
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.
Active Filter Typography		Controls the typography of the active filter. Leave empty for the global font family.
Active Filter Padding		In pixels or percentage, ex: 10px or 10%.
Active Filter Background Color		Controls the item background color of active filter.
Active Filter Color		Controls the item color of active filter.

Extras

Heading		Description
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. Default currently set to Top Of Element Hits Bottom Of Viewport.