Фильтр товара в WooCommerce

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

1. Стандартные функции фильтрации WooCommerce

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

Виджеты для стандартной фильтрации:

1. Перейдите в Внешний вид > Виджеты.
2. Найдите и добавьте виджеты WooCommerce в нужную область виджетов (например, боковую панель):
   • Фильтр по цене: Показывает ползунок для фильтрации товаров по цене.
   • Категории товаров: Показывает список категорий товаров, по которым можно фильтровать.
   • Товары по меткам: Фильтр по тегам товаров.

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

2. Добавление фильтров по атрибутам

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

Шаги для настройки фильтров по атрибутам:

1. Создание атрибутов:
   • Перейдите в Товары > Атрибуты.
   • Создайте атрибуты (например, "Цвет", "Размер").
   • Добавьте термины для каждого атрибута (например, для "Цвет" добавьте термины "Красный", "Синий", "Зелёный").
2. Присвоение атрибутов товарам:
   • Откройте карточку товара и перейдите на вкладку Атрибуты.
   • Добавьте созданные атрибуты (например, цвет и размер) для каждого товара.
3. Добавление фильтра по атрибутам:
   • Перейдите в Внешний вид > Виджеты.
   • Добавьте виджет Фильтр товаров по атрибутам в нужную область виджетов.
   • В настройках виджета выберите нужный атрибут (например, "Цвет" или "Размер").

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

3. Расширенные фильтры с помощью плагинов

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

4. Пример кастомизации фильтров с помощью кода

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

add_action( 'woocommerce_product_query', 'custom_filter_by_stock_status' );
function custom_filter_by_stock_status( $query ) {
    if ( isset( $_GET['in_stock'] ) && $_GET['in_stock'] == '1' ) {
        $query->set( 'meta_query', array(
            array(
                'key' => '_stock_status',
                'value' => 'instock',
                'compare' => '='
            )
        ));
    }
}

add_action( 'woocommerce_before_shop_loop', 'add_custom_stock_filter' );
function add_custom_stock_filter() {
    echo '<form method="GET">';
    echo '<label><input type="checkbox" name="in_stock" value="1" /> Показать только товары в наличии</label>';
    echo '<button type="submit">Применить фильтр</button>';
    echo '</form>';
}

5. Настройка стилей для фильтров

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

Пример CSS для фильтров:

.woocommerce-widget-layered-nav-list {
    list-style: none;
    padding: 0;
}

.woocommerce-widget-layered-nav-list li {
    margin-bottom: 10px;
}

.woocommerce-widget-layered-nav-list label {
    font-weight: bold;
    color: #333;
}

.woocommerce-widget-layered-nav-list input[type="checkbox"] {
    margin-right: 10px;
}

.woocommerce-widget-layered-nav .button {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
}

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

Заключение

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