Filters with counts, no reload.
A filter bar for post grids. Visitors combine categories, colours and sizes (prices with ESG Commerce) and see how many items each choice gives. On a 4.0 grid the cards change in place.
The Fenwray demo shop, live
-
-18%OuterwearBreakwater Parka
Original price was: €279.00.€229.00Current price is: €229.00.Colours: Sand, Kelp, Ink -
-20%Shirts & TeesHeavyweight Pocket Tee
Price range: €36.00 through €45.00Colours: Chalk, Rust, Fog, Ink
Seen in the Fenwray shop.
Pills and dropdowns
Every choice with its count.
Each filter is a pill that opens a card of choices. The numbers say how many items a choice gives, counted with the other filters that are set.
- Checkboxes, radio buttons, a dropdown or pills
- Choices in one filter add up; filters narrow each other
- Empty choices hidden, or shown greyed out
Phones
A sheet on small screens.
Up to 560 px wide, the filters open as a bottom sheet with one section per filter. “Show 30 results” closes it.
- A dialog: the focus stays inside
- Escape, the close button or a tap outside close it
No reload
The grid changes, the page stays.
On a grid of the 4.0 front end, a choice replaces the cards in place and writes the address, so back and forward work and a link brings the same filters back. Chips show what is set; Reset clears it.
- Without JavaScript the same address loads the page, so search engines can follow it
- Classic grids reload the page with the filters set
What ESG Facets does.
Choose a grid’s filters under Essential Grid › Facets, then put the bar on the page with its shortcode.
Filters
- Categories, tags or any taxonomy
- With ESG Commerce: price range, product attribute, stock status, on sale, rating, featured
Displays
- Checkboxes
- Radio buttons
- Dropdown
- Pills
- Swatches and a from–to range, with ESG Commerce
Works with
- Post grids that pick posts by type and taxonomy
- Load more, over the filtered items
- Polylang, and filter labels in Polylang’s and WPML’s string translation
Built with ESG Facets.
The Fenwray shop’s filter bar is ESG Facets, with ESG Commerce’s price, colour, size, offer and stock filters.
ESG Facets is a premium add-on. It needs a yearly licence.
Essential Grid 4, every update and nine add-ons are free for every site. A yearly licence adds the premium add-ons, the premium templates and support. Every plan has every premium add-on; the plans differ only in the number of sites.