Меняем внешний вид вариаций — вместо селектов делаем радио-кнопки
Задача — сделать красивый внешний вид для вариаций товаров в 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: Выводим цену со скидкой, а если она не менялась,…
В некоторых шаблонах иногда приходится выводить статические ссылки в коде, лучше, конечно, это делать через…
На одном из проектов требовалось вывести Open Graph Title и Open Graph Description, что это…
2 комментария
Ответить
Добрый день.
Не подскажите как вывести такие чекбоксы в каталог товаров (архив), а не в карточку товара?
Надо вносить изменения в файлы шаблона woocommerce.