• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

Расположение кнопок плюс и минус

Image CMS

alexvan

Новичок
#1
Всем доброго дня, столкнулся с проблемой которую видел на многих сайтах с WooCommerce.
Как изменить расположение кнопок плюс и минус. На рисунке показал как сейчас, и как хотелось бы (в двух вариантах). Спасибо
кнопки.jpg
 

ADv

Гуру
Местный
#2
Я думаю, тут в CSS нужно чуть подправить.. Сайт покажите, страничку где проблема.
 

Mario

Новичок
#4
Сам только что решил для себя такую же задачу. И хоть ТС наверно уже ответ не нужен, напишу свое решение, может кому пригодится.

Отображение кнопок количества до 01.png и после 02.png .

Все решается вполне элементарно просто правкой стилей для этих полей и кнопок. Приведу как пример свои стили, после добавления которых кнопки стали как на рисунке 2:
Код:
/* стили для блока-обертки вокруг кнопок */
.woocommerce .quantity, .woocommerce #content .quantity, .woocommerce-page .quantity, .woocommerce-page #content .quantity {
   width: 110px;
}
/* стили для кнопки + */
.woocommerce .quantity .plus, .woocommerce #content .quantity .plus, .woocommerce-page .quantity .plus, .woocommerce-page #content .quantity .plus {
   
}
/* стили для поля количества */
.woocommerce .quantity input.qty, .woocommerce #content .quantity input.qty, .woocommerce-page .quantity input.qty, .woocommerce-page #content .quantity input.qty {
   margin-left: 35px;
   border-radius: 5px;
   border: 1px solid grey;
}
/* стили для кнопки - */
.woocommerce .quantity .minus, .woocommerce #content .quantity .minus, .woocommerce-page .quantity .minus, .woocommerce-page #content .quantity .minus {
   left: 0;
}
/* стили, общие для кнопки + и - */
.woocommerce .quantity .plus, .woocommerce .quantity .minus, .woocommerce #content .quantity .plus, .woocommerce #content .quantity .minus, .woocommerce-page .quantity .plus, .woocommerce-page .quantity .minus, .woocommerce-page #content .quantity .plus, .woocommerce-page #content .quantity .minus {
   width: 30px;
   height: 100%;
   border-radius: 5px;
   border: 1px solid grey;
   background: none;
   color: #FF5722;
   font-size: 24px;
}
Все громоздкие идентификаторы взяты так как они на текущий момент идут в стилях WC.
При наведении мыши кнопки становятся серыми (кнопка + на рисунке 2) - это так и было в WC, я не менял это поведение.
Если у вас стили не применяются, сделайте чтобы они грузились после родных стилей WC или выставьте в конце каждого стиля !important.
 

Mario

Новичок
#6
История получила продолжение. Совсем недавно ребята из WC в своей новой версии 2.3 убрали этот функционал из ядра. А вместо этого выпустили для этих целей отдельный плагин WooCommerce Quantity Increment.
Так что кому нужны плюсики и минусики около количества товара в новой версии WC - теперь ставим его. У меня заработал без вопросов.
 

Grollem

Опытный
#7
О_О че серьезно? надо посмотреть.
Как это убрали из ядра? не смешите мои тапочки. Если переменная quantity есть, то написать эти плюсики и минусики, это дело 10 минут
Почитал щас changelog, действительно кнопки убрали. Но не из ядра! Просто вынесли в отдельный плагин для более гибкой настройки. Хорошее решение. Т.к. из коробки их приходилось настраивать, удалять маску, править кнопки, убирать спиннер...
 
Последнее редактирование:

MainFish

Новичок
#8
поставил плагин WooCommerce Quantity Increment.
активировал, и не работает.
куда смотреть, где искать причину?

в инструкции только 2 пункта: установить и активировать
 
#9
Ребята, а как после установки плагина или кодов удалить старые кнопки?

Спиннер, да? div#sipn

Причем в разных браузерах отображается по-разному. Где-то только при наведении, где-то всегда висит.

Все облазил, код найти не могу!

Помогите, кто сможет!

Ссылка на тестовый магаз:
http://easyaround.rusalyaska.ru/товар/ukenaz/
 

Вложения

  • 8.4 KB Просмотры: 49