Woo Filter By Rating Element

Last Update: February 21, 2023

The Woo Filter By Rating Element is one of four Woo Filter Elements released with Avada 7.8, and designed to replace the corresponding WooCommerce Widgets. Please read on for all the details on this useful Element.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Woo Filter Active Element

The Woo Filter By Rating Element is designed to filter products based on their rating. This element will be used in conjunction with the Woo Filter Active Element, and potentially one or more of the other Woo Filter Elements, the Woo Filter By Attribute Element, and/or the Woo Filter By Price Element. These filters 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 Woo Filter by Rating Element only requires styling, and products that have a rating to work.

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.

Woo Filter By Rating Element
Woo Filter By Rating Element

Element Options


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 Responsive tab in the Global Options.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.


MarginIn pixels or percentage, ex: 10px or 10%.
Title TypographyControls the typography of the title. Leave empty for the global font family.
Text ColorControls the text color of rating filter.
Star ColorControls the star color of rating filter.


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

In this article