Как оформить поле выбора количества Woocommerce?

Как оформить поле выбора количества Woocommerce?

Здравствуйте, дорогие друзья!

Если вы когда либо работали с плагином Woocommerce, то наверняка сталкнулись с тем, что поле для выбора количества товара в нём стилизовано не очень привлекательно. Вот так оно выглядит изначально:

Поле для выбора количества товара Woocommerce

В общем то это не очень критично, но для современного интернет магазина можно сделать его более аккуратным, удобным и современным. Например, таким:

Оформляем поле для выбора количества товара Woocommerce

В некоторых темах эта проблема уже решена и поле для ввода количества товаров уже стилизовано по умолчанию, но такое встречается довольно редко. Большинство разработчиков тем для интернет магазинов не заморачиваются по этому поводу и поле остаётся со стандартным оформлением.

В чём причина этой проблемы?

Дело в том, что при помощи одного только CSS это поле стилизовать проблематично и приходится прибегать к использованию Jquery, для того чтобы добавить в верстку некоторые блоки, которые будут выполнять роль кнопок переключения значения, и который можно будет стилизовать при помощи CSS.

Сразу скажу что решение, предложенное в данной статье, можно применять не только для поля выбора количества товаров Woocommerce, но и для оформления аналогичных полей для других форм или плагинов не зависимо от используемой CMS.

В одной из предыдущих статей я уже рассматривала один скрипт, который позволяет стилизовать различные элементы формы:
“Как красиво оформить select, checkbox и другие поля форм?”

При помощи этого скрипта можно также стилизовать и поле для ввода количества товаров, однако именно при работе с плагином Woocommerce со стилизацией этого поля может возникнуть одна проблема. Заключается она в том что при выборе на странице товара нескольких товарных позиций и нажатии на кнопку «В корзину» выбранное количество передаётся некорректно и в корзину добавляется только одна единица товара.
Поэтому именно для стилизации этого поля я предлагаю другой скрипт. Он отвечает только за оформление поля для выбора количества товара Woocommerce.

Как оформить поле для выбора количества товаров Woocommerce?

  1. 1 Скачиваем с моего сайта файл скрипта, который нам нужно будет подключить.
  2. 2 Подключаемся к сайту по FTP или через файловый менеджер на хостинге и открываем папку с активной темой:
    /wp-content/themes/название_вашей_темы
    Если вы не знаете как называется ваша тема, в админке сайта зайдите в раздел «Внешний вид»«Темы» и там посмотрите нзвание темы, которая стоит на первом месте. Возле её названия будет пометка «Активна».
  3. 3 Если в папке с темой уже есть папка «js», то открываем её, если нет то создаём и загружаем туда скачанный файл скрипта numberstyler.js
  4. 4 Открываем файл header.php, который находится в папке с активной темой и перед закрытием тега добавляем следующий код:

    При помощи этого кода мы указываем путь к нашему скрипту и подключаем его.
    Функция get_template_directory_uri() выводит полный путь до папки с активной темой.

  5. 5Сохраняем изменения и если вы правильно загрузили файл скрипта и добавили код, предложенный выше то после обновления страницы товара у вас должна появиться примерно следующая картина:
    Результат работы скрипта

    Кнопки переключения появились и если по ним кликнуть то будет видно что они работают, однако располагаются они не совсем там где нам нужно.
    Здесь уже в дело вступает великий и могучий CSS, при помощи которого мы будем исправлять ситуацию.

  6. 6 Открываем файл style.css активной темы и в самом конце добавляем следующий код:

  7. 7 Сохраняем изменения в файле style.css, обновляем страницу с товаром и после этого наше поле для выбора количества товара должно выглядеть так:
    Стилизованное поле для ввода количества Woocommerce

Ну или как то наподобие этого :)

Дело в том что все темы WordPress разные и изначально там уже прописано куча CSS свойств для стилизации карточки товара, которые неизбежно влияют и на оформление поля. Поэтому если у вас кнопки станут немного не так как хотелось бы или будут ещё какие то проблемы с оформлением, то вам нужно будет дополнительно внести корректировки в CSS стили.

Чтобы вам было проще это сделать я оставила в предложенном CSS коде комментарии где что можно поменять.

Если вам помогла данная статья, буду очень рада почитать ваши комментарии. Если вы используете другие решения для оформления поля для выбора количества товаров Woocommerce – поделитесь ими в комментариях.

Так же не забывайте делиться статьёй в соцсетях и подписываться на рассылку.

Спасибо что заглянули ко мне на сайт! Успехов вам и процветания!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

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

  1. Никаких изменений. Даже не показались.

  2. Все работает кроме одного, в самой корзине если менять количество этими кнопками, кнопка Обновить корзину не активируется, а если напечатать, то активируется, плюс когда нажимаешь Обновить корзину эти кнопки пропадают, и появляются те которые по умолчанию

    • Я и на дефолтовских темах пробовал — не работает.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif