Live Category Filter for WooCommerce

Replace WooCommerce's category dropdown with a row of chip toggles that filter the product grid instantly, in-place, with no page reload.

Description

The default WooCommerce category filter is a dropdown that forces a full page reload for every selection. On a small-to-medium catalogue (a restaurant menu, a 50-product Etsy-style shop, a handful of service tiers) that reload feels brutally slow.

This plugin replaces that dropdown with a row of chip toggles. Tap one chip and the product grid filters instantly, in-place, with no reload. Tap a second chip and the results combine with OR semantics — pick "Chicken" + "Beef" and you see everything in either category.

How it works

• Instant client-side filtering. Products fade in and out of view in the same request — no spinner, no flash, no scroll jump.
• URL state. The current filter set lives in the URL (e.g. ?cats=chicken,beef), so visitors can bookmark and share filtered views, and the browser back / forward buttons restore the correct state.
• Server-side fallback. Visitors with JavaScript disabled get the same filtered grid, rendered by the server from the same ?cats= parameter.
• Hybrid client/server handoff. Narrowing a filter is instant client-side work. Broadening past what the server originally rendered triggers a single fetch to backfill the missing products — no full page reload, no double-render.
• Multi-instance safe. Drop the [wclcf_filter_grid] shortcode on any page to render the chip-row + product grid outside the shop archive.

Settings

Configure the plugin under WooCommerce → Live Category Filter:

• Choose which archive types the filter activates on (shop archive, product category, product tag, all of the above).
• Pick which categories appear as chips (defaults to all top-level product categories).
• Drag-reorder the chips into your preferred display order.
• Toggle whether each chip displays a product count next to its label.

Compatibility

• WooCommerce 6.0+ required (handled by the Requires Plugins: woocommerce header — WordPress 6.5+ enforces this automatically).
• Works with any WooCommerce-compatible theme — the chip row is injected into the standard shop loop hook and inherits the theme's typography and accent colour by default.

Installation

1. In your WordPress admin, go to Plugins → Add New.
2. Search for "Live Category Filter for WooCommerce" or upload the zip via Plugins → Add New → Upload Plugin.
3. Activate the plugin.
4. WooCommerce must be active first — if it isn't, an admin notice will prompt you to install it.
5. Go to WooCommerce → Live Category Filter to configure which categories appear as chips and how they're ordered.

Screenshots

1. The chip row in action — multi-select filtering on a restaurant menu, with no page reload between selections.
2. URL state — the filter set lives in the URL so visitors can share filtered views and use browser back / forward.
3. Settings page — choose which archive types the filter activates on, pick visible categories, and drag to reorder.
4. The [wclcf_filter_grid] shortcode rendering on a custom page outside the shop archive.
5. Responsive behaviour — chips wrap cleanly on mobile while keeping comfortable tap targets.

Frequently Asked Questions

Does the plugin work without JavaScript?

Yes. The chip row degrades to plain anchor links that pass ?cats=... to the server, and the server renders the filtered grid directly. JavaScript-enabled visitors get the instant client-side experience; JavaScript-disabled visitors get the same filtered output via full page loads.

Can I use the chip row on a page that isn't the shop archive?

Yes — use the [wclcf_filter_grid] shortcode. The shortcode renders the chip row + a product grid that respects the same filter logic. Useful for category landing pages and curated collections.

How does multi-select combine categories — AND or OR?

OR. Selecting "Chicken" + "Beef" shows products tagged with either category. AND semantics (products tagged with both) are not currently supported.

My theme overrides product card markup. Will the filter still work?

Yes, as long as the product cards are rendered inside the standard .products (or themed equivalent) container. The plugin matches cards by the product_cat-<slug> class that WooCommerce adds automatically, so any markup that preserves that class will filter correctly.

Does it support custom taxonomies, not just product_cat?

Not in this release. Custom taxonomy support is planned for a future version.

Changelog

1.0.1

• Settings notice: pagination is automatically disabled when chips are active, surfaced as an inline notice on the settings page.

1.0.0

• Initial release.
• Chip row with live multi-select filtering, URL state, and browser back / forward support.
• Server-side fallback for JavaScript-disabled visitors.
• [wclcf_filter_grid] shortcode for use outside the shop archive.
• Settings page: visible categories selector, drag-reorder, show-counts toggle, archive type activation.
• Dependency check + admin notice when WooCommerce is not active.

Upgrade Notice

1.0.1

Settings page now shows a notice when shop pagination is disabled by the chip filter.

1.0.0

Initial release.