В WooCommerce часто нужно не «добавить ещё один блок», а аккуратно показать свойства товара там, где они реально помогают продаже: в каталоге, в карточке товара, рядом с ценой или под кратким описанием. Типичный пример — размер, материал, цвет, совместимость, объём, срок службы. Если делать это через плагин на каждый случай, разметка быстро расползается, а стили приходится чинить вручную.
Ниже — рабочая схема без выдуманных хуков и без лишней магии: сначала разберём, где именно брать данные, затем выведем их в каталоге и на странице товара, а после проверим, что всё работает и не ломает вариативные товары.
Когда свойство товара не видно: что именно проверять
Перед кодом стоит понять, почему атрибут не отображается. В WooCommerce «свойства» могут быть разными по природе: глобальные атрибуты товара, произвольные атрибуты, таксономии, кастомные поля. Если выбрать не тот источник, код будет работать, но показывать пустоту.
Диагностика проблемы
- Откройте товар в админке и проверьте вкладку Атрибуты.
- Убедитесь, что атрибут добавлен именно к товару, а не только создан глобально в WooCommerce.
- Проверьте, включён ли флажок Видимый на странице товара.
- Для вариативных товаров убедитесь, что атрибут используется для вариаций, если вы ожидаете вывод значений по вариациям.
- Если используете кастомное поле, проверьте его ключ в базе или через метабокс плагина/темы.
Частая ошибка — пытаться вывести атрибут через get_post_meta(), когда он хранится как атрибут WooCommerce. Для стандартных атрибутов лучше использовать объект товара и его методы.
Как вывести свойства товара в карточке товара
Самый надёжный вариант — подключиться к хуку woocommerce_single_product_summary или к одному из соседних хуков, если нужно поставить блок выше или ниже краткого описания. Для примера выведем несколько атрибутов после краткого описания.
add_action( 'woocommerce_single_product_summary', 'wpd_show_product_attributes', 25 );
function wpd_show_product_attributes() {
global $product;
if ( ! $product instanceof WC_Product ) {
return;
}
$attributes = array( 'pa_material', 'pa_color', 'pa_size' );
$output = array();
foreach ( $attributes as $attribute_name ) {
$value = $product->get_attribute( $attribute_name );
if ( ! empty( $value ) ) {
$label = wc_attribute_label( $attribute_name );
$output[] = '<li><strong>' . esc_html( $label ) . ':</strong> ' . esc_html( $value ) . '</li>';
}
}
if ( empty( $output ) ) {
return;
}
echo '<div class="product-attributes-summary">';
echo '<ul class="product-attributes-summary__list">' . implode( '', $output ) . '</ul>';
echo '</div>';
}Здесь важно два момента. Первый: get_attribute() принимает имя атрибута в формате таксономии, например pa_material. Второй: если атрибут не глобальный, а произвольный, имя может отличаться. В таком случае сначала проверьте, что именно хранится в товаре.
Если нужен вывод только для отдельных товаров
Не всегда стоит показывать свойства всем товарам подряд. Например, для одежды полезны размер и материал, а для цифрового товара — формат файла или лицензия. В этом случае добавьте условие по категории или по ID товара.
add_action( 'woocommerce_single_product_summary', 'wpd_show_attributes_for_selected_products', 25 );
function wpd_show_attributes_for_selected_products() {
global $product;
if ( ! $product instanceof WC_Product ) {
return;
}
if ( ! has_term( 'odezhda', 'product_cat', $product->get_id() ) ) {
return;
}
$material = $product->get_attribute( 'pa_material' );
if ( $material ) {
echo '<p class="product-material"><strong>' . esc_html__( 'Материал', 'textdomain' ) . ':</strong> ' . esc_html( $material ) . '</p>';
}
}Как показать свойства в каталоге товаров
В каталоге задача другая: здесь нельзя перегружать карточку. Обычно достаточно одного-двух ключевых параметров. Для этого удобно использовать хук woocommerce_after_shop_loop_item_title — он срабатывает в списке товаров после названия и рейтинга.
add_action( 'woocommerce_after_shop_loop_item_title', 'wpd_show_attributes_in_catalog', 15 );
function wpd_show_attributes_in_catalog() {
global $product;
if ( ! $product instanceof WC_Product ) {
return;
}
$material = $product->get_attribute( 'pa_material' );
$size = $product->get_attribute( 'pa_size' );
if ( ! $material && ! $size ) {
return;
}
echo '<div class="catalog-product-meta">';
if ( $material ) {
echo '<span class="catalog-product-meta__item">' . esc_html__( 'Материал:', 'textdomain' ) . ' ' . esc_html( $material ) . '</span>';
}
if ( $size ) {
echo '<span class="catalog-product-meta__item">' . esc_html__( 'Размер:', 'textdomain' ) . ' ' . esc_html( $size ) . '</span>';
}
echo '</div>';
}Если в каталоге уже есть цена, рейтинг и кнопка, не ставьте сюда длинный список атрибутов. Лучше оставить один компактный блок. Иначе карточка станет визуально тяжелее, особенно на мобильных.
Сравнение подходов: плагин, код или шаблон
Если задача разовая, код обычно проще и чище. Если же контент-менеджеры должны сами управлять выводом без участия разработчика, иногда удобнее плагин или настройка темы. Ниже — короткое сравнение.
| Подход | Когда подходит | Минус |
|---|---|---|
| Код через хуки | Нужно вывести 1–3 свойства в каталоге и карточке | Требует аккуратного размещения в теме или мини-плагине |
| Плагин для кастомных полей | Свойств много, нужна админская форма и гибкая логика | Лишняя нагрузка и риск конфликтов со стилями |
| Правка шаблона | Нужен полный контроль над версткой | Сложнее обновлять тему без потери изменений |
Если вы уже используете плагин для чистки и оптимизации сайта, например Clearfy Pro, часть мелких задач по WooCommerce можно держать в коде, а не плодить отдельные расширения. Но сам вывод свойств лучше не завязывать на лишние зависимости, если это не требуется бизнес-логикой.
Проверка результата после внедрения
После добавления кода не ограничивайтесь визуальной проверкой на одной карточке. В WooCommerce легко пропустить проблему на вариативном товаре или в категории с другим шаблоном.
- Откройте обычный товар и проверьте вывод в карточке.
- Откройте вариативный товар и переключите варианты, чтобы убедиться, что блок не дублируется и не ломает форму.
- Проверьте категорию товаров в каталоге на desktop и mobile.
- Убедитесь, что пустые атрибуты не выводятся.
- Проверьте HTML в инспекторе: блок должен быть внутри ожидаемого контейнера и не нарушать сетку.
Если блок не отображается, временно добавьте отладочный вывод через error_log() или проверьте, вызывается ли хук в вашей теме. Иногда тема переопределяет шаблоны WooCommerce и меняет порядок элементов.
Частые ошибки и как их исправить
Атрибут создан, но значение пустое
Обычно это означает, что вы смотрите на глобальный атрибут, но не заполнили его у конкретного товара. Проверьте вкладку Атрибуты в карточке товара и сохраните изменения.
Выводится не то значение, которое ожидали
Для таксономий WooCommerce может возвращать список терминов через запятую. Если нужен только один термин, придётся отдельно обработать массив терминов, а не использовать get_attribute() в лоб.
Блок появляется дважды
Это бывает, если код вставили и в дочернюю тему, и в мини-плагин, или если тема уже выводит похожий блок. Проверьте все места подключения и удалите дублирующий хук.
Сломалась вёрстка каталога
Причина обычно в слишком длинном тексте или в отсутствии ограничений по количеству строк. Для каталога оставляйте короткие значения и добавляйте CSS-ограничение, если это нужно.
.catalog-product-meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
font-size: 14px;
line-height: 1.4;
margin-top: 8px;
}
.catalog-product-meta__item {
color: #555;
}Безопасность и производительность: что не стоит делать
Не вставляйте код прямо в файл темы, если тема часто обновляется. Для таких задач лучше использовать дочернюю тему или небольшой mu-plugin. Так вы не потеряете изменения после обновления.
Также не выводите сырые значения из метаполей без экранирования. В примерах выше используются esc_html() и esc_html__(), и это не формальность: в WooCommerce данные могут редактировать разные пользователи, а значит, экранирование нужно всегда.
Если свойств много и они часто меняются, подумайте о структуре данных заранее. Иногда лучше хранить их как атрибуты товара, а не как набор разрозненных полей. Тогда фильтрация, сортировка и вывод в шаблонах становятся предсказуемее.
Когда код лучше не усложнять
Если задача сводится к одному-двум полям и понятному месту вывода, код через хуки — самый прямой путь. Если же нужно дать редактору интерфейс для настройки блоков, условий показа и дизайна без разработчика, тогда уже имеет смысл смотреть в сторону специализированных решений. Но саму логику вывода свойств товара лучше держать простой: чем меньше уровней абстракции, тем легче сопровождать WooCommerce после обновлений.