Шаг первый
Устанавливаем плагин Quasar Variable Attributes (или Quasar Variable Attributes Pro). Бесплатную версию можно установить из базы плагинов WordPress – админка вашего сайта -> раздел плагины -> добавить новый -> впишите в поиск название плагина -> установить.
Шаг второй
Вам нужно добавить атрибуты, которые вы хотите стилизовать. Все не стилизованные атрибуты будут иметь вид выпадающего списка. На скриншоте показано как добавлять атрибуты.
После добавления атрибута нажмите на него и откроется меню настройки дизайна.
Обратите внимание – дизайн стилей атриубтов имеет индивидуалаьные настройки для категорий и архивов. Это нужно чтобы вы смогли сделать небольшой размер атрибутов для категорий и большой для карточки товара, где много свободного места.
Шаг третий
Переходим в раздел “Настройки”. Здесь главное с чем вам стоит определится – нужно ли показывать блок с выбором вариаций в категориях и архивах, а также в похожих товарах. Также обратите внимание на настройки адаптивности – выберите подходящее для вашего сайта.
Шаг четвертый
Переходим в раздел “Дизайн”. Здесь вы настраиваете внешний вид блока в котором будут выводиться вариации. Задайте нужные отступы, и другие параметры. Обратите внимание – настройка дизайна для карточки товара и для категорий задается в разных секциях.
Также можете проверить раздел “Локализация”, здесь вы можете задавать переводы текста в блоке вариаций для категорий и архивов.
Атрибуты с изображениями (PRO)
Если у вас куплена Pro версия, в плагине будет доступен стиль “Переключатель c изображениями” для атрибутов. Этот стиль имеет 2 режима работы:
1) вы задаете уникальные изображения в каждом товаре. Для этого в настройках товаров будет отображаться новая вкладка, смотрите скриншот:
Чтобы данный режим работал оставьте шорткод [img-attr] у значений атрибута.
2) вы можете стереть шорткод [img-attr] и вместо него вписать ссылку на фиксированное изображение, тогда у этого значения атрибута будет одинаковое изображение на всех товарах. данного атрибута будет одинаковое изображение на всех товарах.
Эти 2 режима можно комбинироватаь для разных значений атрибутов, смотрите скриншот:
Для категорий рекомендуется задавать меньший размер изображения, а для карточки товара большей.