Pure Attributes

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

Pure Attributes for WooCommerce — это плагин для WordPress/WooCommerce, который расширяет стандартные атрибуты WooCommerce, добавляя поддержку кастомных типов атрибутов (свотчи) для вариативных товаров. Плагин заменяет стандартные выпадающие списки атрибутов на стилизованные цветные, текстовые и графические свотчи (swatches) как на странице товара, так и в списках товаров (архивах, категориях, шорткодах).

Версия: 1.0.0
Требования: WordPress 5.6+, WooCommerce 5.0+, PHP 7.4+

Структура файлов

pure-attributes/
├── pure-attributes.php                  # Главный файл плагина
├── uninstall.php                        # Файл деинсталляции
├── assets/
│   ├── css/
│   │   ├── pure-attributes-admin.css    # Стили админ-панели
│   │   └── pure-attributes-frontend.css # Фронтенд-стили (960 строк)
│   └── js/
│       ├── pure-attributes-admin.js     # JavaScript для админки (WP Color Picker, Media Library)
│       └── pure-attributes-frontend.js  # Фронтенд-логика (713 строк)
└── includes/
    ├── class-pure-attributes-admin.php   # Административный класс (синглтон)
    └── class-pure-attributes-frontend.php # Фронтенд-класс (синглтон)

Функции по файлам

`pure-attributes.php` — Главный файл

Назначение: Точка входа плагина. Определяет константы, проверяет наличие WooCommerce, инициализирует классы.

Функции:

pure_attr_is_wc_active() — проверяет активен ли WooCommerce
pure_attributes_init() — хук plugins_loaded, загружает классы и инстанциирует их
pure_attributes_missing_wc_notice() — выводит админ-нотис, если WooCommerce не найден

Константы:

PURE_ATTR_VERSION — версия плагина (1.0.0)
PURE_ATTR_PATH — путь к директории плагина
PURE_ATTR_URL — URL директории плагина

`class-pure-attributes-admin.php` — Админ-класс (601 строка)

Назначение: Управление типами атрибутов в админке, настройками плагина, обработка медиафайлов.

Реализует паттерн Singleton через get_instance().

Основные хуки и действия:

Хук	Callback	Назначение
`woocommerce_after_add_attribute_fields`	`add_attribute_type_field()`	Поле выбора типа атрибута при создании
`woocommerce_after_edit_attribute_fields`	`edit_attribute_type_field()`	Поле выбора типа атрибута при редактировании
`woocommerce_attribute_added`	`save_attribute_type()`	Сохранение типа атрибута
`woocommerce_attribute_updated`	`save_attribute_type()`	Обновление типа атрибута
`woocommerce_attribute_deleted`	`delete_attribute_type()`	Удаление типа атрибута
`admin_init`	`register_taxonomy_hooks()`	Динамическая регистрация хуков для термов таксономий
`admin_enqueue_scripts`	`enqueue_admin_assets()`	Подключение скриптов и стилей в админке
`admin_menu`	`add_settings_menu()`	Добавление страницы настроек

Типы атрибутов:

Default Dropdown (select) — стандартный выпадающий список
Text Swatch (text) — текстовые свотчи
Color Swatch (color) — цветовые кружки с Color Picker
Image Swatch (image) — изображения через Media Library

Типы данных для термов:

Для color — meta-ключ pure_attr_color
Для image — meta-ключ pure_attr_image

Настройки плагина (страница WooCommerce → Pure Plugins → Attributes):

Опция	Тип	Дефолт	Назначение
`pure_attr_show_in_loop`	bool	0	Показывать свотчи в списках товаров
`pure_attr_hover_desktop`	bool	1	Показывать свотчи только при наведении (десктоп)
`pure_attr_hover_mobile`	bool	0	Показывать свотчи только при наведении (мобильные)
`pure_attr_loop_layout`	string	`under_card`	Макет отображения в списках
`pure_attr_mobile_disabled`	bool	0	Полное отключение на мобильных
`pure_attr_hide_qty_mobile`	bool	0	Скрыть выбор количества на мобильных
`pure_attr_mobile_hide_swatches`	bool	0	Скрыть свотчи на мобильных

Макеты (Layout):

under_card — всё под карточкой товара
image_overlay — свотчи накладываются на изображение (с блюром)
bottom_overlay — нижний трей на изображении

Совместимость: Есть миграция с устаревшей опции pure_attr_loop_hover_only на новые pure_attr_hover_desktop + pure_attr_hover_mobile.

`class-pure-attributes-frontend.php` — Фронтенд-класс (483 строки)

Назначение: Вся логика отображения свотчей на странице товара и в списках товаров.

Реализует паттерн Singleton через get_instance().

Основные хуки и действия:

Хук	Callback	Назначение
`wp_enqueue_scripts`	`enqueue_frontend_assets()`	Подключает CSS и JS на фронтенде
`woocommerce_dropdown_variation_attribute_options_html`	`override_variation_dropdowns()`	Заменяет выпадающие списки на свотчи
`woocommerce_before_variations_form`	`output_custom_variations_data()`	Выводит JSON с вариациями для AJAX
`woocommerce_after_shop_loop_item`	`render_loop_variation_form()`	Рендерит блок свотчей в списке товаров
`post_class`	`add_parent_classes_to_product()`	Добавляет CSS-классы к карточке товара

Детально:

override_variation_dropdowns() — на странице товара заменяет <select> на свотчи в зависимости от типа атрибута. Визуально скрывает оригинальный select, но оставляет в DOM.
output_custom_variations_data() — для товаров с большим числом вариаций (более 30) выводит облегченный JSON с вариациями для корректной работы cross-attribute filtering.
render_loop_variation_form() — главный метод рендеринга в списках товаров. Определяет тип товара (variable/simple/other) и вызывает соответствующий рендер.
add_parent_classes_to_product() — добавляет CSS-классы к <li.product> для корректного показа/скрытия свотчей на основе настроек.

Методы рендеринга в списках:

render_loop_variable_controls() — для вариативных товаров: свотчи, кнопка "Выберите опции", динамическая цена
render_loop_simple_controls() — для простых товаров: кнопка "В корзину"
render_qty_and_buy_btn() — рендерит селектор количества и кнопку покупки (общий для всех типов)

Интеграция с Pure Gallery: Поддержка смены изображения товара в карточке при выборе атрибута через _pure_gallery_attr_images meta-поля.

`pure-attributes-frontend.css` — Фронтенд-стили (960 строк)

Стиль: Minimalist, Black & White, High Contrast (Strict Fashion).

Основные разделы CSS:

Swatches Styling (Common) — базовые стили свотчей

.pure-swatch-color — круглые цветные свотчи (28×28px), активное состояние: двойная рамка
.pure-swatch-image — квадратные изображения (32×32px)
.pure-swatch-text — прямоугольные текстовые кнопки с uppercase, hover-эффект смены фона
.pure-disabled — непродаваемые комбинации (opacity 0.25, strikethrough для текста)
.pure-tooltip — тултипы для цветных/графических свотчей

Single Product Page — адаптация таблицы вариаций под display:block, скрытие нативных select
Shop Loop Integration — стили для свотчей в карточках товара (уменьшенные размеры), селектор количества (minimal border), кнопка "В корзину" (черный фон, белый текст)
Overlay Layouts:

Layout 2 (image_overlay): позиционирование absolute, backdrop-filter: blur(12px), центрирование свотчей по центру изображения
Layout 3 (bottom_overlay): абсолютное позиционирование внизу изображения, градиент от прозрачного к белому, блюр

Desktop Hover (min-width: 769px): свотчи выезжают под карточку (top: 100%) на прозрачном фоне с тенью. Для Layout 2/3 — отдельные hover-анимации (fade-in, slide-up)
Mobile (max-width: 768px): аналогичные hover-правила + pure-hover-active класс для тапов. Отключающие стили через pure-mobile-disabled-parent и pure-mobile-hide-swatches-parent
Fixes: Совместимость с альтернативной структурой карточек (wcwc-product-wrapper, query-container-1, pq-card-item, pq-swiper) — overflow:visible, z-index, padding

`pure-attributes-admin.js` — Админ-скрипты (112 строк)

Назначение: Поддержка WP Color Picker и Media Library в админке.

Функционал:

Инициализация wpColorPicker() для .pure-color-picker
Работа с медиа-библиотекой для загрузки изображений:
Кнопка "Upload/Select Image" — открывает WP Media Frame
Кнопка "Remove" — очищает поле и превью
AJAX-совместимость: переинициализация Color Picker после добавления терма через AJAX

`pure-attributes-frontend.js` — Фронтенд-скрипты (713 строк)

Назначение: Вся интерактивность свотчей на странице товара и в списках.

Инициализация:

initSingleProductSwatches()
initLoopCards()
initLoopSwatches()
moveOverlaySwatches()

Single Product Page:

Клик по свотчу: обновляет скрытый <select>, вызывает trigger('change') для WooCommerce
updateSingleProductSwatchesAvailability():
Перебор product_variations JSON (или pure-ajax-variations-data)
Сравнение значений атрибутов с учётом выбранных других атрибутов
Добавление/удаление класса pure-disabled
Обновление тултипов ("Недоступно" для недоступных комбинаций)
Поддержка woocommerce_variation_has_changed события

Shop Loop:

Клик по свотчу:
Toggle активного состояния
Вызов updateLoopSwatchesAvailability() — перекрестная фильтрация (как на single product)
Авто-снятие выбора с обнулённых свотчей
Поиск совпадения в variations JSON, обновление кнопки (в корзину / выбрать опции / нет в наличии)
Подстановка динамической цены (подменяет стандартную цену карточки или в pure-loop-variation-price)
Смена изображения товара (gallery image → matched variation image)
Клик по карточке на мобильных: активация hover через класс pure-hover-active, отключение других карточек, навигация на товар при повторном клике
Селектор количества: кнопки +/-, синхронизация с data-quantity кнопки

Глобальные утилиты:

updateLoopSwatchesAvailability() — cross-attribute filtering
findMatchingVariation() — поиск вариации по выбранным атрибутам
moveOverlaySwatches() — перемещение контейнера свотчей внутрь обертки изображения для Layout 2/3
updateSwatchTooltip() — обновление текста тултипа для недоступных свотчей
stripHtml() — удаление HTML-тегов из текста
initLoopCards() — дублирование CSS-классов с враппера на родительский <li> (после AJAX-загрузок)
$(document.body).on('post-load', ...) — поддержка AJAX-фильтров WooCommerce и infinite scroll

Визуализация архитектуры

pure-attributes.php
    │
    ├── Проверка WooCommerce (pure_attr_is_wc_active)
    │
    └── plugins_loaded → pure_attributes_init()
            │
            ├── class-pure-attributes-admin.php (синглтон)
            │       │
            │       ├── Создание/редактирование атрибутов → выбор типа
            │       ├── Управление термами → color/image meta
            │       ├── Страница настроек (render_settings_page)
            │       │       ├── show_in_loop
            │       │       ├── hover_desktop / hover_mobile
            │       │       ├── loop_layout (3 варианта)
            │       │       ├── mobile_disabled
            │       │       ├── hide_qty_mobile
            │       │       └── mobile_hide_swatches
            │       └── Сохранение в option 'pure_attributes_types'
            │
            └── class-pure-attributes-frontend.php (синглтон)
                    │
                    ├── Single Product Page
                    │       ├── override_variation_dropdowns() → свотчи
                    │       ├── output_custom_variations_data() → AJAX JSON
                    │       └── JS: updateSingleProductSwatchesAvailability()
                    │
                    └── Shop Loop (если show_in_loop)
                            ├── render_loop_variation_form()
                            │       ├── variable → render_loop_variable_controls()
                            │       ├── simple → render_loop_simple_controls()
                            │       └── other → "View Details" кнопка
                            ├── render_qty_and_buy_btn()
                            ├── Селектор количества
                            ├── Динамическая цена (цена вариации)
                            └── Смена изображения (gallery / variation image)

Рабочий процесс (data flow)

При создании атрибута в админке:

Пользователь выбирает тип (select/text/color/image) в WooCommerce → Attributes
Тип сохраняется в wp_options как pure_attributes_types['pa_название']

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

Для color: показывается WP Color Picker → сохраняется в term_meta('pure_attr_color')
Для image: показывается Media Library выбор → сохраняется ID в term_meta('pure_attr_image')

На странице товара:

Хук dropdown_variation_attribute_options_html перехватывает HTML <select>
Считывается тип атрибута из pure_attributes_types
Генерируется HTML со свотчами (цветные кружки / изображения / текстовые кнопки)
Оригинальный select скрывается, но остаётся в DOM для работы WooCommerce JS
JS обрабатывает клики по свотчам и синхронизирует скрытый select → WooCommerce обновляет форму

В списке товаров:

Если show_in_loop включён — удаляется стандартная кнопка "В корзину"
Добавляется кастомный блок со свотчами и кнопкой
JS перебирает variations JSON, определяет доступные комбинации, управляет состоянием кнопки
При выборе всех атрибутов: подставляется ID вариации, цена, изображение

Совместимость и особенности

Divi 5 / Theme Builder: Защита от Fatal Error через try-catch при получении вариаций
Pure Gallery: Интеграция с галерейным плагином для подмены изображения в карточке
AJAX-вариации: Для товаров с >30 вариациями — lightweight JSON без лишних данных
WooCommerce Filters/Infinite Scroll: Поддержка через post-load событие
Swiper / pq-swiper: Специальные CSS-правила для overflow, padding, z-index

Pure Attributes

Структура файлов

Функции по файлам

`pure-attributes.php` — Главный файл

`class-pure-attributes-admin.php` — Админ-класс (601 строка)

Основные хуки и действия:

Типы атрибутов:

Типы данных для термов:

Настройки плагина (страница WooCommerce → Pure Plugins → Attributes):

`class-pure-attributes-frontend.php` — Фронтенд-класс (483 строки)

Основные хуки и действия:

Детально:

Методы рендеринга в списках:

`pure-attributes-frontend.css` — Фронтенд-стили (960 строк)

`pure-attributes-admin.js` — Админ-скрипты (112 строк)

`pure-attributes-frontend.js` — Фронтенд-скрипты (713 строк)

Инициализация:

Single Product Page:

Shop Loop:

Глобальные утилиты:

Визуализация архитектуры

Рабочий процесс (data flow)

При создании атрибута в админке:

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

На странице товара:

В списке товаров:

Совместимость и особенности

Другие плагины

Pure Wishlist & Compare

Pure Attributes

Pure Filter

Pure Query

Pure Gallery

Телефон

Почта

Время работы

Адрес

Меню

Оставьте заявку

Pure Attributes

Структура файлов

Функции по файлам

pure-attributes.php — Главный файл

class-pure-attributes-admin.php — Админ-класс (601 строка)

Основные хуки и действия:

Типы атрибутов:

Типы данных для термов:

Настройки плагина (страница WooCommerce → Pure Plugins → Attributes):

class-pure-attributes-frontend.php — Фронтенд-класс (483 строки)

Основные хуки и действия:

Детально:

Методы рендеринга в списках:

pure-attributes-frontend.css — Фронтенд-стили (960 строк)

pure-attributes-admin.js — Админ-скрипты (112 строк)

pure-attributes-frontend.js — Фронтенд-скрипты (713 строк)

Инициализация:

Single Product Page:

Shop Loop:

Глобальные утилиты:

Визуализация архитектуры

Рабочий процесс (data flow)

При создании атрибута в админке:

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

На странице товара:

В списке товаров:

Совместимость и особенности

Другие плагины

Pure Wishlist & Compare

Pure Attributes

Pure Filter

Pure Query

Pure Gallery

`pure-attributes.php` — Главный файл

`class-pure-attributes-admin.php` — Админ-класс (601 строка)

`class-pure-attributes-frontend.php` — Фронтенд-класс (483 строки)

`pure-attributes-frontend.css` — Фронтенд-стили (960 строк)

`pure-attributes-admin.js` — Админ-скрипты (112 строк)

`pure-attributes-frontend.js` — Фронтенд-скрипты (713 строк)