Введите часть искомого слова, названия или фразы...
↑ ↓
  1. Новые темы озаглавленные с маленькой буквы - удаляются без предупреждения!
  2. Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

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

Тема в разделе "Вопросы новичков", создана пользователем alexvan, 27 авг 2014.

  1. alexvan

    alexvan

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

    ADv Местный

    Сообщения:
    430
    Симпатии:
    110
    Баллы:
    43
    Я думаю, тут в CSS нужно чуть подправить.. Сайт покажите, страничку где проблема.
     
  3. Stork.71

    Stork.71 Местный

    Сообщения:
    1.046
    Симпатии:
    255
    Баллы:
    83
    смотрите случайно не в устаревших браузерах?
     
  4. Mario

    Mario

    Сообщения:
    22
    Симпатии:
    7
    Баллы:
    3
    Сам только что решил для себя такую же задачу. И хоть ТС наверно уже ответ не нужен, напишу свое решение, может кому пригодится.

    Отображение кнопок количества до 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.
     
    • Нравится Нравится x 1
  5. Grollem

    Grollem

    Сообщения:
    141
    Симпатии:
    47
    Баллы:
    28
    Ничего необычного, повседневная задача
     

    Вложения:

  6. Mario

    Mario

    Сообщения:
    22
    Симпатии:
    7
    Баллы:
    3
    История получила продолжение. Совсем недавно ребята из WC в своей новой версии 2.3 убрали этот функционал из ядра. А вместо этого выпустили для этих целей отдельный плагин WooCommerce Quantity Increment.
    Так что кому нужны плюсики и минусики около количества товара в новой версии WC - теперь ставим его. У меня заработал без вопросов.
     
    • Нравится Нравится x 2
    • Информативно Информативно x 1
  7. Grollem

    Grollem

    Сообщения:
    141
    Симпатии:
    47
    Баллы:
    28
    О_О че серьезно? надо посмотреть.
    Как это убрали из ядра? не смешите мои тапочки. Если переменная quantity есть, то написать эти плюсики и минусики, это дело 10 минут
    Почитал щас changelog, действительно кнопки убрали. Но не из ядра! Просто вынесли в отдельный плагин для более гибкой настройки. Хорошее решение. Т.к. из коробки их приходилось настраивать, удалять маску, править кнопки, убирать спиннер...
     
    Последнее редактирование: 12 фев 2015
  8. MainFish

    MainFish

    Сообщения:
    4
    Симпатии:
    0
    Баллы:
    1
    поставил плагин WooCommerce Quantity Increment.
    активировал, и не работает.
    куда смотреть, где искать причину?

    в инструкции только 2 пункта: установить и активировать
     
  9. easyaround

    easyaround

    Сообщения:
    6
    Симпатии:
    2
    Баллы:
    3
    Ребята, а как после установки плагина или кодов удалить старые кнопки?

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

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

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

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

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

    Вложения:

    • 12.jpg
      12.jpg
      Размер файла:
      8,4 КБ
      Просмотров:
      33
  10. easyaround

    easyaround

    Сообщения:
    6
    Симпатии:
    2
    Баллы:
    3
    Вопрос отпал.
    Подвинул новые кнопки ближе друг к другу и они закрыли старые)
     
    • Нравится Нравится x 1