The FacetWP Color Add-On is a specialized extension for the FacetWP plugin that transforms standard text-based filters into visually engaging color swatches. It is primarily used for e-commerce (WooCommerce) and portfolio sites where visual filtering is essential.
This is EXACTLY the same product as distributed by the developer. Sales Page
Key Features & Functionality
-
Swatch Display: Replaces checkboxes or dropdowns with clickable rectangular or circular color swatches.
-
Data Source Versatility: Works with taxonomies (e.g., Product Color), custom fields (ACF Color Picker), or WooCommerce product attributes.
-
Dynamic UI: If a user selects a swatch, the results update instantly via AJAX. A second click on the same swatch resets the selection.
-
Dual Color Support: (Professional version) Compatible with “dual color” swatches (45-degree split) when using specific WooCommerce swatch plugins.
-
Logic Settings: Allows “AND” or “OR” logic. “OR” widens results (showing Red or Blue items), while “AND” narrows them (showing only items that contain both colors).
-
Value Modifiers: Users can explicitly include or exclude specific colors from the display.
Developer & Customization Tools
-
facetwp_facet_display_value: A hook used to translate or format color names (e.g., converting a slug likenavy-blueto “Navy Blue”) in the “User Selections” area. -
Parent Term Filtering: Newer versions (1.7+) allow you to set a “Parent Term,” which is useful if your color taxonomy is hierarchical or mixed with other data.
-
Custom CSS: The swatches are easily targetable via CSS for custom sizing, border-radius (for circles), or hover effects.
Typical Setup Workflow
-
Create the Facet: Go to
Settings > FacetWP > Facets > Add New. -
Select Type: Choose Color from the facet type dropdown.
-
Map Data: Set the Data Source to your color taxonomy or ACF field.
-
Assign Colors: Enter Hex codes for each term/value within the facet settings.
-
Placement: Use the provided shortcode
[facetwp facet="your_facet_name"]in your page builder or template.
- Categories: WordPress Plugins
- Tags: FacetWP
