Woo Filter Active Element

15/07/2022

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.

Woo Filter Active Element
Read More about Working With Avada & WooCommerce

Overview

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 porducts, 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.

Woo Filter Active Element
Avada Website Builder

824,299 Businesses Trust Avada

Get Avada
Avada Website Builder

824,299 Businesses Trust Avada

Get Avada
Avada Website Builder

824,299 Businesses Trust Avada

Get Avada

Element Options

General Tab

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

  • Element VisibilityChoose 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 Avada Builder Elements tab in the Global Options.

  • CSS Class – Allows you to add a class to the wrapping HTML.

  • CSS ID – Allows you to add an ID to the wrapping HTML.

View The Options Screen

Design Tab

  • MarginIn pixels or percentage, ex: 10px or 10%.

  • Title Typography

  • Font Family – Controls the font family of the title. Leave empty to use the site default.

  • Font Size – The font size for the title. Use any valid CSS unit.

  • Line Height – Controls the line height of the title. Enter value including any valid CSS unit, ex: 28px.
  • Letter Spacing – Controls the letter spacing of the title. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.

  • Margin Top – Controls the top margin of the title.

  • Margin Bottom – Controls the bottom margin of the title.

  • Text Transform – Select how the text is displayed. Choose from Normal or Uppercase.

  • Font Color – Controls the font color of the title.

  • Active Filter Typography

  • Font Family – Controls the font family of the filter. Leave empty to use the site default.

  • Font Size – The font size for the filter. Use any valid CSS unit.

  • Line Height – Controls the line height of the filter. Enter value including any valid CSS unit, ex: 28px.
  • Letter Spacing – Controls the letter spacing of the filter. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.

  • Text Transform – Select how the text is displayed. Choose from Normal or Uppercase.

  • Active Filter PaddingIn pixels or percentage, ex: 10px or 10%.

  • Active Filter Styling – Use filters to see specific type of content.

  • Regular Options

  • Active Filter Background ColorControls the background color for the filter.

  • Active Filter ColorControls the color for the filter.

  • Hover/Active Options

  • Active Filter Background Hover ColorControls the background hover color for the filter.

  • Active Filter Hover ColorControls the hover color for the filter.

View The Options Screen

Extras Tab

  • Animation Type – Select the type of animation to use on the element. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

  • Direction of Animation – Select the incoming direction for the animation. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Type in speed of animation in seconds (0.1 – 5).

  • Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

Global Options

There are no Global Options for the Woo Filter Active Element. Global Options for WooCommerce as a whole are found at Avada > WooCommerce > General WooCommerce, and Avada > WooCommerce > WooCommerce Styling.

Avada Website Builder

824,299 Businesses Trust Avada

Get Avada
Avada Website Builder

824,299 Businesses Trust Avada

Get Avada
Avada Website Builder

824,299 Businesses Trust Avada

Get Avada