Меняем внешний вид вариаций — вместо селектов делаем радио-кнопки

Wordpress
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) к “Меняем внешний вид вариаций — вместо селектов делаем радио-кнопки”

  • Андрей

    Добрый день.

    Не подскажите как вывести такие чекбоксы в каталог товаров (архив), а не в карточку товара?

    Ответить

Оставить комментарий