CSS selectors
This document provides the most important CSS selectors that users can use to customize the styling of the WooCommerce Product Filters plugin.
Main Container Selectors
.wcf-group
Main container for filter groups. Controls the overall layout and spacing of filter collections.
.wcf-filter
Individual filter container. Wraps each filter component including title and input area.
.wcf-filter-input
Container for the actual filter input components (checkboxes, dropdowns, etc.).
Filter Title and Labels
.wcf-filter-title
Filter title/heading container. Controls the styling of filter names and toggle functionality.
.wcf-option-label
Labels for individual filter options (checkbox labels, dropdown options, etc.).
.wcf-option-count
Count display next to filter options showing number of products (e.g., "(15)").
Input Components
Checkboxes
.wcf-checkbox-group
Container for checkbox groups.
.wcf-checkbox-item
Individual checkbox item container.
Dropdowns
.wcf-dropdown-wrapper
Container for dropdown components with relative positioning.
.wcf-dropdown-level
Container for hierarchical dropdown levels.
.wcf-dropdown-clear
Clear button for dropdown selections.
Colors
.wcf-color-swatch
Individual color swatch container.
Images
.wcf-image-card
Container for image-based filter options.
.wcf-selected-card
Selected state for image cards.
Range Sliders
.wcf-price-range-slider
Container for price range slider components.
Rating Stars
.wcf-rating-stars
Container for star rating filter.
Radio Buttons
.wcf-filter-radio
Container for radio button groups.
Active Filters
.wcf-active-filters-container
Main container for displaying active filters.
.wcf-active-filter-badge
Individual active filter badge/chip.
.wcf-filter-remove-btn
Remove button within active filter badges.
.wcf-clear-filters-link
Link to clear all active filters.
.wcf-total-results
Container for displaying total results count.
Buttons and Actions
.wcf-submit-button
Main submit/apply filters button.
.wcf-submit-button-wrapper
Container for submit button and related actions.
.wcf-filter-horizontal-trigger
Trigger button for horizontal filter popovers.
Drawer (Mobile)
.wcf-mobile-drawer
Main mobile drawer container.
.wcf-drawer-trigger-button
Button that opens the mobile drawer.
.wcf-drawer-header
Header section of the mobile drawer.
.wcf-drawer-header-title
Title in the drawer header.
.wcf-drawer-close-link
Close button in drawer header.
.wcf-drawer-content
Content area of the mobile drawer.
Pagination
.wcf-pagination
Container for pagination controls.
Radix UI Component Overrides
Select Components
.rt-SelectTrigger
Dropdown trigger button styling.
.rt-SelectContent
Dropdown content container.
.rt-SelectItem
Individual dropdown option items.
Checkbox Components
.rt-BaseCheckboxRoot
Base checkbox styling.
.rt-CheckboxGroupRoot
Checkbox group container.
Radio Components
.rt-BaseRadioRoot
Base radio button styling.
.rt-RadioGroupItem
Radio group item container.
Button Components
.rt-BaseButton
Base button styling for all buttons.
Text Field Components
.rt-TextFieldRoot
Text input container.
.rt-TextFieldInput
Text input field styling.
Slider Components
.rt-SliderThumb
Slider thumb/handle styling.
Popover Components
.rt-PopoverContent
Popover content container for horizontal filters.
State-Based Selectors
Hover States
.wcf-filter-title:hover
Hover state for filter titles.
.wcf-submit-button:hover
Hover state for submit button.
.wcf-filter-horizontal-trigger:hover
Hover state for horizontal filter triggers.
Focus States
.wcf-group input:focus
Focus state for input elements.
.wcf-group button:focus
Focus state for button elements.
Selected States
.wcf-selected-card
Selected state for image cards.
.rt-BaseCheckboxRoot[data-state='checked']
Checked state for checkboxes.
.rt-BaseRadioRoot[data-state='checked']
Checked state for radio buttons.
Responsive Design
Mobile Breakpoints
@media (max-width: 768px)
Mobile-specific styles.
@media (max-width: 600px)
Small mobile device styles.
Layout and Spacing
.wcf-group .rt-BaseButton
Button height and spacing within groups.
.wcf-filter-title
Margin and spacing for filter titles.
.wcf-checkbox-group
Gap and spacing for checkbox groups.
Color and Theme Variables
The plugin uses CSS custom properties for consistent theming:
--accent-9: Primary accent color--accent-8: Secondary accent color--accent-contrast: Contrast color for accent backgrounds--gray-a5: Light gray for borders--gray-a7: Medium gray for text--gray-a11: Dark gray for secondary text--gray-a12: Very dark gray for primary text