15.10.2017
Задача – сделать красивый внешний вид для вариаций товаров в WooCommerce. По умолчанию, стандартный вид вариаций – это простое выпадающее поле с селектами, а нам нужно сделать красивые чекбоксы.
Используем плагин WC Variations Radio Buttons.
Просто установив и включив данный плагин вы получаете измененный внешний вид вариаций – вместо селекторов вариации будут отображаться как радио-кнопки, что очень удобно
И используем стили из статьи Делаем красивые чекбоксы для стилизации радиокнопок. В частности, используем эти стили:
input[type=radio]:not(old){ display: none; } input[type=radio]:not(old) + label{ display: inline-block; line-height: 36px; font-size: 12px; color: #34495e; cursor: pointer; margin-bottom: 10px; } input[type=radio]:not(old) + label:before{ content: ""; display: inline-block; background: url(images/check.png) 0 0 no-repeat; width: 36px; height: 36px; vertical-align: middle; margin-right: 14px; } input[type=radio]:not(old):checked + label:before{ background-position: 0 -36px; }
И получаем такой внешний вид:
Комментарии (2) к “Меняем внешний вид вариаций – вместо селектов делаем радио-кнопки”
Андрей
Добрый день.
Не подскажите как вывести такие чекбоксы в каталог товаров (архив), а не в карточку товара?
Denis Creative
Надо вносить изменения в файлы шаблона woocommerce.