Непосредственно на странице товара, прямо перед кнопкой добавления в корзину, а также и в самой корзине есть поле с выбором количества товара. По умолчанию это обычный input, но в этом уроке мы попробуем превратить его в выпадающий список <select>
.
Также хочу порекомендовать вам свой видеокурс по WooCommerce, в нём мы создаём тему для интернет-магазина с нуля, на основе готовой HTML вёрстки, вот ссылка.
Прежде, чем приступим к коду, вот скриншоты того, что у нас получится. Поле заменится не только на странице товара, но и в корзине.
Для того, чтобы это сделать, нам не понадобится ни менять шаблоны 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
, и на его основе мы можем как-то по-своему настроить поле с количеством.Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.
Интересно было бы еще пример кол-ва товара + - сделать красиво.. без плагинов..
Возможно вам поможет этот урок
Михаил, добрый день!
Подскажите, можно ли применить данный хук к нескольким категориям товаров и сделать выпадающий список с шагом в 3 штуки?
В списке меняется количество, но по факту оно меняется только когда переходишь в корзину или еще куда-то. Как сделать Ajax обновление количества и цены?
Возможно вам поможет этот урок
Здравствуйте.
Подскажите, а как сделать чтобы был ползунок для выбора количества товара?
Здравствуйте, спасибо за интересный вопрос, думаю, вы можете начать с чего-то наподобии jqueryui.com/slider.