Как создать динамическую фильтрацию товаров WooCommerce без плагинов

Почему стоит создавать собственную фильтрацию товаров WooCommerce

Фильтрация товаров – ключевой элемент UX интернет-магазина, особенно если каталог насчитывает сотни или тысячи позиций. Большинство пользователей привыкли быстро находить нужный товар по атрибутам, цене или категории. Хотя в каталоге WooCommerce есть базовые фильтры, они часто ограничены и не соответствуют уникальным требованиям проекта.

Использование готовых плагинов для фильтрации порой приводит к избыточной нагрузке, конфликтам или нежелательным ограничениям в дизайне и функционале. Поэтому создание собственной динамической фильтрации дает полный контроль над процессом, позволяет оптимизировать производительность и создавать адаптивный интерфейс.

В этом материале мы рассмотрим, как без сторонних плагинов разработать удобную фильтрацию, которая обновляет товары без перезагрузки страницы, используя AJAX, а также подключим фильтры по атрибутам, цене и категориям.

Подготовка: создание пользовательских запросов WooCommerce с параметрами фильтрации

Для начала нам нужно научиться формировать запросы WP_Query или WC_Product_Query с параметрами, которые будут приходить из фильтров пользователя. Например, фильтрация по цене, атрибутам (цвет, размер), категориям.

Пример базового запроса товаров с фильтрацией по цене и атрибуту:

function wpdesk_get_filtered_products_query( $args = array() ) {
    $default_args = array(
        'post_type' => 'product',
        'posts_per_page' => 12,
        'meta_query' => array(),
        'tax_query' => array(),
    );

    // Фильтр по цене
    if ( isset( $args['min_price'], $args['max_price'] ) ) {
        $default_args['meta_query'][] = array(
            'key' => '_price',
            'value' => array( $args['min_price'], $args['max_price'] ),
            'compare' => 'BETWEEN',
            'type' => 'NUMERIC',
        );
    }

    // Фильтр по атрибуту (например, цвет)
    if ( ! empty( $args['color'] ) ) {
        $default_args['tax_query'][] = array(
            'taxonomy' => 'pa_color',
            'field' => 'slug',
            'terms' => $args['color'],
        );
    }

    // Фильтр по категории
    if ( ! empty( $args['category'] ) ) {
        $default_args['tax_query'][] = array(
            'taxonomy' => 'product_cat',
            'field' => 'slug',
            'terms' => $args['category'],
        );
    }

    $query = new WC_Product_Query( $default_args );
    return $query->get_products();
}

В этом примере функция wpdesk_get_filtered_products_query принимает массив параметров и возвращает массив продуктов, подходящих под фильтр.

Обратите внимание, что для атрибутов WooCommerce (например, цвет) используется таксономия с префиксом pa_.

Реализация AJAX-запроса для динамического обновления товаров

Чтобы не перезагружать страницу при выборе фильтров, реализуем AJAX. Для этого:

• создадим фронтенд-форму с фильтрами;
• напишем JS, который отправляет выбранные параметры на сервер;
• обработаем AJAX-запрос на стороне PHP;
• обновим блок с товарами на странице.

1. Форма фильтрации

Простой пример формы с фильтрами по цене и цвету:

<form id="wpdesk-filter-form">
    <label>Цена от:</label>
    <input type="number" name="min_price" min="0" />
    <label>до:</label>
    <input type="number" name="max_price" min="0" />

    <label>Цвет:</label>
    <select name="color">
        <option value="">Все</option>
        <option value="red">Красный</option>
        <option value="blue">Синий</option>
        <option value="green">Зеленый</option>
    </select>

    <button type="submit">Фильтровать</button>
</form>
<div id="wpdesk-products-container"></div>

2. JavaScript для отправки AJAX-запроса

Добавим JS, который перехватывает отправку формы и отправляет данные на сервер:

jQuery(document).ready(function($) {
    $('#wpdesk-filter-form').on('submit', function(e) {
        e.preventDefault();
        var data = $(this).serialize();
        $.ajax({
            url: wpdesk_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'wpdesk_filter_products',
                filter: data
            },
            success: function(response) {
                $('#wpdesk-products-container').html(response);
            },
            error: function() {
                $('#wpdesk-products-container').html('Ошибка загрузки товаров.');
            }
        });
    });
});

Не забудьте добавить локализацию скрипта в PHP, чтобы передать ajax_url:

function wpdesk_enqueue_scripts() {
    wp_enqueue_script( 'wpdesk-filter', get_template_directory_uri() . '/js/wpdesk-filter.js', array('jquery'), null, true );
    wp_localize_script( 'wpdesk-filter', 'wpdesk_ajax_object', array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ) );
}
add_action( 'wp_enqueue_scripts', 'wpdesk_enqueue_scripts' );

3. Обработка AJAX-запроса на сервере

Добавим PHP-функцию, которая парсит параметры фильтра, вызывает функцию запроса товаров и возвращает HTML:

function wpdesk_ajax_filter_products() {
    parse_str( $_POST['filter'], $filter_args );

    $products = wpdesk_get_filtered_products_query( array(
        'min_price' => isset($filter_args['min_price']) ? floatval($filter_args['min_price']) : 0,
        'max_price' => isset($filter_args['max_price']) ? floatval($filter_args['max_price']) : 999999,
        'color' => !empty($filter_args['color']) ? sanitize_text_field($filter_args['color']) : '',
    ) );

    if ( !empty($products) ) {
        foreach ( $products as $product ) {
            echo '<div class="wpdesk-product-item">';
            echo '<h3>' . esc_html( $product->get_name() ) . '</h3>';
            echo '<p>Цена: ' . wc_price( $product->get_price() ) . '</p>';
            echo '</div>';
        }
    } else {
        echo '<p>Товары не найдены по заданным фильтрам.</p>';
    }
    wp_die();
}
add_action( 'wp_ajax_wpdesk_filter_products', 'wpdesk_ajax_filter_products' );
add_action( 'wp_ajax_nopriv_wpdesk_filter_products', 'wpdesk_ajax_filter_products' );

Оптимизация и расширение фильтра

Созданная фильтрация – базовая, но уже позволяет динамически обновлять товары без перезагрузки. Чтобы улучшить UX и масштабируемость, рекомендую:

• Добавить пагинацию с AJAX, чтобы пользователи могли листать товары;
• Поддержать множественный выбор атрибутов (например, несколько цветов);
• Добавить фильтрацию по рейтингу или наличию на складе;
• Кэшировать результаты запросов для ускорения загрузки;
• Использовать нативные хуки WooCommerce для интеграции с темой.

Для примера расширения фильтра по цвету на множественный выбор, измените форму:

<select name="color[]" multiple>
    ...
</select>

И в PHP обработке замените условие:

if ( ! empty( $args['color'] ) ) {
    $default_args['tax_query'][] = array(
        'taxonomy' => 'pa_color',
        'field' => 'slug',
        'terms' => $args['color'],
        'operator' => 'IN',
    );
}

Использование плагинов WPShop для улучшения фильтрации

Если вы хотите ускорить разработку и добавить дополнительные возможности, обратите внимание на продукты из каталога WPShop.ru. Например:

• Clearfy Pro – оптимизация и очистка WooCommerce, улучшение скорости фильтрации;
• Expert Review – сбор и показ отзывов, которые можно использовать как дополнительный фильтр;
• ABC Pagination – удобная постраничная навигация с AJAX;
• My Popup – уведомления при применении фильтров и специальных предложениях.

Эти решения помогут сделать фильтрацию не только функциональной, но и удобной для клиентов.