NKD WooCommerce AJAX Product Filter

A comprehensive, high-performance WordPress plugin that adds advanced AJAX product filtering capabilities to WooCommerce stores. Filter by attributes, categories, price, stock status, ratings, and custom meta fields with real-time updates and SEO-friendly URLs.

Features

[object Object] Types**

• Product Attributes - Filter by color, size, brand, etc. with swatch support
• Categories & Tags - Hierarchical category filtering with tag support
• Price Range - Slider, input range, or predefined price ranges
• Stock Status - In stock, out of stock, on backorder
• Product Rating - Filter by average customer ratings
• Custom Meta Fields - Filter by any custom product meta data
• Search - Real-time product search functionality

⚡ Performance & UX

• AJAX Filtering - Instant results without page reloads
• Smart Caching - WordPress transient-based caching system
• SEO-Friendly URLs - Maintains clean URLs with HTML5 pushState
• Mobile Responsive - Optimized for all device sizes
• Loading States - Visual feedback during filter operations

🎨 Display Options

• Multiple Layouts - Vertical, horizontal, multi-column
• Display Types - Checkboxes, radio buttons, dropdowns, sliders
• Color Swatches - Visual color attribute representation
• Image Swatches - Custom image swatches for attributes
• Collapsible Filters - Expandable/collapsible filter sections

[object Object]gration & Compatibility**

• Gutenberg Blocks - Native block editor support
• Elementor Widget - Custom Elementor widget included
• WPML/Polylang - Multi-language support
• Page Builders - Compatible with major page builders
• Theme Override - Template system for custom styling

🛡️ Security & Standards

• WordPress Coding Standards - Follows WP best practices
• Nonce Validation - Secure AJAX requests
• Data Sanitization - All inputs properly sanitized
• Capability Checks - Proper permission handling
• GPL v2+ Licensed - Open source and WordPress compatible

Installation

Automatic Installation

1. Download the plugin zip file
2. Go to WordPress Admin → Plugins → Add New
3. Click Upload Plugin and select the zip file
4. Click Install Now and then Activate

Manual Installation

1. Upload the plugin folder to /wp-content/plugins/
2. Activate the plugin through the Plugins menu in WordPress

Requirements

• WordPress 5.0 or higher
• WooCommerce 4.0 or higher
• PHP 7.4 or higher

Quick Start

1. Create Your First Filter Set

1. Go to WooCommerce → Product Filters
2. Click Add New Filter Set
3. Enter a title for your filter set
4. Click Add Filter to add different filter types
5. Configure each filter's settings
6. Save the filter set

2. Display Filters

Choose one of these methods to display your filters:

Shortcode

[nkd_ajax_product_filter id="1"]

Widget

1. Go to Appearance → Widgets
2. Add NKD Product Filter widget to your sidebar
3. Select your filter set

Gutenberg Block

1. In the block editor, search for "Product Filter"
2. Add the block and select your filter set

PHP Template

<?php
if (function_exists('nkd_display_product_filter')) {
    nkd_display_product_filter(1); // Filter set ID
}
?>

Configuration

Filter Types

Product Attributes

• Taxonomy: Select which product attribute to filter by
• Display Type: Checkbox, radio, select, or swatch types
• Swatch Options: Color, image, or label swatches

Price Range

• Slider: Interactive price range slider
• Input Range: Min/max price input fields
• Predefined Ranges: Set custom price ranges

Categories

• Hierarchical: Show parent/child category relationships
• Display Options: Checkbox, radio, or select dropdown

Global Settings

Access global settings at WooCommerce → Settings → Products → Filters

• Enable AJAX: Toggle AJAX functionality
• SEO URLs: Enable/disable SEO-friendly URLs
• Cache Duration: Set filter cache expiration time
• Loading Animation: Customize loading indicators

Customization

Template Override

Copy templates from /plugins/nkd-woocommerce-ajax-product-filter/templates/ to your theme:

your-theme/
├── nkd-wc-ajax-filter/
│   ├── filter-set.php
│   ├── active-filters.php
│   └── filters/
│       ├── attribute-filter.php
│       ├── price-filter.php
│       └── category-filter.php

Custom CSS

Add custom styles to your theme's CSS:

/* Customize filter appearance */
.nkd-filter {
    margin-bottom: 20px;
}

.nkd-filter-title {
    font-weight: bold;
    margin-bottom: 10px;
}

/* Style color swatches */
.nkd-color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ddd;
}

Hooks & Filters

Actions

// Before filters are rendered
do_action('nkd_before_filters', $filter_set_id);

// After filters are rendered
do_action('nkd_after_filters', $filter_set_id);

// Before AJAX filter processing
do_action('nkd_before_ajax_filter', $filters);

Filters

// Modify filter query arguments
add_filter('nkd_filter_query_args', function($args, $filters) {
    // Modify $args
    return $args;
}, 10, 2);

// Customize filter HTML output
add_filter('nkd_filter_html', function($html, $filter_type, $args) {
    // Modify $html
    return $html;
}, 10, 3);

Developer API

Register Custom Filter Type

add_action('nkd_register_filters', function($filter_manager) {
    $filter_manager->register_filter('custom_type', 'My_Custom_Filter');
});

Custom Filter Class

class My_Custom_Filter extends NKD\WC_Ajax_Filter\Filters\Base_Filter {
    protected $type = 'custom_type';

    public function render($args = array()) {
        // Return filter HTML
    }

    public function apply_to_query($query_args, $value) {
        // Modify query arguments
        return $query_args;
    }
}

Troubleshooting

Common Issues

Filters Not Working

1. Check if WooCommerce is active
2. Verify filter set is properly configured
3. Ensure AJAX is enabled in settings
4. Check browser console for JavaScript errors

Styling Issues

1. Check for theme CSS conflicts
2. Verify template files are in correct location
3. Clear any caching plugins
4. Test with default WordPress theme

Performance Issues

1. Enable caching in plugin settings
2. Optimize database queries
3. Use object caching if available
4. Consider CDN for static assets

Debug Mode

Enable debug mode by adding to wp-config.php:

define('NKD_AJAX_FILTER_DEBUG', true);

Support

• Documentation: Plugin Documentation
• Support Forum: WordPress.org Support
• GitHub Issues: Report Bugs

Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

Development Setup

1. Clone the repository
2. Run npm install to install dependencies
3. Run npm run build to compile assets
4. Run npm run test to run tests

Changelog

1.0.0

• Initial release
• Complete filter system implementation
• AJAX functionality
• SEO-friendly URLs
• Multi-language support
• Page builder integrations

License

This plugin is licensed under the GPL v2 or later.

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

Credits

Developed with ❤️ for the WordPress and WooCommerce community.