Кастомные кнопки цвета

1. Откройте: Интернет-магазин → Настройки товаров и заказов → Опции товаров. Создайте опцию (например, Цвет) и выберите тип radiobutton.

2. Добавьте значения цветов в нужном порядке (порядок важен, т.к. раскраска идёт через nth-of-type): Зелёный, Красный, Оранжевый, Жёлтый, Голубой, Синий, Фиолетовый, Чёрный, Золотой.

3. Перейдите в: Дизайн → Таблица стилей CSS и вставьте код ниже (лучше в самый конец таблицы стилей).

.val.option__value .radio__title { display: none !important; }
.val.option__value .radio__box{
 width: 34px;
 height: 34px;
 border-radius: 999px;
 background: #ccc; /* fallback, ниже перезапишется через nth-of-type */
 border: 2px solid rgba(0,0,0,.18);
 box-sizing: border-box;
 display: inline-block;
 transform: scale(1);
 transition:
 border-color .18s ease,
 box-shadow .18s ease,
 transform .18s ease,
 filter .18s ease;
}
.val.option__value .radio__box::before,
.val.option__value .radio__box::after{
 content: none !important;
}
.val.option__value .radio__input:checked + .radio__box{
 border-color: #111;
 box-shadow: 0 0 0 3px rgba(17,17,17,.28);
 transform: scale(1.06);
 filter: saturate(1.05);
}
.val.option__value > label.radio{
 display: inline-flex;
 align-items: center;
 margin-right: 10px;
}
@media (prefers-reduced-motion: reduce){
 .val.option__value .radio__box{ transition: none; }
}

/* ГДЕ МЕНЯЮТСЯ ЦВЕТА: фон по порядку элементов (nth-of-type) */
.val.option__value > label.radio:nth-of-type(1) .radio__box { background: #2ecc71; } /* Зеленый */
.val.option__value > label.radio:nth-of-type(2) .radio__box { background: #e74c3c; } /* Красный */
.val.option__value > label.radio:nth-of-type(3) .radio__box { background: #f39c12; } /* Оранжевый */
.val.option__value > label.radio:nth-of-type(4) .radio__box { background: #f1c40f; } /* Желтый */
.val.option__value > label.radio:nth-of-type(5) .radio__box { background: #5dade2; } /* Голубой */
.val.option__value > label.radio:nth-of-type(6) .radio__box { background: #2e86c1; } /* Синий */
.val.option__value > label.radio:nth-of-type(7) .radio__box { background: #8e44ad; } /* Фиолетовый */
.val.option__value > label.radio:nth-of-type(8) .radio__box { background: #111111; } /* Черный */
.val.option__value > label.radio:nth-of-type(9) .radio__box { background: #d4af37; } /* Золотой */
.option .option__value { gap: 25px; margin-top: 20px; }

4. Если порядок цветов в опции изменится, измените соответствие в блоке nth-of-type (строки “ГДЕ МЕНЯЮТСЯ ЦВЕТА”).