О чём статья
VPWC Attribute Display Settings — это плагин для WordPress, который даёт полный контроль над отображением атрибутов товаров WooCommerce. Вместо того чтобы править код темы или использовать сложные решения, можно настроить всё через админ-панель: какие атрибуты показывать, сколько их выводить, в каком порядке, с какими лейблами и единицами измерения.
Цель статьи: разобрать функциональность плагина, показать примеры использования и объяснить, как интегрировать его в свою тему.
Репозиторий проекта: GitHub - va-proger/wordpress-woocommerce-attributs
Проблема, которую решает плагин
По умолчанию WooCommerce выводит атрибуты товаров на детальной странице, но:
- ❌ Нет контроля над количеством атрибутов на листинге
- ❌ Нет выбора, какие атрибуты показывать
- ❌ Нет управления порядком вывода
- ❌ Нет возможности добавить единицы измерения (кг, см, м²)
- ❌ Нет кастомных лейблов
- ❌ Нет удобных фильтров по атрибутам
Плагин решает все эти задачи через простой интерфейс в админ-панели.
Установка и активация
Требования
- WordPress 5.0+
- WooCommerce (обязательно)
- PHP 7.4+
Установка
- Скопируйте папку плагина в wp-content/plugins/
- Перейдите в Плагины → Установленные плагины
- Найдите "VPWC Attribute Display Settings"
- Нажмите Активировать
Плагин автоматически проверит наличие WooCommerce. Если WooCommerce не установлен, появится уведомление.
Первая настройка
После активации перейдите в WooCommerce → Атрибуты: вывод. Здесь можно настроить:
- Лимиты атрибутов для листинга и детальной страницы
- Выбор атрибутов для отображения
- Порядок сортировки
- Кастомные лейблы и единицы измерения
Основные возможности
- Управление выводом атрибутов
Лимиты атрибутов
Установите максимальное количество атрибутов:
- Лимит для листинга — сколько атрибутов показывать на странице каталога (например, 3)
- Лимит для детальной страницы — сколько атрибутов показывать на странице товара (например, 5)
Выбор атрибутов
Отметьте галочками, какие атрибуты использовать:
- ✅ Для листинга (страница каталога)
- ✅ Для детальной страницы
- ✅ Для фильтров
Порядок сортировки
Установите число для каждого атрибута (меньше = выше в списке):
Цвет: 1
Размер: 2
Материал: 3
Атрибуты будут отсортированы по возрастанию.
- Кастомные настройки
Кастомные лейблы
Вместо стандартного названия атрибута можно задать своё:
- Стандартное: "Цвет"
- Кастомное: "Цвет товара"
Единицы измерения
Добавьте единицы к значениям атрибутов:
- Вес: "кг"
- Размер: "см"
- Площадь: "м²"
- Автоматический вывод
Плагин автоматически выводит атрибуты через хуки WooCommerce:
- Листинг: woocommerce_after_shop_loop_item_title (приоритет 15)
- Детальная страница: woocommerce_single_product_summary (приоритет 25)
Никаких правок в теме не требуется — всё работает "из коробки".
- Фильтры по атрибутам
Используйте шорткод для вывода фильтров:
[vpwc\_attribute\_filters]
Шорткод можно разместить в сайдбаре, на странице каталога или в любом месте через виджет.
Программный API
Плагин предоставляет функции для программного доступа к данным.
vpwc_attr_pick($mode, $limit, $product_id = null)
Получить список атрибутов для отображения.
Параметры:
- $mode (string) — Режим: 'loop', 'single' или 'filter'
- $limit (int) — Максимальное количество атрибутов
- $product_id (int|null) — ID товара (опционально, для учёта исключений товара)
Возвращает: Массив атрибутов с настройками
Пример:
$limits = vpwc\_attr\_limits\_get();
$attrs = vpwc\_attr\_pick('loop', $limits['loop\_limit']);
// Вернёт массив вида:
// [
// ['tax' => 'pa\_color', 'order' => 1, 'custom\_label' => 'Цвет', 'unit' => ''],
// ['tax' => 'pa\_size', 'order' => 2, 'custom\_label' => 'Размер', 'unit' => 'см'],
// ]
vpwc_attr_term_names($product_id, $taxonomy)
Получить значения атрибута для товара.
Параметры:
- $product_id (int) — ID товара
- $taxonomy (string) — Название таксономии (например, 'pa_color')
Возвращает: Массив названий терминов
Пример:
global $product;
$product\_id = $product->get\_id();
$values = vpwc\_attr\_term\_names($product\_id, 'pa\_color');
// Вернёт: ['Красный', 'Синий']
vpwc_attr_label($taxonomy, $custom_label = '')
Получить лейбл атрибута.
Параметры:
- $taxonomy (string) — Название таксономии
- $custom_label (string) — Кастомный лейбл (опционально)
Возвращает: Строка с лейблом
Пример:
$label = vpwc\_attr\_label('pa\_color', 'Цвет товара');
// Вернёт: 'Цвет товара' или стандартное название атрибута
vpwc_attr_limits_get()
Получить настройки лимитов.
Возвращает: Массив с ключами 'loop_limit' и 'single_limit'
Пример:
$limits = vpwc\_attr\_limits\_get();
// Вернёт: ['loop\_limit' => 3, 'single\_limit' => 5]
Примеры использования в теме
Вывод атрибутов на листинге
Если нужно кастомизировать вывод на листинге:
// В functions.php или в файле темы
add\_action('woocommerce\_after\_shop\_loop\_item\_title', 'my\_custom\_loop\_attributes', 20);
function my\_custom\_loop\_attributes() {
global $product;
if (!function\_exists('vpwc\_attr\_pick')) {
return;
}
$limits = vpwc\_attr\_limits\_get();
$attrs = vpwc\_attr\_pick('loop', $limits['loop\_limit'], $product->get\_id());
if (empty($attrs)) {
return;
}
echo '<div class="product-attributes-loop">';
foreach ($attrs as $a) {
$names = vpwc\_attr\_term\_names($product->get\_id(), $a['tax']);
if ($names) {
$label = vpwc\_attr\_label($a['tax'], $a['custom\_label']);
$val = implode(', ', $names);
if (!empty($a['unit'])) {
$val .= ' ' . $a['unit'];
}
echo '<div class="attr-item">';
echo '<strong>' . esc\_html($label) . ':</strong> ';
echo '<span>' . esc\_html($val) . '</span>';
echo '</div>';
}
}
echo '</div>';
}
Вывод атрибутов на детальной странице
Для кастомизации вывода на странице товара:
add\_action('woocommerce\_single\_product\_summary', 'my\_custom\_single\_attributes', 25);
function my\_custom\_single\_attributes() {
global $product;
if (!function\_exists('vpwc\_attr\_pick')) {
return;
}
$limits = vpwc\_attr\_limits\_get();
$attrs = vpwc\_attr\_pick('single', $limits['single\_limit'], $product->get\_id());
if (empty($attrs)) {
return;
}
echo '<div class="product-attributes-single">';
echo '<h3>Характеристики</h3>';
foreach ($attrs as $a) {
$names = vpwc\_attr\_term\_names($product->get\_id(), $a['tax']);
if ($names) {
$label = vpwc\_attr\_label($a['tax'], $a['custom\_label']);
$val = implode(', ', $names);
if (!empty($a['unit'])) {
$val .= ' ' . $a['unit'];
}
echo '<div class="attr-item">';
echo '<span class="attr-label">' . esc\_html($label) . ':</span> ';
echo '<span class="attr-value">' . esc\_html($val) . '</span>';
echo '</div>';
}
}
echo '</div>';
}
Отключение стандартного вывода
Если нужно полностью кастомизировать вывод, можно отключить стандартные хуки:
// Отключить стандартный вывод
remove\_action('woocommerce\_after\_shop\_loop\_item\_title', 'vpwc\_attr\_render\_loop', 15);
remove\_action('woocommerce\_single\_product\_summary', 'vpwc\_attr\_render\_single', 25);
// Добавить свой вывод в нужном месте
add\_action('woocommerce\_shop\_loop\_item\_title', 'my\_custom\_attr\_display', 20);
function my\_custom\_attr\_display() {
// Ваш код вывода
}
Фильтры для кастомизации
Плагин предоставляет фильтры для изменения вывода.
vpwc_attributes_loop_output
Фильтр для изменения вывода атрибутов на листинге:
add\_filter('vpwc\_attributes\_loop\_output', function($output, $attrs, $product) {
// Кастомный вывод
return '<div class="my-custom-attributes">' . $output . '</div>';
}, 10, 3);
vpwc_attributes_single_output
Фильтр для изменения вывода атрибутов на детальной странице:
add\_filter('vpwc\_attributes\_single\_output', function($output, $attrs, $product) {
// Кастомный вывод
return '<div class="my-custom-attributes">' . $output . '</div>';
}, 10, 3);
vpwc_attributes_limit
Фильтр для изменения лимита атрибутов:
add\_filter('vpwc\_attributes\_limit', function($limit, $mode) {
if ($mode === 'loop') {
return 5; // Показывать 5 атрибутов на листинге
}
return $limit;
}, 10, 2);
Стилизация
Плагин использует следующие CSS классы:
Для листинга
.vpwc-attrs--loop {
margin: 10px 0;
font-size: 14px;
}
.vpwc-attrs--loop .vpwc-attr {
margin: 5px 0;
display: flex;
align-items: center;
}
.vpwc-attrs--loop .vpwc-attr-label {
font-weight: 600;
margin-right: 5px;
}
.vpwc-attrs--loop .vpwc-attr-value {
color: #666;
}
Для детальной страницы
.vpwc-attrs--single {
margin: 20px 0;
padding: 15px;
background: #f9f9f9;
border-radius: 4px;
}
.vpwc-attrs--single .vpwc-attr {
margin: 8px 0;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
}
.vpwc-attrs--single .vpwc-attr:last-child {
border-bottom: none;
}
Для фильтров
.vpwc-filters {
margin: 20px 0;
}
.vpwc-filter {
margin-bottom: 15px;
}
.vpwc-filter-label {
font-weight: 600;
margin-bottom: 5px;
display: block;
}
Структура плагина
woocomerce-attribute/
├── vpwc-attributes-display.php # Главный файл плагина
├── includes/ # Основные классы
│ ├── class-vpwc-attributes.php # Главный класс
│ └── class-vpwc-attributes-settings.php # Функции настроек
├── admin/ # Админ-панель
│ └── class-vpwc-attributes-admin.php # Интерфейс админки
├── public/ # Фронтенд
│ └── class-vpwc-attributes-public.php # Вывод атрибутов
└── languages/ # Переводы
└── vpwc-attributes-ru\_RU.po
Безопасность
Плагин следует стандартам безопасности WordPress:
- ✅ Проверка прав доступа через current_user_can()
- ✅ Проверка nonce для всех форм
- ✅ Санитизация данных через sanitize_text_field(), sanitize_textarea_field()
- ✅ Экранирование вывода через esc_html(), esc_attr(), esc_url()
- ✅ Валидация данных
- ✅ Защита от SQL Injection через $wpdb->prepare()
Совместимость
Плагин протестирован с:
- WordPress: 5.0, 5.5, 5.9, 6.0, 6.1, 6.2, 6.3, 6.4
- PHP: 7.4, 8.0, 8.1, 8.2, 8.3, 8.4
- WooCommerce: 5.0+, 6.0+, 7.0+, 8.0+
Код соответствует WordPress Coding Standards (WPCS) и совместим с PHP 8.2+.
Итоги
VPWC Attribute Display Settings — это простой и гибкий плагин для управления выводом атрибутов WooCommerce. Он решает типичные задачи:
- ✅ Контроль количества атрибутов
- ✅ Выбор атрибутов для разных страниц
- ✅ Управление порядком вывода
- ✅ Кастомные лейблы и единицы измерения
- ✅ Фильтры по атрибутам
- ✅ Программный API для интеграции
Всё настраивается через админ-панель, без правок кода темы. Если нужна кастомизация — есть фильтры и функции для программного доступа.
Примечание: Плагин требует установленного и активированного WooCommerce для работы.
Top comments (0)