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

Задача — сделать красивый внешний вид для вариаций товаров в 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;
}

И получаем такой внешний вид:

Выводим таймер обратного отсчета для продукта в WooCommerce

Задача такая — выводить для различных товаров таймер обратного отсчета, когда заканчиваются скидки или акции…

Выводим цену товара в WooCommerce в произвольном месте

Выводим базовую цену товара в WooCommerce: Выводим цену со скидкой, а если она не менялась,…

Получаем ссылку на запись или страницу в любой языковой версии (Polylang)

В некоторых шаблонах иногда приходится выводить статические ссылки в коде, лучше, конечно, это делать через…

Получаем описание и заголовок из плагина AIOS и используем его для og-метатегов

На одном из проектов требовалось вывести Open Graph Title и Open Graph Description, что это…

2 комментария

Андрей

Добрый день.

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

Надо вносить изменения в файлы шаблона woocommerce.

Ответить