Woo Filter By Rating Element

15/07/2022

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.

Woo Filter By Rating Element
Read More about Working With Avada & WooCommerce

Overview

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
Avada Website Builder

823,746 Businesses Trust Avada

Get Avada
Avada Website Builder

823,746 Businesses Trust Avada

Get Avada
Avada Website Builder

823,746 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.

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

  • Regular Options

  • Text ColorControls the text color of rating filter.

  • Star ColorControls the star color of rating filter.

  • Hover/Active Options

  • Text ColorControls the text hover color of rating filter.

  • Star ColorControls the star hover color of rating 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 By Rating Element. Global Options for WooCommerce as a whole are found at Avada > WooCommerce > General WooCommerce, and Avada > WooCommerce > WooCommerce Styling.

Avada Website Builder

823,746 Businesses Trust Avada

Get Avada
Avada Website Builder

823,746 Businesses Trust Avada

Get Avada
Avada Website Builder

823,746 Businesses Trust Avada

Get Avada