Woo Sorting Element
The Woo Sorting element prints the controls above a product list: a dropdown for the sort order with a button to reverse it, a dropdown for the number of products per page, and two buttons for grid view and list view.
Use it when you build your own shop or product category page with the Builder and want visitors to sort the products themselves. The element does not show products. It works together with a product list on the same page.
In this article: When the Element Is Available · How It Works · Options · Tips · Related
When the Element Is Available
The element is part of the Builder only while WooCommerce is installed and active. Without WooCommerce it is missing from the element list, and the controls no longer work on pages that already contain it.
How It Works
Every choice in the controls is a link to the same page with the choice added to the address. The product list on the page reads that choice and shows the products accordingly. The page reloads on every change.
Product lists that follow the controls are the Woo Product Grid element, the Post Cards element when it shows products, and the Woo Archives and Post Card Archives elements of layout sections.
Note: Place the element on the same page as the product list, normally right above it. On a page without a product list the controls have nothing to sort.
Options
| Option | What it does |
|---|---|
| Sorting Options | The entries offered in the sort dropdown: Name, Price, Date, Popularity and Rating. Remove the ones you do not want. The shop’s default order is offered as well when WooCommerce’s default sorting is set to the custom order, and on search results Relevance is added. |
| Sorting Elements | Which of the three controls are shown and in which order: Product Order By (sort dropdown and direction button), Product Count (products per page) and Product View (grid or list). |
| Product Count Selection | The base number for the products-per-page dropdown. Visitors can choose this number, twice this number or three times this number. |
| Margin | Space above, right of, below and left of the element, in pixels or percent. |
| Dropdown Background Color | The background color of the dropdowns, with a second color for the entry under the mouse and the active entry. |
| Dropdown Text Color | The text color of the dropdowns. |
| Dropdown Border Color | The border color of the dropdowns. |
| Element Visibility | Shows or hides the element on small, medium and large screens. |
| CSS Class / CSS ID | A class or ID for the element, for your own styling. |
Tips
- Set Product Count Selection to the same number of products that your product list shows by default. Otherwise the first entry of the dropdown does not match what visitors see.
- If sorting by price gives a wrong order, WooCommerce’s product lookup tables are out of date. Regenerate them under WooCommerce › Status › Tools.
- The starting sort order is WooCommerce’s default product sorting. The starting view, grid or list, is the one set in WooCommerce Product Default View under Tirenoa › Options › WooCommerce › General WooCommerce.
- The colors start with the order dropdown colors set under Tirenoa › Options › WooCommerce › WooCommerce Styling, so you only change them here for a single page.
- The element shows only data from your own shop and connects visitors to no outside service.