Woo Sorting Element

29/07/2021

The Woo Sorting Element replicates the sorting options of a WooCommerce Shop page, and allows you to add product sorting into your custom Shop Layout.

Woo Sorting Element > Example
Read More about Working With Avada & WooCommerce
View Element Demo Page!

Overview

How To Use The Woo Sorting Element

This Element is designed to be used in your Woo Shop Layout. It replicates the Woo Sorting options normally available in the Avada Global Options. It has a range of display and styling options.

To use it, simply place the Element into your Layout on the designated WooCommerce Shop page. Set the options as you desire. See the indiviudual options below.

Avada Website Builder

739,280 Businesses Trust Avada

Get Avada
Avada Website Builder

739,280 Businesses Trust Avada

Get Avada
Avada Website Builder

739,280 Businesses Trust Avada

Get Avada

Element Options

General Tab

  • Sorting Options – Select sorting options that you want to be displayed in the sorting list box. Choose from Default, Name, Price, Date, Popularity, and Rating.
  • Sorting Elements – Choose the display and ordering of sorting elements. You can enable or disable any of the sorting options, and you can also order them as you wish. Choose from Product View, Product Order By, and Product Count.
  • Product Count Selection – Select the number of product count to display. This controls the numbers displayed in the Show XX Products dropdown boxes.
  • 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 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

  • Margin – Control margins around the Element. In pixels or percentage, ex: 10px or 10%.
  • Dropdown Background Color – Controls the background color for the dropdowns.
  • Dropdown Hover / Active Background Color – Controls the background color for the dropdowns hover / active states.
  • Dropdown Text Color – Controls the text color for the dropdowns.
  • Dropdown Border Color – Controls the border color for the dropdowns.
View The Options Screen

Global Options

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

Avada Website Builder

739,280 Businesses Trust Avada

Get Avada
Avada Website Builder

739,280 Businesses Trust Avada

Get Avada
Avada Website Builder

739,280 Businesses Trust Avada

Get Avada