В WooCommerce атрибуты товара играют важную роль для описания характеристик продукта и улучшения фильтрации в каталоге. В этой статье мы подробно разберём, как создать динамический вывод атрибутов товара на странице отдельного товара, используя PHP-код, а также рассмотрим примеры плагинов, которые могут облегчить эту задачу.
Что такое атрибуты товара в WooCommerce и зачем нужен их динамический вывод
Атрибуты — это свойства товара, которые могут быть заданы глобально или индивидуально для конкретного продукта. Например, цвет, размер, материал и так далее. По умолчанию WooCommerce выводит атрибуты в табах или в описании, но часто требуется вывести их в произвольном месте или в отдельном, кастомном формате.
Динамический вывод атрибутов позволяет гибко контролировать отображение — например, показывать атрибуты только с определёнными значениями, формировать списки для дальнейшей фильтрации, добавлять стили и иконки. Всё это улучшает пользовательский опыт и повышает конверсию.
Рассмотрим, как получить атрибуты из объекта товара и вывести их в удобном формате с помощью кода.
Получение и вывод атрибутов товара через PHP
В основе лежит объект WC_Product, из которого можно получить массив атрибутов. Ниже приведён пример функции, которая выводит все атрибуты текущего товара в виде списка:
function wpmoney_get_product_attributes_list() {
global $product;
if ( ! $product ) return;
$attributes = $product->get_attributes();
if ( empty( $attributes ) ) {
echo '<p>Атрибуты отсутствуют.</p>';
return;
}
echo '<ul class="wpmoney-product-attributes">';
foreach ( $attributes as $attribute ) {
if ( $attribute->is_taxonomy() ) {
$terms = wc_get_product_terms( $product->get_id(), $attribute->get_name(), array( 'fields' => 'names' ) );
$value = implode( ', ', $terms );
$label = wc_attribute_label( $attribute->get_name() );
} else {
$value = $attribute->get_options();
$label = $attribute->get_name();
$value = implode( ', ', $value );
}
echo '<li><strong>' . esc_html( $label ) . ':</strong> ' . esc_html( $value ) . '</li>';
}
echo '</ul>';
}
// Выводим атрибуты в нужном месте шаблона
wpmoney_get_product_attributes_list();
В этом примере мы проверяем, является ли атрибут таксономией, и в зависимости от этого получаем значения. Такой подход универсален и подходит для любых атрибутов.
Вывод атрибутов с дополнительной проверкой и форматированием
Иногда нужно выводить только определённые атрибуты, например, только цвет и размер. Для этого можно добавить фильтр по имени атрибута:
function wpmoney_get_filtered_product_attributes( $allowed = array() ) {
global $product;
if ( ! $product ) return;
$attributes = $product->get_attributes();
if ( empty( $attributes ) ) return;
echo '<ul class="wpmoney-product-attributes-filtered">';
foreach ( $attributes as $attribute ) {
$label = wc_attribute_label( $attribute->get_name() );
if ( ! in_array( $label, $allowed ) ) continue;
if ( $attribute->is_taxonomy() ) {
$terms = wc_get_product_terms( $product->get_id(), $attribute->get_name(), array( 'fields' => 'names' ) );
$value = implode( ', ', $terms );
} else {
$value = implode( ', ', $attribute->get_options() );
}
echo '<li><strong>' . esc_html( $label ) . ':</strong> ' . esc_html( $value ) . '</li>';
}
echo '</ul>';
}
// Например, выводим только Цвет и Размер
wpmoney_get_filtered_product_attributes( array( 'Цвет', 'Размер' ) );
Такой способ позволяет гибко управлять выводом и не засорять страницу лишней информацией.
Примеры плагинов для расширенного управления атрибутами WooCommerce
Если хочется упростить работу и получить дополнительные возможности без написания кода, можно использовать плагины. Например:
- Clearfy Pro — плагин для оптимизации и кастомизации WooCommerce, в том числе управления атрибутами и фильтрами.
- WPRemark — расширенный отзывной плагин, который также может отображать дополнительные данные товара, включая атрибуты.
- Тема Bono — современная WooCommerce-тема с удобным выводом характеристик товара и возможностью кастомизации.
Используя эти инструменты, можно значительно ускорить разработку и получить готовые решения с гибкими настройками.
Как добавить динамический вывод атрибутов в шаблон WooCommerce
Чтобы вывести атрибуты в нужном месте страницы товара, можно воспользоваться хуками WooCommerce. Например, добавим вывод после краткого описания товара:
add_action( 'woocommerce_single_product_summary', 'wpmoney_output_attributes_after_excerpt', 21 );
function wpmoney_output_attributes_after_excerpt() {
wpmoney_get_product_attributes_list();
}
В этом примере мы используем наш ранее созданный код вывода и прикрепляем его к хуку с приоритетом 21 (после стандартных элементов).
Если нужна более точная кастомизация, можно создавать дочерние темы и вставлять вызов функции напрямую в файлы шаблонов, например, в single-product.php или content-single-product.php.
Подведение итогов: преимущества динамического вывода атрибутов
Динамический вывод атрибутов товара в WooCommerce — это мощный инструмент для улучшения интерфейса магазина. Вы получаете:
- Гибкость вывода и контроль над отображаемыми данными.
- Возможность фильтрации и выбора атрибутов для показа.
- Улучшенный пользовательский опыт и повышение конверсии.
- Возможность интеграции с другими плагинами и темами.
Используйте представленные примеры кода и рекомендации, чтобы создавать удобные и информативные страницы товаров на своём сайте.