WooCommerce не отображает товары при фильтрации AJAX: диагностика и решение

Диагностика проблемы с AJAX фильтрацией товаров в WooCommerce

Если при использовании AJAX-фильтров в WooCommerce товары не обновляются или список остаётся пустым, это указывает на ошибку в обработке AJAX-запроса или конфликт с темой/плагинами. Для начала нужно проверить несколько ключевых моментов:

• Корректно ли передаётся запрос фильтрации (параметры и action);
• Получает ли сервер AJAX-запрос и возвращает ли валидный JSON или HTML;
• Нет ли JavaScript-ошибок в консоли браузера;
• Существует ли конфликт с другими плагинами или темой, блокирующими AJAX;
• Правильно ли настроен обработчик AJAX в functions.php или плагине.

Для диагностики используйте инструменты разработчика в браузере (Network, Console), а также включите WP_DEBUG в wp-config.php:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Лог ошибок появится в wp-content/debug.log. Это поможет выявить PHP-ошибки при обработке AJAX.

Пошаговое решение: настройка корректной AJAX фильтрации в WooCommerce

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

Добавьте в functions.php вашей темы или в кастомный плагин следующий код, который будет обрабатывать AJAX-запросы для авторизованных и неавторизованных пользователей:

add_action('wp_ajax_woocommerce_filter_products', 'custom_woocommerce_filter_products');
add_action('wp_ajax_nopriv_woocommerce_filter_products', 'custom_woocommerce_filter_products');

function custom_woocommerce_filter_products() {
    // Проверяем nonce для безопасности
    check_ajax_referer('filter_nonce', 'security');

    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 12,
        'post_status' => 'publish',
    );

    // Пример: фильтр по категории из AJAX-запроса
    if (isset($_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()) {
        ob_start();
        woocommerce_product_loop_start();
        while ($query->have_posts()) : $query->the_post();
            wc_get_template_part('content', 'product');
        endwhile;
        woocommerce_product_loop_end();
        wp_send_json_success(ob_get_clean());
    } else {
        wp_send_json_error('Товары не найдены');
    }
    wp_die();
}

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

В файле JS темы подключите обработчик кликов по фильтру:

jQuery(document).ready(function($){
    $('.filter-button').on('click', function(e){
        e.preventDefault();
        var category = $(this).data('category');
        $.ajax({
            url: woocommerce_params.ajax_url,
            type: 'POST',
            data: {
                action: 'woocommerce_filter_products',
                category: category,
                security: woocommerce_params.filter_nonce
            },
            success: function(response) {
                if(response.success) {
                    $('.products-grid').html(response.data);
                } else {
                    $('.products-grid').html('<p>Товары не найдены</p>');
                }
            },
            error: function() {
                $('.products-grid').html('<p>Ошибка загрузки товаров</p>');
            }
        });
    });
});

3. Локализация скрипта и передача nonce

Чтобы передать ajax_url и nonce, добавьте в functions.php:

function enqueue_filter_scripts() {
    wp_enqueue_script('custom-filter', get_template_directory_uri() . '/js/custom-filter.js', array('jquery'), '1.0', true);
    wp_localize_script('custom-filter', 'woocommerce_params', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'filter_nonce' => wp_create_nonce('filter_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_filter_scripts');

Проверка результата после внедрения

После внедрения кода:

• Откройте страницу с товарами и откройте консоль браузера (F12 → Console, Network);
• Кликните по фильтру, который должен отправлять AJAX-запрос;
• Вкладка Network должна показать POST-запрос на admin-ajax.php с параметрами и статусом 200;
• В ответе увидите HTML товаров или сообщение об ошибке;
• Если товары обновились в блоке .products-grid, значит всё работает корректно.

Частые ошибки и как их исправить

• Ошибка 400 или 403 (Forbidden) при AJAX-запросе: Проверьте корректность nonce и его передачу из JS. Убедитесь, что check_ajax_referer совпадает с созданным nonce.
• Пустой ответ или товары не обновляются: Проверьте правильность селекторов в JS (например, .products-grid должен совпадать с реальным блоком вывода товаров).
• JavaScript ошибки в консоли: Обязательно исправьте все ошибки, они могут блокировать выполнение AJAX.
• Конфликты с другими плагинами: Отключите сторонние плагины и проверьте работу фильтра. Если заработало — включайте по одному для выявления виновника.
• Неправильный WP_Query: Убедитесь, что параметры запроса корректны, а таксономии и поля фильтров существуют.

Практические советы по производительности и безопасности

• Используйте wp_cache_set и wp_cache_get для кеширования результатов фильтрации, если количество товаров большое;
• Всегда проверяйте и очищайте входящие данные (sanitize_text_field, intval и др.);
• Ограничьте количество отображаемых товаров в AJAX-запросе для снижения нагрузки;
• Добавьте пагинацию или ленивую загрузку (lazy loading) для больших списков;
• Регулярно обновляйте WooCommerce и используемые плагины для предотвращения уязвимостей.

Сравнение способов реализации AJAX фильтрации в WooCommerce