[Woocommerce] Как добавить кнопки плюс и минус к полю «количество товаров» в корзине и на странице товара

По умолчанию в Woocommerce поле для отображения и ввода количеств товара в корзине и на странице товара представляет собой стандартное поле HTML типа number. Браузер позволяет увеличить и уменьшать число в поле с помощью стрелок (в разных браузера реализовано по разному. Например в Chrome, стрелки появляются при наведении мышки на поле). Выглядит это так:

Не самое изящное решение. Гораздо интереснее и симпатичнее смотрятся знаки плюс и минус вместо стрелок. Вот так

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

Что мы получим:

1. Вместо стрелок по умолчанию для увеличения или уменьшения числа будут кнопки со знаком плюс и минус
2. Корзина будет обновляться автоматически, после клика на плюс или минус (то есть будет пересчет итоговой суммы)
3. И, что самое главное, вам не придется перезаписывать шаблон файла quantity-input.php

Код из шага 1 и 2 вставить в файл functions.php в дочерней теме или с помощью плагина Индивидуальные функции

Шаг 1 — добавить кнопки плюс и минус

add_action( 'woocommerce_after_quantity_input_field', 'ab_quantity_plus' );
  
function ab_quantity_plus() {
   echo '<div class="plus"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 9.4h-4.9V4.5a.6.6 0 10-1.2 0v4.9H4.5a.6.6 0 000 1.2h4.9v4.9a.6.6 0 001.2 0v-4.9h4.9a.6.6 0 100-1.2z" fill="currentColor"></path></svg> </div>';
}
  
add_action( 'woocommerce_before_quantity_input_field', 'ab_quantity_minus' );
  
function ab_quantity_minus() {
   echo '<div class="minus"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 9.45h-11a.55.55 0 000 1.1h11a.55.55 0 000-1.1z" fill="currentColor"></path></svg> </div>';
}

Шаг 2 — добавить код javascript

Данный код добавить js код в нижнуюю часть сайта.

function ab_add_quantity_script(){
    if( ! is_admin() ) { ?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0AjQuery(document).ready(function(%24)%7B%0A%24(document).on('click'%2C%20'.plus'%2C%20function(e)%20%7B%0A%20%20%20%20%24input%20%3D%20%24(this).prev('input.qty')%3B%0A%20%20%20%20var%20val%20%3D%20parseInt(%24input.val())%3B%0A%20%20%20%20var%20step%20%3D%20%24input.attr('step')%3B%0A%20%20%20%20step%20%3D%20'undefined'%20!%3D%3D%20typeof(step)%20%3F%20parseInt(step)%20%3A%201%3B%0A%20%20%20%20%24input.val(%20val%20%2B%20step%20).change()%3B%0A%09%24('%5Bname%3D%22update_cart%22%5D').trigger('click')%3B%20%0A%7D)%3B%0A%24(document).on('click'%2C%20'.minus'%2C%20function(e)%20%7B%0A%20%20%20%20%24input%20%3D%20%24(this).next('label').next('input.qty')%3B%0A%20%20%20%20var%20val%20%3D%20parseInt(%24input.val())%3B%0A%20%20%20%20var%20step%20%3D%20%24input.attr('step')%3B%0A%20%20%20%20step%20%3D%20'undefined'%20!%3D%3D%20typeof(step)%20%3F%20parseInt(step)%20%3A%201%3B%0A%20%20%20%20if%20(val%20%3E%200)%20%7B%0A%20%20%20%20%20%20%20%20%24input.val(%20val%20-%20step%20).change()%3B%0A%20%20%20%20%7D%0A%09%20%24('%5Bname%3D%22update_cart%22%5D').trigger('click')%3B%20%0A%7D)%3B%0A%7D)%3B%09%09%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<?php
    }
}

add_action( 'wp_footer', 'ab_add_quantity_script' );

Шаг 3 — css код чтобы убрать стрелочки в поле input

Этот код добавить в файл css дочерней темы или в разделе Внешний вид -> Настройки -> Дополнительные стили

.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
     display: none;
     margin: 0;
}
.quantity input.qty {
     appearance: textfield;
     -webkit-appearance: none;
     -moz-appearance: textfield;
}

Шаг 4 — css код оформления поля input и кнопок

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

/* quantity style  in the cart */

.quantity input::-webkit-outer-spin-button,
    .quantity input::-webkit-inner-spin-button {
        display: none;
        margin: 0;
    }
.quantity input.qty {
        appearance: textfield;
        -webkit-appearance: none;
        -moz-appearance: textfield;
    }


/* input style */
.woocommerce .input-text.qty {
    padding: 0 !important;
    text-align: center !important;
    min-height: 18px;
    max-height: 18px;
    width: 2em;
	  border: none;
    background: transparent;
}
.product-quantity .quantity, .product .quantity {
   display: flex;
   align-items: center;
   justify-content: center;
}
th.product-quantity {
   text-align: center
}
.product .cart {
	 display: flex;
   align-items: center;
}

/* plus and minus buttons style */

.minus, .plus {
    color: #454545;
    padding: 3px;
    height: 26px;
    width: 26px;
    display: flex;
    align-items: center;
	border: 1px solid #454545;
    border-radius: 50px;
}

.minus:hover,
.plus:hover {
   color: #454545;
   background-color: transparent
}
.minus:focus,
.plus:focus {
 
  background-color: transparent;
   color: #454545;
    outline: -webkit-focus-ring-color auto 0px;

}

С вопросами и за помощью обращайтесь в нашу службу поддержки 24/7

Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:

а также, хостинг Beget: