Как превратить поле количества товара в выпадающий список?

Непосредственно на странице товара, прямо перед кнопкой добавления в корзину, а также и в самой корзине есть поле с выбором количества товара. По умолчанию это обычный input, но в этом уроке мы попробуем превратить его в выпадающий список <select>.

Также хочу порекомендовать вам свой видеокурс по WooCommerce, в нём мы создаём тему для интернет-магазина с нуля, на основе готовой HTML вёрстки, вот ссылка.

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

Поле выбора количества товара на странице товара
Поле выбора количества товара перед добавлением товара в корзину на странице самого товара. Как видите, оно превратилось в выпадающий список.
Поле выбора количества товара в корзине WooCommerce
Поле количества товара в корзине тоже превратилось в выпадающий список.

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

Функция woocommerce_quantity_input(), которая и выводит везде поле количества товара – переопределяемая (pluggable), это значит, что если вы создадите функцию с точно таким же названием в functions.php вашей теме или в плагине, то будет использоваться ваша функция.

function woocommerce_quantity_input( $args = array(), $product = null, $echo = true ) {
 
	if ( is_null( $product ) ) {
		$product = $GLOBALS[ 'product' ];
	}
 
	// значения по умолчанию
	$defaults = array(
		'input_name' => 'quantity',
		'input_value' => '1',
		'max_value' => apply_filters( 'woocommerce_quantity_input_max', -1, $product ),
		'min_value' => apply_filters( 'woocommerce_quantity_input_min', 0, $product ),
		'step' => 1,
	);
 
	// этот фильтр-хук не убирать
	$args = apply_filters( 'woocommerce_quantity_input_args', wp_parse_args( $args, $defaults ), $product );
 
	// немного валидаций
	$args[ 'min_value' ] = max( $args[ 'min_value' ], 0 );
	$args[ 'max_value' ] = 0 < $args[ 'max_value' ] ? $args[ 'max_value' ] : 20;
 
	if ( '' !== $args['max_value'] && $args[ 'max_value' ] < $args[ 'min_value' ] ) {
		$args['max_value'] = $args[ 'min_value' ];
	}
 
	$options = '';
 
	// запускаем цикл создания выпадающего селекта
	for ( $count = $args[ 'min_value' ]; $count <= $args[ 'max_value' ]; $count = $count + $args[ 'step' ] ) {
 
		// Cart item quantity defined?
		if ( '' !== $args[ 'input_value' ] && $args[ 'input_value' ] >= 1 && $count == $args[ 'input_value' ] ) {
			$selected = 'selected';
		} else {
			$selected = '';
		}
 
		$options .= '<option value="' . $count . '"' . $selected . '>' . $count . '</option>';
 
	}
 
	$html = '<div class="quantity"><select name="' . $args[ 'input_name' ] . '">' . $options . '</select></div>';
 
	if ( $echo ) {
		echo $html;
	} else {
		return $html;
	}
 
}
  • Если вы взглянете в оригинальную функцию, то заметите, что внутри неё также были и хук woocommerce_quantity_input_step – я его убрал, но если вы хотите разрешить плагинам впоследствии редактировать вашу функцию через хуки, можете их вернуть.
  • Хук woocommerce_quantity_input_args, напротив, трогать нельзя, т.к. на него законнекчено максимальное количество товара в зависимости от наличия на складе.
  • Также внутри функции у нас доступен объект товара $product, и на его основе мы можем как-то по-своему настроить поле с количеством.

Миша

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

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

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

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

  • Михаил 16 октября 2020 #

    Интересно было бы еще пример кол-ва товара + - сделать красиво.. без плагинов..

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

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