1. Home
  2. Knowledge Base
  3. WooCommerce Product Filters
  4. Developer Documentation

CSS selectors

Determines if the page has product filters on it or not.

Wrapper of the form tag of the filter group.

The wrapper for the filter form and the filter items.

Each filter item wrapper.

Determines if the current filter form is horizontal.

The wrapper for all the flex grid items in the horizontal layout. Each child elements is a wrapper for a filter.

Trigger for each filter (if it's not opened already).

Determines if a filter can be toggled or not.

The toggle for opening the filter in the vertical layout.

The title of the filter element.

Wrapper for the dropdown filters.

The selected item of the dropdown.

Wrapper for each filter group on the page.

Wrapper of the filters opener, results count and the sorting filter.

Wrapper for the woocommerce-results-count.

Class for plugin's buttons like filter opener.

The content of the filter popover.

Wrapper for the dropdown items.

The ul of the dropdown items.

The wrapper of the buttons in the button filters.


Wrapper of the filters that are currently applied.

The a element inside the active filters which resets the filters.

A p element which has an active filter inside it.

Hides some of the default theme features that WCF overwrites them like sorting.

The wrapper for the drawer that has the filters in it.

Header of the drawer which has the title and the close icon.

Close drawer icon.

The wrapper for the drawer actions. The "Apply filters" is inside it.

Container of the categories list inside the filter popover.

The label class for each checkbox.

The label class for the color checkbox.

The span element that replaces the default checkbox holder.

The main container of the checkboxes with images.

Wrapper of the checkbox name.

Number of the choices for each filter item.

Wrapper of the child terms inside the filter.

The popover for the search item.

Wrapper of the rating stars in the filter item.

The wrapper of the range track slider which includes two range thumbs and the track.

The track of the selected range in the slider.

The thumbs in the range slider.

The container for showing the selected range in the range slider.

Specific ID for the filter popover container. The filtername is the name of the filter in the plugin's settings without any space.

The wrapper for the products' pagination.

Main wrapper for the loading overlay of the plugin. The ::after psuedo element of this class has the spinner icon.

When the filters are loading and the spinner is showing.





Related Articles

If searching the knowledge base hasn't answered your question, please contact support.