CSS selectors
body.productfilters
Determines if the page has product filters on it or not.
.wcf-form-elements-wrapper
Wrapper of the form tag of the filter group.
.wcf-filter-form
The wrapper for the filter form and the filter items.
.wcf-filter
Each filter item wrapper.
.is-horizontal
Determines if the current filter form is horizontal.
.wcf-horizontal-grid
The wrapper for all the flex grid items in the horizontal layout. Each child elements is a wrapper for a filter.
.wcf-horizontal-trigger
Trigger for each filter (if it's not opened already).
.should-toggle
Determines if a filter can be toggled or not.
.wcf-widget-toggle
The toggle for opening the filter in the vertical layout.
.wcf-filter-title
The title of the filter element.
.wcf-horizontal-dropdown
Wrapper for the dropdown filters.
.wcf-dropdown-active-item
The selected item of the dropdown.
.wcf-group-wrapper
Wrapper for each filter group on the page.
#wcf-sorting-bar
Wrapper of the filters opener, results count and the sorting filter.
.wcf-results-count
Wrapper for the woocommerce-results-count.
.wcf-button
Class for plugin's buttons like filter opener.
.wcf-popover-body
The content of the filter popover.
.wcf-dropdown-menu
.wcf-horizontal-menu
Wrapper for the dropdown items.
.wcf-horizontal-dropdown-list
The ul of the dropdown items.
.wcf-button-group
The wrapper of the buttons in the button filters.
.wcf-active-filters-list
.wcf-active-filters
Wrapper of the filters that are currently applied.
.wcf-reset-filters-btn
The a element inside the active filters which resets the filters.
.wcf-active-filter
A p element which has an active filter inside it.
.wcf-hider
Hides some of the default theme features that WCF overwrites them like sorting.
.drawer-content-wrapper
.drawer-content
The wrapper for the drawer that has the filters in it.
.wcf-mobile-drawer-heading
Header of the drawer which has the title and the close icon.
.wcf-close-btn
Close drawer icon.
.wcf-mobile-actions
The wrapper for the drawer actions. The "Apply filters" is inside it.
#wcf-items-container-categories
Container of the categories list inside the filter popover.
.wcf-checkbox
The label class for each checkbox.
.wcf-color-checkbox
The label class for the color checkbox.
.wcf-checkmark-holder
The span element that replaces the default checkbox holder.
.wcf-img-item
The main container of the checkboxes with images.
.wcf-label-item
Wrapper of the checkbox name.
.wcf-choices-counter
Number of the choices for each filter item.
.wcf-is-child-term
Wrapper of the child terms inside the filter.
#wcf-pop-container-p-search
The popover for the search item.
.wcf-rating-wrapper
Wrapper of the rating stars in the filter item.
.wcf-range-track-wrapper
The wrapper of the range track slider which includes two range thumbs and the track.
.wcf-range-track
The track of the selected range in the slider.
.wcf-range-thumb
The thumbs in the range slider.
.wcf-tickbar
The container for showing the selected range in the range slider.
#wcf-pop-container-{filtername}
Specific ID for the filter popover container. The filtername is the name of the filter in the plugin's settings without any space.
.wcf-pagination
.wcf-pagination-wrapper
The wrapper for the products' pagination.
#wcf-loading-state
Main wrapper for the loading overlay of the plugin. The ::after psuedo element of this class has the spinner icon.
body.is-loading
When the filters are loading and the spinner is showing.