Атрибуты WooCommerce в каталоге: полное руководство по настройке и использованию

WooCommerce атрибуты в каталоге

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

1. Вывод атрибутов на страницах каталога

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

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

Откройте файл functions.php вашей темы.
Добавьте следующий код для отображения атрибутов в каталоге:

// Выводим атрибуты на страницах каталога
add_action( 'woocommerce_after_shop_loop_item_title', 'display_product_attributes_in_catalog', 15 );

function display_product_attributes_in_catalog() {
    global $product;
    
    // Получаем атрибуты товара
    $attributes = $product->get_attributes();
    
    if ( ! empty( $attributes ) ) {
        echo '<ul class="product-attributes">';
        
        foreach ( $attributes as $attribute ) {
            $name = wc_attribute_label( $attribute->get_name() ); // Название атрибута
            $value = implode( ', ', wc_get_product_terms( $product->get_id(), $attribute->get_name(), array( 'fields' => 'names' ) ); // Значения атрибута
            
            echo '<li><strong>' . esc_html( $name ) . ':</strong> ' . esc_html( $value ) . '</li>';
        }
        
        echo '</ul>';
    }
}

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

Стилизация вывода атрибутов:

Для того чтобы стилизовать список атрибутов, вы можете добавить следующий CSS в раздел Внешний вид > Настроить > Дополнительные стили CSS:

/* Стилизация списка атрибутов в каталоге */
.product-attributes {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.product-attributes li {
    font-size: 14px;
    color: #333;
}

Этот код сделает список атрибутов более читабельным и приятным на вид.

2. Фильтрация товаров по атрибутам

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

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

Перейдите в Товары > Атрибуты.
Создайте атрибуты, такие как "Цвет", "Размер" и другие, если они ещё не созданы.
Перейдите в Внешний вид > Виджеты.
Найдите виджет Фильтр товаров по атрибутам (Product Filter by Attribute).
Добавьте виджет в нужную область (например, боковую панель или фильтры над товарами).
Выберите атрибут, по которому будет происходить фильтрация (например, "Цвет").
Настройте дополнительные параметры фильтра (показывать ли пустые термины, тип отображения фильтра).

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

3. Отображение атрибутов в виде меток на страницах каталога

Вы также можете использовать атрибуты в качестве меток (бейджей) на товарах, чтобы выделять определённые характеристики товара прямо на странице каталога (например, "100% хлопок", "Экологически чистый продукт").

Пример кода для отображения атрибутов в виде меток:

Добавьте следующий код в файл functions.php вашей темы:

// Отображение атрибутов в виде меток на страницах каталога
add_action( 'woocommerce_before_shop_loop_item_title', 'display_attribute_labels_in_catalog', 10 );

function display_attribute_labels_in_catalog() {
    global $product;
    
    // Получаем атрибуты товара
    $attributes = $product->get_attributes();
    
    if ( ! empty( $attributes ) ) {
        foreach ( $attributes as $attribute ) {
            $values = wc_get_product_terms( $product->get_id(), $attribute->get_name(), array( 'fields' => 'names' ) );
            
            foreach ( $values as $value ) {
                echo '<span class="attribute-label">' . esc_html( $value ) . '</span>';
            }
        }
    }
}

Стилизация меток атрибутов:

Добавьте следующий CSS для стилизации меток атрибутов:

/* Стилизация меток атрибутов на страницах каталога */
.attribute-label {
    display: inline-block;
    background-color: #f7f7f7;
    color: #333;
    padding: 5px 10px;
    font-size: 12px;
    margin: 5px;
    border-radius: 3px;
    text-transform: uppercase;
}

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

4. Использование атрибутов для создания вариативных товаров

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

Шаги для создания вариативных товаров с атрибутами:

Перейдите в Товары > Все товары и выберите товар для редактирования или добавьте новый товар.
В разделе Данные товара выберите Вариативный товар.
Перейдите на вкладку Атрибуты.
Добавьте нужные атрибуты (например, цвет, размер), отметив флажок Использовать для вариаций.
Сохраните атрибуты.
Перейдите на вкладку Вариации и создайте вариации на основе атрибутов.

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

5. Использование плагинов для работы с атрибутами в каталоге

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

WooCommerce атрибуты в каталоге