Как создать автоматическую фильтрацию товаров WooCommerce по атрибутам

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

Почему важна фильтрация товаров по атрибутам в WooCommerce

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

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

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

Использование встроенных возможностей WooCommerce для фильтрации

WooCommerce имеет стандартные виджеты для фильтрации по атрибутам (например, «Фильтр товаров по атрибутам»). Чтобы их использовать:

• Зайдите в Внешний вид → Виджеты;
• Добавьте виджет Фильтр товаров по атрибутам в нужную область (например, сайдбар);
• Выберите атрибуты, по которым хотите фильтровать.

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

Добавление фильтрации с AJAX для улучшения UX

Чтобы улучшить работу стандартных фильтров, можно добавить AJAX, чтобы не перезагружать страницу при выборе фильтра. Пример базового подхода:

function wpfinder_ajax_filter_scripts() {
    wp_enqueue_script('wpfinder-ajax-filter', get_stylesheet_directory_uri() . '/js/ajax-filter.js', array('jquery'), null, true);
    wp_localize_script('wpfinder-ajax-filter', 'ajax_filter_params', array(
        'ajaxurl' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'wpfinder_ajax_filter_scripts');

function wpfinder_ajax_filter() {
    $attribute = isset($_POST['attribute']) ? sanitize_text_field($_POST['attribute']) : '';
    $value = isset($_POST['value']) ? sanitize_text_field($_POST['value']) : '';

    $args = array(
        'post_type' => 'product',
        'tax_query' => array(
            array(
                'taxonomy' => 'pa_' . $attribute, // атрибуты WooCommerce имеют префикс pa_
                'field' => 'slug',
                'terms' => $value,
            ),
        ),
    );

    $query = new WP_Query($args);

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

В коде выше мы создаём AJAX-обработчик, который получает атрибут и значение, формирует WP_Query с tax_query по нужному атрибуту и выводит товары без перезагрузки.

Для работы потребуется JavaScript (файл ajax-filter.js), который будет отправлять AJAX-запросы при выборе фильтра.

Плагины для расширенной фильтрации товаров WooCommerce

Если вы хотите быстро получить готовое решение с мощным функционалом, рассмотрите следующие плагины:

• WOOF – Products Filter for WooCommerce: популярный и бесплатный плагин с возможностью фильтрации по атрибутам, цене, категориям и прочему. Имеет поддержку AJAX.
• Filter Everything: универсальный фильтр для любых типов записей и таксономий, включая атрибуты товаров WooCommerce.
• Clearfy Pro (с https://wpshop.ru/?utm_source=wpfinder.ru&utm_medium=article&utm_campaign=kak-sozdat-avtomaticheskuyu-filtraciyu-tovarov-woocommerce-po-atributam): плагин оптимизации, который содержит расширенные возможности по управлению фильтрами и улучшению производительности.

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

Пример кастомизации фильтра с использованием WOOF

Если необходимо добавить свой пользовательский атрибут в фильтр, можно использовать фильтр WOOF:

add_filter('woof_additional_taxonomies', 'wpfinder_woof_add_taxonomies');
function wpfinder_woof_add_taxonomies($taxonomies) {
    $taxonomies[] = 'pa_custom_attribute';
    return $taxonomies;
}

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

Создание кастомного виджета фильтрации для WooCommerce

Иногда стандартных виджетов и плагинов недостаточно, и нужно создавать свой собственный фильтр. Рассмотрим простой пример создания виджета с фильтрацией по атрибуту:

class Wpfinder_WC_Attribute_Filter_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpfinder_wc_attr_filter',
            'Фильтр WooCommerce по атрибуту',
            array('description' => 'Фильтр товаров по выбранному атрибуту WooCommerce')
        );
    }

    public function widget($args, $instance) {
        $attr = !empty($instance['attribute']) ? $instance['attribute'] : '';
        if(!$attr) return;

        echo $args['before_widget'];
        echo $args['before_title'] . 'Фильтр по ' . esc_html($attr) . $args['after_title'];

        $terms = get_terms(array('taxonomy' => 'pa_' . $attr, 'hide_empty' => true));
        if(!empty($terms) && !is_wp_error($terms)) {
            echo '<ul class="wpfinder-attr-filter-list">';
            foreach($terms as $term) {
                $link = add_query_arg(array($attr => $term->slug), get_post_type_archive_link('product'));
                echo '<li><a href="' . esc_url($link) . '">' . esc_html($term->name) . '</a></li>';
            }
            echo '</ul>';
        }

        echo $args['after_widget'];
    }

    public function form($instance) {
        $attribute = !empty($instance['attribute']) ? $instance['attribute'] : '';
        ?>
        <p><label for="<?php echo $this->get_field_id('attribute'); ?>">Атрибут (slug):</label>
        <input class="widefat" id="<?php echo $this->get_field_id('attribute'); ?>" name="<?php echo $this->get_field_name('attribute'); ?>" type="text" value="<?php echo esc_attr($attribute); ?>" /></p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['attribute'] = (!empty($new_instance['attribute'])) ? sanitize_text_field($new_instance['attribute']) : '';
        return $instance;
    }
}

function wpfinder_register_wc_attr_filter_widget() {
    register_widget('Wpfinder_WC_Attribute_Filter_Widget');
}
add_action('widgets_init', 'wpfinder_register_wc_attr_filter_widget');

Этот простой виджет выводит список терминов заданного атрибута с ссылками на архив товаров с применённым фильтром. Пользователь вводит slug атрибута в настройках виджета.

Как связать фильтры с SEO и ускорить загрузку сайта

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

• Используйте AJAX для загрузки товаров по фильтрам без перезагрузки страницы;
• Настройте правильные canonical URL для страниц с фильтрами, чтобы избежать дублирования;
• Применяйте кеширование страниц и объектов с помощью плагинов, например, Clearfy Pro;
• Минимизируйте количество запросов к базе данных при выборке товаров;
• Оптимизируйте индексацию фильтрованных страниц через robots.txt или метатеги.

Такой подход позволит сохранить SEO-потенциал сайта и обеспечить комфорт пользователей.

Заключение по созданию автоматической фильтрации товаров WooCommerce

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

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