Как добавить динамический вывод атрибутов продуктов WooCommerce в тему WordPress

Если вы создаёте или кастомизируете тему WordPress для интернет-магазина на базе WooCommerce, очень часто возникает задача — вывести атрибуты продуктов (цвет, размер, материал и т.д.) динамически, чтобы они автоматически подтягивались из настроек товара. В этой статье разберём, как правильно и эффективно вывести эти атрибуты в шаблоне темы, используя встроенные функции WooCommerce и собственные функции с префиксом wp_theme.

Что такое атрибуты продуктов в WooCommerce и зачем их выводить

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

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

Как получить атрибуты продукта из объекта WC_Product

Для работы с атрибутами нам понадобится объект товара WC_Product. Его можно получить разными способами, например:

• Внутри цикла while ( have_posts() ) : the_post(); — через $product = wc_get_product(get_the_ID());
• Если у вас есть ID продукта — также через wc_get_product($product_id);

После получения объекта доступна функция get_attributes(), которая возвращает массив экземпляров класса WC_Product_Attribute. Далее можно обходить их и выводить значения.

Пример функции вывода атрибутов с префиксом wp_theme

function wp_theme_get_product_attributes_html($product_id) {
    $product = wc_get_product($product_id);
    if (!$product) return '';

    $attributes = $product->get_attributes();
    if (empty($attributes)) return '';

    $output = '<ul class="wp-theme-product-attributes">';

    foreach ($attributes as $attribute) {
        if ($attribute->get_variation()) continue; // пропускаем вариации

        $name = wc_attribute_label($attribute->get_name());

        if ($attribute->is_taxonomy()) {
            $terms = wc_get_product_terms($product->get_id(), $attribute->get_name(), array('fields' => 'names'));
            $value = implode(', ', $terms);
        } else {
            $value = $attribute->get_options();
            $value = is_array($value) ? implode(', ', $value) : $value;
        }

        $output .= '<li><strong>' . esc_html($name) . ':</strong> ' . esc_html($value) . '</li>';
    }

    $output .= '</ul>';

    return $output;
}

Эта функция возвращает HTML-список с названиями атрибутов и их значениями, пропуская вариационные атрибуты, чтобы не дублировать информацию.

Встраиваем динамический вывод атрибутов в шаблон темы

Допустим, вы хотите вывести атрибуты в карточке товара на странице каталога. В файле шаблона content-product.php добавьте вызов нашей функции:

echo wp_theme_get_product_attributes_html(get_the_ID());

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

Дополнительные советы для удобного вывода атрибутов

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

Чтобы атрибуты выглядели аккуратно, добавьте CSS классы в список и элементы:

.wp-theme-product-attributes {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #333;
}

.wp-theme-product-attributes li {
    margin-bottom: 4px;
}

Вы также можете использовать темы из WPSHOP — например, Reboot или Root — которые уже имеют удобные стили для каталога.

Вывод атрибутов с фильтрацией и форматированием

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

function wp_theme_get_filtered_product_attributes_html($product_id, $allowed_attributes = array()) {
    $product = wc_get_product($product_id);
    if (!$product) return '';

    $attributes = $product->get_attributes();
    if (empty($attributes)) return '';

    $output = '<ul class="wp-theme-product-attributes">';

    foreach ($attributes as $attribute) {
        $attr_name = $attribute->get_name();
        if (!empty($allowed_attributes) && !in_array($attr_name, $allowed_attributes)) continue;
        if ($attribute->get_variation()) continue;

        $name = wc_attribute_label($attr_name);

        if ($attribute->is_taxonomy()) {
            $terms = wc_get_product_terms($product->get_id(), $attr_name, array('fields' => 'names'));
            $value = implode(', ', $terms);
        } else {
            $value = $attribute->get_options();
            $value = is_array($value) ? implode(', ', $value) : $value;
        }

        $output .= '<li><strong>' . esc_html($name) . ':</strong> ' . esc_html($value) . '</li>';
    }

    $output .= '</ul>';

    return $output;
}

Так можно вывести, например, только цвет и размер:

echo wp_theme_get_filtered_product_attributes_html(get_the_ID(), array('pa_color', 'pa_size'));

Решение частых проблем с выводом атрибутов в теме

Пропадают значения атрибутов после обновления темы

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

Отсутствие стилей для атрибутов

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

Проблемы с кэшированием

При использовании кэширующих плагинов или CDN атрибуты могут не обновляться мгновенно. В этом случае можно добавить параметры очистки кэша при обновлении товара либо настроить исключения для страниц с товарами.