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

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

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

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

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

Основные шаги создания динамического фильтра товаров в WooCommerce

Для создания фильтра нам нужно:

• Получить доступные атрибуты или категории товаров;
• Сформировать HTML-форму с чекбоксами или селекторами;
• Обработать запрос пользователя и сформировать WP_Query с параметрами фильтра;
• Вывести отфильтрованные товары на страницу.

Получение атрибутов и категорий товаров

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

function wpkit_get_product_attributes() {
    $attributes = wc_get_attribute_taxonomies();
    return $attributes;
}

Для категорий:

function wpkit_get_product_categories() {
    return get_terms([
        'taxonomy' => 'product_cat',
        'hide_empty' => true,
    ]);
}

Формирование формы фильтра

Выведем чекбоксы для каждой категории и атрибута. Например, для категорий:

function wpkit_render_category_filter() {
    $categories = wpkit_get_product_categories();
    echo '<form method="GET" id="wpkit-filter-form">';
    foreach ($categories as $cat) {
        $checked = isset($_GET['product_cat']) && in_array($cat->slug, (array) $_GET['product_cat']) ? 'checked' : '';
        echo '<p><label><input type="checkbox" name="product_cat[]" value="' . esc_attr($cat->slug) . '" ' . $checked . '> ' . esc_html($cat->name) . '</label></p>';
    }
    echo '<button type="submit">Применить фильтр</button>';
    echo '</form>';
}

Обработка фильтра и запрос товаров

В обработчике перед выводом товаров сформируем аргументы для WP_Query на основе выбранных пользователем фильтров:

function wpkit_filter_products_query($query_args) {
    $tax_query = [];
    if (isset($_GET['product_cat']) && !empty($_GET['product_cat'])) {
        $tax_query[] = [
            'taxonomy' => 'product_cat',
            'field'    => 'slug',
            'terms'    => array_map('sanitize_text_field', (array) $_GET['product_cat']),
            'operator' => 'IN',
        ];
    }

    if (!empty($tax_query)) {
        $query_args['tax_query'] = $tax_query;
    }

    return $query_args;
}

Применяем этот фильтр в вашем шаблоне или через хук, например:

$args = [
    'post_type' => 'product',
    'posts_per_page' => 12,
];
$args = wpkit_filter_products_query($args);
$query = new WP_Query($args);

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

Расширение фильтра с использованием мета-полей

Иногда требуется фильтровать товары по дополнительным параметрам, хранящимся в мета-полях, например, по цене, артикулу или наличию. Для этого добавим мета-запрос к WP_Query.

Пример фильтрации по цене:

if (isset($_GET['min_price']) && isset($_GET['max_price'])) {
    $meta_query[] = [
        'key' => '_price',
        'value' => [floatval($_GET['min_price']), floatval($_GET['max_price'])],
        'compare' => 'BETWEEN',
        'type' => 'NUMERIC',
    ];
}

if (!empty($meta_query)) {
    $query_args['meta_query'] = $meta_query;
}

В форму можно добавить поля для минимальной и максимальной цены:

<p><label>Цена от: <input type="number" name="min_price" value="' . esc_attr($_GET['min_price'] ?? '') . '" step="0.01"></label></p>
<p><label>Цена до: <input type="number" name="max_price" value="' . esc_attr($_GET['max_price'] ?? '') . '" step="0.01"></label></p>

Примеры полезных плагинов для расширения фильтров

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

• Clearfy Pro — расширение оптимизации и управления WooCommerce;
• WPRemark — для отзывов и оценок, которые тоже можно использовать как дополнительный фильтр;
• Фильтры из комплекта тем, например, Root, поддерживают кастомные фильтры товаров.

Советы по оптимизации и улучшению UX фильтрации

Чтобы динамический фильтр работал быстро и удобно:

• Используйте AJAX для обновления результатов без перезагрузки страницы.
• Кэшируйте результаты запросов, особенно если товаров много.
• Добавьте индикаторы загрузки и понятные сообщения, если фильтр ничего не нашел.
• Позаботьтесь о мобильной версии — сделайте фильтр компактным и удобным для касаний.

Пример AJAX обновления фильтра

В JavaScript повесьте обработчик на отправку формы и отправляйте запрос через fetch или jQuery, а затем подставляйте полученный HTML в контейнер товаров. Это позволит избежать полной перезагрузки страницы и повысит отзывчивость интерфейса.