Время чтения: 2 мин. 4 июля 2016 в 6:26 Woocommerce
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

Количество продуктов Плюс и Минус WooCommerce

Данная статья расскажет как добавлять идикатор + и — к форме добавления товара.

По умолчанию в woocomerce идикатор кол-ва товаров выглядит так:

2016-04-22_06428031

Но мы его можем сделать вот так:

2016-04-22_195641

Данную вещь можно реализовать 2 путями.

Путь 1 — плагин

  1. Устанавливаем плагин: WooCommerce Quantity Increment.
  2. В папке вашей темы по адресу /wp-content/themes/woocommerce/single-product/add-to-cart/variable.php — переносим файл в папки woocommrece. То есть копируем.
  3. Все.

Путь 2 — без плагина

1. Добавляем код:

[php]

jQuery(function($){$("div.quantity:not(.buttons-add-minus), td.quantity:not(.buttons-add-minus)").addClass("buttons-add-minus").append(‘<input type="button" value="+" class="plus" />’).prepend(‘<input type="button" value="-" class="minus" />’),$(document).on("click",".plus, .minus",function(){var t=$(this).closest(".quantity").find(".qty"),a=parseFloat(t.val()),n=parseFloat(t.attr("max")),s=parseFloat(t.attr("min")),e=t.attr("step");a&&""!==a&&"NaN"!==a||(a=0),(""===n||"NaN"===n)&&(n=""),(""===s||"NaN"===s)&&(s=0),("any"===e||""===e||void 0===e||"NaN"===parseFloat(e))&&(e=1),$(this).is(".plus")?t.val(n&&(n==a||a>n)?n:a+parseFloat(e)):s&&(s==a||s>a)?t.val(s):a>0&&t.val(a-parseFloat(e)),t.trigger("change")})});
[/php]

2. Добавляем CSS

[php]

.woocommerce .quantity .minus, .woocommerce .quantity .plus, .woocommerce .quantity .qty {
background: transparent;
font-family: light;
font-size: 21px;
cursor: pointer;
transition: all 0.3s;
line-height: 26.4px;
width: 30px;
padding: 10px 0;
border: 1px solid #EEEEEE;
float: left;
}

input {
outline: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}

.woocommerce .quantity .qty {
width: 1.631em !important;
float: left;
box-shadow: 1px 4px 13px -6px rgba(0, 0, 0, 0.27) inset;
border-right: 0;
border-left: 0;
}
[/php]

3. Все.

Похожие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Начать сотрудничество
Заполните поля ниже. Я лично перезвоню Вам в течении 15 минут для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите контактный Email для отправки точной стоимости

или позвоните мне по телефону
+7-499-70-300-44
Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

[contact-form-7 404 "Not Found"]
Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Запись на бесплатный урок
Введите ваше имя, телефон и skype логин.
Я свяжусь с Вами для уточнения времени прохождения урока.

Введите ваше имя *

Введите контактный телефон *

Введите контактный E-mail *

Выберите программу

Промокод

Задать свой вопрос
Напишите свой вопрос. Я прочитаю его, и дам ответ в течении 15 минут.

Введите ваше имя *

Введите контактный email *

Сообщение