Произвольный дизайн кнопок количества товаров

WooCommerce, Корзина  /  13 комментариев

Не так давно я занимался одним проектом на WooCommerce, который мне очень нравится – магазином Kalabasa из Мск. И одной из задач было сделать кнопки изменения количества товара в корзине один-в-один как на скриншоте.

произвольные кнопки изменения количества товара WooCommerce

Прежде, чем я расскажу вам, как это реализовать, хочу поделиться ссылкой на отдельный урок, в котором мы делали автообновление корзины при изменении количества этими кнопками. Видите же, да, что нет кнопки «Обновить корзину»?

Также не забудьте посмотреть видеоурок про корзину WooCommerce из моего видеокурса.

А теперь давайте приступим к изменению стандартных кнопок количества.

Прежде всего, сам HTML и PHP кнопок количества лежит в templates/global/quantity-input.php но важно понимать, что если возможно сделать это без подмены файлов шаблона WooCommerce, то желательно делать без подмены. А если вы создаёте тему или плагин не для конкретного клиента, а «для всех», то так и вовсе делать нельзя.

Поэтому мы и попробуем сделать через фильтр-хуки и легонький JavaScript.

Если вы сейчас открыли файл quantity-input.php, то можете заметить в нём два экшн-хука woocommerce_before_quantity_input_field и woocommerce_after_quantity_input_field, давайте воспользуемся или, чтобы добавить наши произвольные кнопки плюса и минуса.

add_action( 'woocommerce_before_quantity_input_field', 'truemisha_quantity_plus', 25 );
add_action( 'woocommerce_after_quantity_input_field', 'truemisha_quantity_minus', 25 );
 
function truemisha_quantity_plus() {
	echo '<button type="button" class="plus">+</button>';
}
 
function truemisha_quantity_minus() {
	echo '<button type="button" class="minus">-</button>';
}

Дальше привносим жизнь в эти кнопки вот таким JavaScript-jQuery кодом:

// при клике на кнопки
$( 'body' ).on( 'click', 'button.plus, button.minus', function() {
 
	var qty = $(this).parent().find( 'input' ),
	    val = parseInt( qty.val() ),
	    min = parseInt( qty.attr( 'min' ) ),
	    max = parseInt( qty.attr( 'max' ) ),
	    step = parseInt( qty.attr( 'step' ) );
 
	// дальше меняем значение количества в зависимости от нажатия кнопки
	if ( $( this ).is( '.plus' ) ) {
		if ( max && ( max <= val ) ) {
			qty.val( max );
		} else {
			qty.val( val + step );
		}
	} else {
		if ( min && ( min >= val ) ) {
			qty.val( min );
		} else if ( val > 1 ) {
			qty.val( val - step );
		}
	}
 
});

Вот в целом и всё самое основное. А, ну и понятно дело, ребята, что CSS уже я за вас не напишу 😁

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Комментарии — 13

Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.

Миша Рудрастых и WordPress

Полезности из мира WordPress и жизни студии.

Мой телеграм-канал