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

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.

.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

Related Articles

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