Documentation

Everything you need to set up, configure, and customize Woo Filter Studio for your WooCommerce store.

Installation

1. Download the plugin .zip file from CodeCanyon.
2. Go to WordPress Admin → Plugins → Add New → Upload Plugin.
3. Choose the zip file and click Install Now.
4. Activate the plugin.
5. Navigate to WooCommerce → Woo Filter Studio to configure.

Requirements

Quick Start

1. Install & activate the plugin (see above).
2. Go to Woo Filter Studio → Settings and toggle which filter types to show.
3. Go to Woo Filter Studio → Styling and pick a skin preset.
4. Visit your Shop page — filters appear automatically in a sidebar.

Filter Types

Woo Filter Studio provides eight filter types that work together. Each can be independently enabled or disabled from the admin settings.

Category Filter

Displays product categories as radio buttons for single-select filtering. The selected category is applied via the wf_cat URL parameter.

Brand & Color Filters

The plugin auto-detects brand and color taxonomies in this order:

• Brand: pa_brand → product_brand → brand
• Color: pa_color → color

Colors render as visual swatches. Both support multi-select with checkboxes.

Custom Attribute Filters

Any WooCommerce product attribute (e.g., pa_size, pa_material) is automatically detected and rendered as a multi-select checkbox filter. No configuration needed — just create the attribute in WooCommerce and assign it to products.

Price Range

A dual-handle slider with synced min/max text inputs. Updates the query in real time via AJAX as customers drag the handles. Uses min_price and max_price URL parameters.

Customer Rating

Radio buttons for minimum star rating (1–5). Uses the rating_filter URL parameter. Ideal for stores with review-driven purchasing.

Availability

Two checkbox filters:

• In Stock — shows only products with stock status instock
• On Sale — shows only products currently on sale

AND / OR Logic

When multiple values are selected within a filter (e.g., two brands), the logic mode controls how they combine:

Shortcode

Use the [woo_filters] shortcode to place filters and a product grid on any page or Elementor widget.

// Basic usage
[woo_filters]

// With all attributes
[woo_filters
  per_page="12"
  columns="3"
  category="electronics"
  show_filters="yes"
  show_pagination="yes"
]Shortcode

Attributes

Examples

Show 20 products in 3 columns, electronics only

[woo_filters per_page="20" columns="3" category="electronics"]

Product grid without filters

[woo_filters show_filters="no" columns="4"]

Minimal grid, no pagination

[woo_filters per_page="6" columns="3" show_pagination="no"]

URL Parameters

Every filter combination generates a unique, shareable URL. Customers can bookmark or share filtered views.

Full example URL

/shop?wf_cat=shoes&wf_brand[]=nike&min_price=50&max_price=200&rating_filter=4&wf_in_stock=1URL

Filter Visibility Settings

Navigate to Woo Filter Studio → Settings to toggle individual filter types on or off.

Style & Skins

Navigate to Woo Filter Studio → Styling to customize the appearance.

Preset Skins

Select a skin to apply its preset colors, then fine-tune individual values below.

Color Settings

Typography & Layout

Custom CSS

Add custom CSS in Styling → Custom CSS. The CSS is output inline on the frontend.

/* Example: wider sidebar on desktop */
.wf-shop-layout {
  --wf-sidebar-width: 320px;
}

/* Example: round filter chips */
.wf-chip {
  border-radius: 100px;
}CSS

CSS Variables Reference

All styling is driven by CSS custom properties on .wf-shop-layout. Override them in your theme or Custom CSS field:

.wf-shop-layout {
  --wf-accent: #0b6a78;
  --wf-sidebar-bg: #ffffff;
  --wf-sidebar-border: #e5e8ee;
  --wf-heading-color: #1f2937;
  --wf-text-color: #1f2937;
  --wf-muted-text: #64748b;
  --wf-chip-bg: #ffffff;
  --wf-chip-border: #c7d5e3;
  --wf-button-bg: #4b5563;
  --wf-button-text: #ffffff;
  --wf-input-bg: #ffffff;
  --wf-control-border: #cbd5e1;
  --wf-font-family: inherit;
  --wf-font-size: 16px;
  --wf-sidebar-width: 280px;
  --wf-layout-gap: 24px;
  --wf-sidebar-radius: 14px;
  --wf-control-radius: 10px;
  --wf-button-radius: 12px;
  --wf-section-spacing: 18px;
  --wf-empty-bg: #ffffff;
  --wf-empty-border: #dbe2ea;
  --wf-empty-shadow: #0f172a;
}CSS Variables

Analytics Dashboard

Navigate to Woo Filter Studio → Analytics to see how customers use your filters.

Tracked Metrics

• Total Events — cumulative count of filter applications
• Distinct Values — unique filter combinations used
• Last Event — timestamp of the most recent filter usage

What Gets Tracked

Every filter interaction on shop archive pages is recorded:

• Category selections (wf_cat)
• Brand selections (wf_brand)
• Color selections (wf_color)
• Logic mode (wf_logic)
• Price range (min_price, max_price)
• Rating selections (rating_filter)
• Stock / Sale flags
• Custom attributes (wf_attr_*)

Data Storage

• Stored natively in wp_options — no external services
• Events are batched (flushed after 10 events or 5 minutes)
• Top 500 distinct values per filter type are retained
• One-click reset button to clear all analytics data

CSS Class Hooks

Use these classes in your custom CSS or JavaScript to target specific elements:

HTML Structure

Archive page layout

.wf-shop-layout
  ├── .wf-filter-toggle    // mobile button
  ├── .wf-sidebar-overlay  // mobile backdrop
  ├── .wf-sidebar
  │     ├── .wf-sidebar-close
  │     └── .wf-filter-form
  │           ├── .wf-active-filters
  │           ├── .wf-filter-block // repeated
  │           └── .wf-actions
  └── .wf-products
        ├── .wf-top-active-filters
        ├── .wf-per-page
        └── WooCommerce product loopStructure

Cache & Performance

• Filter metadata is cached using the wf_shop_filters cache group.
• Cache is automatically invalidated when products are created, updated, trashed, or deleted.
• Term/taxonomy changes (create, edit, delete, reassign) also trigger invalidation.
• Stock status changes invalidate the cache.

Data Management

The plugin stores three option keys in the WordPress database:

Compatibility