Добавляем поле количества на страницу товарной категории в WooCommerce

Если вы уже успели поработать с WooCommerce, то наверняка знаете, что по-умолчанию страницы архивов (товарных категорий) не содержат поля ввода количества. Конечно же используемая вами тема может содержать такой функционал, но во многих этой фичи нет. Для некоторых магазинов просто не имеет смысла добавление поля количества в категории, но многим может понадобится функция.

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

Добавляем поле количества

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

В этом сниппете мы реализуем следующее:

  • Он будет работать как с добавлением в корзину на AJAX, так и с дефолтным поведением добавления
  • Поле будет отображаться только для простых товаров, потому что вариативные товары нельзя добавлять в корзину напрямую
  • Поле количества будет ограничено количеством товара на складе. Больше чем у вас есть, пользователь добавить не сможет
  • Поле добавления количества будет отображаться только если товар можно приобрести (например, отсутствие цены означает невозможность покупки).
  • Когда товар продается индивидуально в одни руки, поле не будет отображаться

Если вы захотите использовать или просто протестировать предложенный сниппет, то вам потребуется добавить его в файл functions.php вашей (дочерней) темы.

/**
 * Добавляем поле количества на страницу архивов.
 */
function custom_quantity_field_archive() {
	$product = wc_get_product( get_the_ID() );
	if ( ! $product->is_sold_individually() && 'variable' != $product->product_type && $product->is_purchasable() ) {
		woocommerce_quantity_input( array( 'min_value' => 1, 'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity() ) );
	}
}
add_action( 'woocommerce_after_shop_loop_item', 'custom_quantity_field_archive', 0, 9 );
/**
 * Добавляем необходимый JavaScript.
 */
function custom_add_to_cart_quantity_handler() {
	wc_enqueue_js( '
		jQuery( ".post-type-archive-product" ).on( "click", ".quantity input", function() {
			return false;
		});
		jQuery( ".post-type-archive-product" ).on( "change input", ".quantity .qty", function() {
			var add_to_cart_button = jQuery( this ).parents( ".product" ).find( ".add_to_cart_button" );
			// Для работы добавления в корзину с помощью AJAX
			add_to_cart_button.data( "quantity", jQuery( this ).val() );
			// Для работы добавления в корзину БЕЗ AJAX
			add_to_cart_button.attr( "href", "?add-to-cart=" + add_to_cart_button.attr( "data-product_id" ) + "&quantity=" + jQuery( this ).val() );
		});
	' );
}
add_action( 'init', 'custom_add_to_cart_quantity_handler' );

Как только вы добавите сниппет кода на сайт, то сможете немедленно увидеть изменения (если используется какой-либо плагин кеширования, то может потребоваться очистка кеша).

Результат будет выглядеть примерно таким образом:

woocommerce-archive-quantity-page-left-1024x776[1]

Добавляем поле указания количества справа

Если же вам потребуется добавить поле количества справа от кнопки «В корзину», тогда нужно будет найти и заменить эту строку:

add_action( 'woocommerce_after_shop_loop_item', 'custom_quantity_field_archive', 0, 9 );

на такую:

add_action( 'woocommerce_after_shop_loop_item', 'custom_quantity_field_archive', 15, 9 );

Произведется замена 0 на 15, что изменит приоритет. Убедитесь, что поле переместилось и располагается справа от кнопки. Теперь страница будет выглядеть вот так:

woocommerce-archive-quantity-field-1024x751[1]

Поле количества не выровнено

Поле количества может быть не выровнено относительно кнопки добавления в корзину. В этом случае вам потребуется добавить следующий CSS код на свой сайт:

.archive .quantity { display: inline-block; }

Вот и все. Мы надеемся, что вашим покупателям станет намного комфортнее делать заказы на вашем сайте прямо со страницы товарной категории.

Если вы начинаете разбираться с WooCommerce, то не забудьте посетить нашу рубрику WooCommerce, где мы публикуем материалы специально по тематике магазинов на этой платформе.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

VN:F [1.9.22_1171]
Rating: 3.5/5 (6 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
Scroll To Top