Как добавить AJAX фильтрацию товаров в WordPress для малого бизнеса

Автор: Татьяна Боброва | Опубликовано: 14.03.2026

Для владельцев сайтов на WordPress, особенно если речь идет о небольших интернет-магазинах или каталогах товаров, удобная и быстрая фильтрация товаров — критически важный элемент. Пользователи хотят быстро найти нужный товар, не перезагружая страницу при каждом изменении фильтра. Решение — внедрить AJAX фильтрацию, которая обновляет список товаров без полной перезагрузки сайта.

Зачем нужна AJAX фильтрация в WordPress

Стандартные фильтры в WordPress (например, через виджеты WooCommerce или таксономии) обычно приводят к перезагрузке страницы, что увеличивает время ожидания и снижает удобство пользователя. AJAX фильтрация позволяет отправлять запросы на сервер и получать обновленные данные без перезагрузки, ускоряя взаимодействие и улучшая UX.

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

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

Обзор плагинов для AJAX фильтрации в WordPress

Для реализации AJAX фильтрации существует несколько готовых решений, которые можно использовать с минимальными настройками.

1. WPShop AJAX Filter

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

Преимущества:

Простота настройки
Поддержка нескольких видов фильтров (чекбоксы, слайдеры, выпадающие списки)
Совместимость с любыми темами

Недостатки — часть расширенных функций доступна только в PRO версии.

2. FacetWP

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

Его можно легко интегрировать с WPRemark для анализа поведения пользователей.

3. Advanced AJAX Product Filters

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

Поддерживает работу с WooCommerce и кастомными типами записей.

Как реализовать AJAX фильтрацию своими силами: пример кода

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

1. Регистрация AJAX обработчика в WordPress

add_action('wp_ajax_wpsolution_filter_products', 'wpsolution_filter_products_callback');
add_action('wp_ajax_nopriv_wpsolution_filter_products', 'wpsolution_filter_products_callback');

function wpsolution_filter_products_callback() {
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 10,
    );

    if (isset($_POST['category']) && !empty($_POST['category'])) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'product_cat',
                'field' => 'slug',
                'terms' => sanitize_text_field($_POST['category'])
            )
        );
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            wc_get_template_part('content', 'product');
        }
    } else {
        echo '<p>Товары не найдены</p>';
    }
    wp_die();
}

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

jQuery(document).ready(function($) {
    $('#filter-category').on('change', function() {
        var category = $(this).val();
        $.ajax({
            url: wpsolution_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'wpsolution_filter_products',
                category: category
            },
            beforeSend: function() {
                $('#products-container').html('Загрузка...');
            },
            success: function(response) {
                $('#products-container').html(response);
            },
            error: function() {
                $('#products-container').html('Произошла ошибка');
            }
        });
    });
});

3. Подключение скрипта и локализация AJAX URL

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

В HTML нужно добавить селектор для выбора категории и контейнер для вывода товаров:

<select id="filter-category">
    <option value="">Выберите категорию</option>
    <option value="category-slug-1">Категория 1</option>
    <option value="category-slug-2">Категория 2</option>
</select>

<div id="products-container">
    <!-- Здесь будут выводиться товары -->
</div>

Советы по оптимизации AJAX фильтрации

Чтобы фильтрация работала быстро и без ошибок, учтите следующие моменты:

Кеширование запросов. Используйте transient API или сторонние кеширующие решения, чтобы не нагружать базу данных при частых запросах.
Минимизация данных. Возвращайте только необходимый HTML или JSON, избегайте избыточных данных.
Отложенная загрузка. Если товаров слишком много, реализуйте пагинацию с AJAX, чтобы не загружать сразу всю страницу.
Обработка ошибок. Добавьте информативные сообщения для пользователей при ошибках и пустых результатах.

Интеграция с плагином WPRemark для оценки качества контента в товарах

Если на сайте используется плагин WPRemark, можно дополнительно анализировать описания товаров и отзывы, чтобы улучшить фильтрацию по качеству или рейтингу. Например, добавить фильтр по оценкам, которые собирает WPRemark.

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

Подробнее о WPRemark и его настройке можно узнать на официальной странице плагина.

Заключение по теме AJAX фильтрации в WordPress

Добавление AJAX фильтрации — разумный шаг для любого сайта малого бизнеса на WordPress, который предлагает товары или услуги. Это улучшает взаимодействие пользователя с сайтом, ускоряет поиск и повышает конверсию.

Используйте готовые плагины или внедряйте свой код, учитывая особенности вашего проекта и серверных ресурсов. Не забывайте про оптимизацию и интеграцию с дополнительными инструментами аналитики, такими как WPRemark.

Для удобства скачивания и установки плагинов с расширенными возможностями можно посетить официальный магазин WPSHOP.