SS Dynamic Filter for Oxygen

Plugin Banner

SS Dynamic Filter for Oxygen

by shemuls

Download
Description

SS Dynamic Filter for Oxygen is a filtering solution for developers using Oxygen Builder. Unlike generic filter plugins that require shortcodes, this plugin provides native Oxygen Elements that you can drag, drop, and style directly inside the builder.

Most importantly, it includes a Database Indexer and SEO-Friendly URL Rewrites.

🚀 Key Features

  • ⚡ Database Indexer: We index your product data into a custom database table. This ensures filtering remains fast.
  • 🔗 SEO-Friendly URLs: Automatically transforms ugly query strings (?color=red) into clean, indexable permalinks (/filter/color-red/).
  • 🎨 Native Oxygen Elements: Drag and drop filter elements directly in the Oxygen editor. Full control over typography, spacing, colors, and layout via Oxygen’s style controls.
  • 🔍 AJAX Search: Include a live search bar that updates grid results instantly.
  • 🎚️ Dual-Handle Price Slider: Professional price range slider using noUiSlider.
  • 🏷️ Active Chips: Display active filters as removable chips/tags.
  • 🎨 Color Swatches: Turn any attribute into visual color swatches.
  • 🔄 Hybrid Filtering: Updates the browser URL for SEO while using robust AJAX fetching for compatibility.

🧩 Included Elements

  1. Dynamic Filter: The core element to display Checkboxes, Radio Buttons, Buttons, Color Swatches, Dropdowns, Price Ranges, or Search inputs.
  2. Active Filters (Chips): Displays the currently selected filters with a “Clear All” option.
  1. Upload the plugin files to the /wp-content/plugins/ss-dynamic-filter-for-oxygen directory, or install the plugin through the WordPress plugins screen.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress.
  3. IMPORTANT: Go to Filters > Add New to create your first filter.
  4. CRITICAL: After creating filters, click the “Index All Products Now” button in the filter settings metabox. This builds the database index required for filtering.
  5. Open any template in Oxygen Builder and add the “Dynamic Filter” element.
  1. <strong>Admin Settings:</strong> The clean interface for configuring filters and running the high-performance indexer.

    Admin Settings: The clean interface for configuring filters and running the high-performance indexer.

  2. <strong>Oxygen Builder:</strong> Dragging and dropping the native filter element with full style controls.

    Oxygen Builder: Dragging and dropping the native filter element with full style controls.

  3. <strong>Frontend Example:</strong> A shop page featuring Color Swatches, Price Slider, and Active Chips.

    Frontend Example: A shop page featuring Color Swatches, Price Slider, and Active Chips.

Why are my filters showing “No results found”?

This plugin uses a custom database index for performance. You must go to the Filter settings page in the admin dashboard and click “Index All Products Now”. You need to do this whenever you add a new Filter Type. (New products are indexed automatically on save).

Why do the filter URLs give a 404 error?

If you see a 404 error on pages like /filter/color-red/, you need to flush your permalinks. Go to Settings > Permalinks in your WordPress dashboard and simply click “Save Changes”. This registers the new URL structure.

Does this work with WooCommerce?

Yes! It is fully compatible with WooCommerce products, attributes, and prices.

Does this work with Custom Post Types (CPT) and ACF?

Yes. You can filter any public Custom Post Type by any Taxonomy (Categories, Tags, or Custom Taxonomies created via ACF/CPT UI).

1.0.1

  • Security Fix: Implemented strict Late Escaping for all echoed variables.
  • Security Fix: Hardened JSON encoding in admin HTML attributes.
  • Security Fix: Implemented wp_kses for strict HTML output sanitization.
  • Update: Fixed Text Domain to match plugin slug ‘ss-dynamic-filter-for-oxygen’.

1.0.0

  • Initial Release. Features: AJAX Filtering, Indexer, URL Rewrites, Search, and Oxygen Native Elements.
Back to top