Как вывести на странице товара выбор параметров в виде кнопок
Вариативные товары в WooCommerce — это товары, имеющие несколько вариантов, таких как размер, цвет, материал или объем. Покупатель может выбрать конкретную комбинацию характеристик (например, “Красная футболка, размер L”) прямо на странице товара, а для каждой вариации можно задать свою цену, артикул и фото. По умолчанию атрибуты товара отображаются на его странице в виде выпадающих списков:

Вывести выбор характеристик товара в виде кнопок можно с помощью плагина Variation Swatches for WooCommerce – Color, Image & Size Swatches – позволяет заменить выпадающие списки на кнопки с цветом, текстом или изображениями.

Установить и активировать плагин можно в разделе Плагины > Добавить новый. На странице настроек плагина можно задать размер кнопок и другие параметры.
Пошаговая настройка
- Перейдите в раздел Товары > Атрибуты и создайте новый атрибут, например Цвет. Затем найдите его в списке атрибутов, нажмите ссылку Настройка значений и создайте нужные значения.
- Создайте новый товар или откройте существующий для редактирования. В выпадающем списке Данные товара выберите Вариативный товар. Затем перейдите во вкладку Атрибуты и добавьте нужные атрибуты. Убедитесь что отмечены чекбоксы видимости и использования для вариаций и нажмите кнопку Сохранить атрибуты.

- Перейдите во вкладку Вариации, добавьте вариации вручную или сгенерируйте автоматически. Для каждой вариации можно задать цену, изображение, артикул и другие параметры.
- Если вы установили и активировали плагин, у товаров появится еще одна вкладка Swatches для настройки внешнего вида атрибутов на странице товара. Задайте атрибутам нужные параметры отображения, сохраните настройки вкладки и опубликуйте товар.
