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

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

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

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

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

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

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

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

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

add_action( 'woocommerce_before_add_to_cart_quantity', 'truemisha_quantity_plus', 25 );
add_action( 'woocommerce_after_add_to_cart_quantity', '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 уже я за вас не напишу 😁

Миша

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Оставить комментарий

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.