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

Фильтрация товаров — одна из важных функций для удобства пользователей интернет-магазина на WooCommerce. Многие прибегают к установке множества плагинов, но это может замедлить сайт и создать конфликты. В этой статье разберём, как создать кастомные фильтры для товаров WooCommerce без плагинов, используя собственный код и стандартные возможности WordPress и WooCommerce.

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

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

Создание фильтров вручную позволяет:

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

Далее рассмотрим, как реализовать фильтрацию по атрибутам товара и цене с помощью собственного кода.

Создание фильтра по атрибутам товара WooCommerce

В WooCommerce товарные атрибуты — это таксономии, например, pa_color для цвета или pa_size для размера. Мы можем вывести фильтр на основе этих атрибутов и обновлять список товаров без плагинов.

Вывод фильтра атрибутов в боковой панели

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

function wpacademy_show_color_filter() {
    $taxonomy = 'pa_color';
    $terms = get_terms(array(
        'taxonomy' => $taxonomy,
        'hide_empty' => true,
    ));
    if (!empty($terms) && !is_wp_error($terms)) {
        echo '<div class="wpacademy-filter-widget">';
        echo '<h3>Фильтр по цвету</h3>';
        echo '<form method="GET" action="">';
        foreach ($terms as $term) {
            $checked = isset($_GET['filter_color']) && $_GET['filter_color'] === $term->slug ? 'checked' : '';
            echo '<p><label>';
            echo '<input type="radio" name="filter_color" value="' . esc_attr($term->slug) . '" ' . $checked . ' /> ';
            echo esc_html($term->name);
            echo '</label></p>';
        }
        echo '<p><button type="submit">Применить</button></p>';
        echo '</form>';
        echo '</div>';
    }
}
add_action('woocommerce_sidebar', 'wpacademy_show_color_filter');

Этот код выводит радиокнопки с доступными цветами из атрибута pa_color. Пользователь может выбрать цвет и применить фильтр.

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

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

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

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

Добавление фильтра по цене с диапазоном

Фильтрация по цене — одна из самых востребованных. WooCommerce хранит цену товара в мета-поле _price. Создадим простой фильтр с минимальной и максимальной ценой.

Вывод формы фильтра по цене

Добавим в шаблон или в сайдбар следующий код:

function wpacademy_show_price_filter() {
    $min_price = isset($_GET['min_price']) ? floatval($_GET['min_price']) : '';
    $max_price = isset($_GET['max_price']) ? floatval($_GET['max_price']) : '';
    echo '<div class="wpacademy-price-filter">';
    echo '<h3>Фильтр по цене</h3>';
    echo '<form method="GET" action="">';
    echo '<p><label>Мин. цена: <input type="number" step="0.01" name="min_price" value="' . esc_attr($min_price) . '" /></label></p>';
    echo '<p><label>Макс. цена: <input type="number" step="0.01" name="max_price" value="' . esc_attr($max_price) . '" /></label></p>';
    echo '<p><button type="submit">Применить</button></p>';
    echo '</form>';
    echo '</div>';
}
add_action('woocommerce_sidebar', 'wpacademy_show_price_filter');

Фильтрация товаров по цене

Добавим обработку параметров min_price и max_price в запрос товаров:

function wpacademy_filter_products_by_price($query) {
    if (!is_admin() && $query->is_main_query() && is_shop()) {
        $meta_query = (array) $query->get('meta_query');
        if (isset($_GET['min_price']) && is_numeric($_GET['min_price'])) {
            $meta_query[] = array(
                'key' => '_price',
                'value' => floatval($_GET['min_price']),
                'compare' => '>=',
                'type' => 'NUMERIC',
            );
        }
        if (isset($_GET['max_price']) && is_numeric($_GET['max_price'])) {
            $meta_query[] = array(
                'key' => '_price',
                'value' => floatval($_GET['max_price']),
                'compare' => '<=',
                'type' => 'NUMERIC',
            );
        }
        $query->set('meta_query', $meta_query);
    }
}
add_action('pre_get_posts', 'wpacademy_filter_products_by_price');

Как сохранить параметры фильтрации при пагинации и навигации

Чтобы фильтры работали корректно при переходах по страницам и ссылкам, нужно сохранить параметры в URL. Используем метод GET, как показано в формах, и добавим к пагинации текущие параметры.

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

Пример добавления параметров в ссылку пагинации:

function wpacademy_add_query_vars_to_pagination($link) {
    $args = array();
    if (!empty($_GET['filter_color'])) {
        $args['filter_color'] = sanitize_text_field($_GET['filter_color']);
    }
    if (!empty($_GET['min_price'])) {
        $args['min_price'] = floatval($_GET['min_price']);
    }
    if (!empty($_GET['max_price'])) {
        $args['max_price'] = floatval($_GET['max_price']);
    }
    if (!empty($args)) {
        $link = add_query_arg($args, $link);
    }
    return $link;
}
add_filter('paginate_links', 'wpacademy_add_query_vars_to_pagination');

Дополнительные варианты фильтрации и улучшения

Фильтрация по нескольким атрибутам

Выше мы рассмотрели фильтрацию по одному атрибуту (цвет). Чтобы добавить фильтр по нескольким атрибутам (например, цвет и размер), расширьте форму и обработчик, собирая массив выбранных значений и добавляя их в tax_query с параметром relation => AND или OR.

Использование AJAX для динамического обновления фильтров

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

Интеграция с WPShop и Clearfy Pro

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

Также полезно протестировать совместимость с темами Reboot и Bono, которые оптимизированы для WooCommerce и поддерживают кастомные хуки для фильтров.

Заключение по созданию фильтров без плагинов

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

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