WooCommerce Integration
FilterX includes a deep WooCommerce integration that auto-detects product attributes, respects catalog visibility, and exposes all product data as facet sources and dynamic card tags.
WooCommerce Facet Sources
These sources are available when WooCommerce is installed:
| Source Key | Label | Compatible Types |
|---|---|---|
| wc:price | Price | Range Slider |
| wc:sale_price | Sale Price | Range Slider |
| wc:stock_status | Stock Status | Checkbox, Dropdown, Toggle |
| wc:on_sale | On Sale | Toggle, Checkbox |
| wc:rating | Average Rating | Range Slider, Rating |
| wc:product_type | Product Type | Checkbox, Dropdown |
| wc:shipping_class | Shipping Class | Checkbox, Dropdown |
| wc:weight | Weight | Range Slider |
| wc:sku | SKU | Search, Autocomplete |
| wc:attribute:color | Product Attribute | Checkbox, Color, Button Group |
For product attributes, replace color with your attribute name (e.g., wc:attribute:size).
Setting Up Product Filters
- 1
Create a Price Range Facet
Go to FilterX → Facets → New Facet. Set Type to Range Slider, Source to wc:price. FilterX auto-detects min/max from your catalog. Optionally set a $ prefix.
- 2
Create a Color Attribute Facet
Type: Color Swatch, Source: wc:attribute:color. Map color terms to hex values in the color_map config (e.g., red → #ef4444). FilterX will render swatches.
- 3
Create a Stock Status Toggle
Type: Toggle, Source: wc:stock_status, active_value: instock. Label: 'In Stock Only'. Adds a single on/off switch that filters by in-stock products.
- 4
Create a Product Grid
Source Type: post_type, Post Type: product. FilterX automatically applies WooCommerce visibility rules and catalog ordering to the grid query.
Auto-Applied WooCommerce Behaviors
When a Grid is set to query the product post type, FilterX automatically:
- Applies product_visibility filtering (shows 'visible' and 'featured', hides 'hidden' for guests)
- Respects the 'Hide out of stock items' WooCommerce setting
- Applies the catalog ordering set in WooCommerce → Settings → Products (default sort)
- Enqueues WooCommerce frontend styles so price HTML and star ratings render correctly
WooCommerce Dynamic Card Tags
In Custom HTML card blocks, use these WooCommerce-specific dynamic tags:
{{wc.price}} — Formatted price HTML (with sale strikethrough)
{{wc.regular_price}} — Regular (non-sale) price
{{wc.sale_price}} — Sale price
{{wc.price_raw}} — Raw numeric price
{{wc.sku}} — Product SKU
{{wc.stock_status}} — instock / outofstock / onbackorder
{{wc.stock_quantity}} — Number of units in stock
{{wc.rating}} — Average star rating (0.00–5.00)
{{wc.review_count}} — Total review count
{{wc.short_description}} — Product short description HTML
{{wc.product_type}} — simple / variable / grouped / external
{{wc.on_sale}} — yes / no
{{wc.is_in_stock}} — yes / no
{{wc.add_to_cart_url}} — Add to cart URL
{{wc.add_to_cart_text}} — Add to Cart button text
{{wc.attribute:color}} — Attribute term names (comma separated)
WooCommerce Admin REST Endpoints
GET /wp-json/filterx/v1/wc/product-fields — All available WC product fields
GET /wp-json/filterx/v1/wc/attributes — Product attribute taxonomies with terms
These endpoints require manage_options capability (admin only).