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

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

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

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

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

Основы работы с WooCommerce атрибутами и запросами WP_Query

Для создания фильтра нам понадобится взаимодействовать с атрибутами товаров, метаданными и таксономиями WooCommerce. Атрибуты товаров в WooCommerce — это пользовательские таксономии с префиксом pa_, например, pa_color для цвета.

Чтобы получить все доступные значения атрибута, можно использовать функцию wc_get_product_terms() или работать напрямую с таксономиями WordPress. Для фильтрации товаров используется класс WP_Query, в котором можно задать параметры для таксономий и метаполей.

Важно построить запрос так, чтобы он учитывал выбранные пользователем фильтры и корректно комбинировал их между собой.

Пример получения всех значений атрибута "Цвет"

function wpstandart_get_attribute_values($attribute_name) {
    $taxonomy = 'pa_' . $attribute_name;
    $terms = get_terms(array(
        'taxonomy' => $taxonomy,
        'hide_empty' => true,
    ));
    return $terms;
}

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

Создание HTML формы фильтра и обработка параметров

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

<form method="GET" id="wpstandart-filter-form">
    <select name="filter_color" onchange="this.form.submit()">
        <option value="">Все цвета</option>
        <?php
        $colors = wpstandart_get_attribute_values('color');
        foreach ($colors as $color) {
            $selected = (isset($_GET['filter_color']) && $_GET['filter_color'] === $color->slug) ? 'selected' : '';
            echo "<option value=\"{$color->slug}\" $selected>{$color->name}</option>";
        }
        ?>
    </select>
</form>

Когда пользователь выбирает цвет, форма отправляется методом GET, и параметр filter_color передается в URL.

Модификация основного запроса WooCommerce для фильтрации товаров

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

function wpstandart_filter_products_by_color($query) {
    if (!is_admin() && $query->is_main_query() && (is_shop() || is_product_taxonomy())) {
        if (!empty($_GET['filter_color'])) {
            $color_slug = sanitize_text_field($_GET['filter_color']);
            $tax_query = array(
                array(
                    'taxonomy' => 'pa_color',
                    'field' => 'slug',
                    'terms' => $color_slug,
                ),
            );
            $query->set('tax_query', $tax_query);
        }
    }
}
add_action('pre_get_posts', 'wpstandart_filter_products_by_color');

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

Расширение фильтра: добавление цены и нескольких параметров

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

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

<form method="GET" id="wpstandart-filter-form">
    <input type="number" name="min_price" placeholder="Минимальная цена" value="<?php echo isset($_GET['min_price']) ? esc_attr($_GET['min_price']) : ''; ?>" />
    <input type="number" name="max_price" placeholder="Максимальная цена" value="<?php echo isset($_GET['max_price']) ? esc_attr($_GET['max_price']) : ''; ?>" />
    <select name="filter_color" onchange="this.form.submit()">
        <option value="">Все цвета</option>
        <?php /* как выше */ ?>
    </select>
    <button type="submit">Применить</button>
</form>

Теперь модифицируем функцию фильтрации:

function wpstandart_filter_products_advanced($query) {
    if (!is_admin() && $query->is_main_query() && (is_shop() || is_product_taxonomy())) {
        $tax_query = array();
        $meta_query = array();

        if (!empty($_GET['filter_color'])) {
            $color_slug = sanitize_text_field($_GET['filter_color']);
            $tax_query[] = array(
                'taxonomy' => 'pa_color',
                'field' => 'slug',
                'terms' => $color_slug,
            );
        }

        if (!empty($_GET['min_price']) || !empty($_GET['max_price'])) {
            $min = isset($_GET['min_price']) ? floatval($_GET['min_price']) : 0;
            $max = isset($_GET['max_price']) ? floatval($_GET['max_price']) : PHP_INT_MAX;
            $meta_query[] = array(
                'key' => '_price',
                'value' => array($min, $max),
                'compare' => 'BETWEEN',
                'type' => 'NUMERIC',
            );
        }

        if (!empty($tax_query)) {
            $query->set('tax_query', $tax_query);
        }
        if (!empty($meta_query)) {
            $query->set('meta_query', $meta_query);
        }
    }
}
add_action('pre_get_posts', 'wpstandart_filter_products_advanced');

Оптимизация и кэширование результатов фильтрации

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

• Использовать AJAX-загрузку фильтра, чтобы не перезагружать страницу полностью.
• Кэшировать результаты запросов с помощью Transients API или внешних систем кеширования.
• Ограничивать количество отображаемых опций в фильтрах, чтобы избежать больших tax_query.

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

jQuery(document).on('change', '#wpstandart-filter-form select, #wpstandart-filter-form input', function() {
    var data = jQuery('#wpstandart-filter-form').serialize();
    jQuery.post(wpstandart_ajax.ajax_url, data + '&action=wpstandart_filter_products', function(response) {
        jQuery('#products-container').html(response);
    });
});

На стороне PHP нужно реализовать обработчик ajax, который формирует WP_Query с параметрами и возвращает HTML товаров.

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

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

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