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

Для многих проектов на WordPress с WooCommerce важна возможность предоставить пользователям удобный и быстрый фильтр товаров. Стандартные фильтры WooCommerce часто ограничены, а сторонние плагины могут замедлять сайт или не соответствовать уникальным требованиям проекта.

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

Кастомный фильтр — это гибкое решение, которое позволяет:

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

Создание собственного фильтра требует знания PHP, WordPress API, а также понимания работы WooCommerce с таксономиями и метаполями продуктов.

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

1. Определение критериев фильтрации

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

2. Создание пользовательского виджета фильтра

Для вывода фильтра сделаем виджет. Пример с классом виджета, который выводит список атрибутов с чекбоксами:

class Wpmentor_Widget_Product_Filter extends WP_Widget {
    public function __construct() {
        parent::__construct('wpmentor_product_filter', 'Фильтр товаров WPmentor');
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        echo '<form method="GET" id="wpmentor-filter-form">';
        $this->wpmentor_show_attributes_filter();
        echo '<button type="submit">Применить</button>';
        echo '</form>';
        echo $args['after_widget'];
    }

    private function wpmentor_show_attributes_filter() {
        $taxonomy = 'pa_color'; // пример атрибута цвет
        $terms = get_terms(array('taxonomy' => $taxonomy, 'hide_empty' => true));
        if (!empty($terms) && !is_wp_error($terms)) {
            foreach ($terms as $term) {
                $checked = isset($_GET[$taxonomy]) && in_array($term->slug, (array) $_GET[$taxonomy]) ? 'checked' : '';
                echo '<label><input type="checkbox" name="' . esc_attr($taxonomy) . '[]" value="' . esc_attr($term->slug) . '" ' . $checked . '> ' . esc_html($term->name) . '</label><br>';
            }
        }
    }
}

add_action('widgets_init', function() {
    register_widget('Wpmentor_Widget_Product_Filter');
});

3. Обработка параметров фильтрации в запросах WooCommerce

Чтобы фильтр работал, нам нужно изменить основной запрос WooCommerce, добавив параметры фильтрации по выбранным атрибутам. Используем хук woocommerce_product_query:

function wpmentor_filter_products_by_attributes( $q ) {
    $tax_query = (array) $q->get('tax_query');

    if (!empty($_GET['pa_color']) && is_array($_GET['pa_color'])) {
        $tax_query[] = array(
            'taxonomy' => 'pa_color',
            'field'    => 'slug',
            'terms'    => array_map('sanitize_text_field', $_GET['pa_color']),
            'operator' => 'IN',
        );
    }

    $q->set('tax_query', $tax_query);
}
add_action('woocommerce_product_query', 'wpmentor_filter_products_by_attributes');

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

Расширение фильтра: добавление ценового диапазона

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

<label>Цена от: <input type="number" name="min_price" value="<?php echo isset($_GET['min_price']) ? intval($_GET['min_price']) : ''; ?>" /></label>
<label>до: <input type="number" name="max_price" value="<?php echo isset($_GET['max_price']) ? intval($_GET['max_price']) : ''; ?>" /></label>

И добавим фильтрацию в запрос WooCommerce:

function wpmentor_filter_products_by_price( $q ) {
    $meta_query = (array) $q->get('meta_query');

    if (!empty($_GET['min_price'])) {
        $meta_query[] = array(
            'key' => '_price',
            'value' => intval($_GET['min_price']),
            'compare' => '>=',
            'type' => 'NUMERIC'
        );
    }

    if (!empty($_GET['max_price'])) {
        $meta_query[] = array(
            'key' => '_price',
            'value' => intval($_GET['max_price']),
            'compare' => '<=',
            'type' => 'NUMERIC'
        );
    }

    $q->set('meta_query', $meta_query);
}
add_action('woocommerce_product_query', 'wpmentor_filter_products_by_price');

Оптимизация и UX фильтра

AJAX подгрузка результатов

Чтобы не перезагружать всю страницу при каждом изменении фильтра, можно добавить AJAX-запросы. Это улучшит пользовательский опыт и скорость работы. В WordPress для этого используют action-обработчики admin-ajax.php.

Кэширование запросов

Большое количество фильтров может замедлить сайт. Рекомендуется использовать кэширование результатов с помощью Transient API или внешних систем кэширования.

Совместимость с SEO

Обратите внимание, что динамические URL с множественными параметрами могут плохо индексироваться поисковиками. Чтобы избежать дублей, используйте canonical URL и noindex для страниц с фильтрами.

Дополнительные рекомендации и полезные плагины

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

• Clearfy Pro — оптимизация WooCommerce и WordPress, включая улучшение работы с запросами;
• ABC Pagination — удобная пагинация для страниц с фильтрами;
• WPRemark — расширенные возможности управления отзывами, которые можно связать с фильтрами.

Эти инструменты помогут сделать ваш фильтр более удобным и быстрым.

Итоги

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

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