Всем привет. Что-то в последнее время приходится много работать с плагином интернет-магазина woocommerce для вордпресс. Недавно рассказывал вам как сделать там покупку в один клик. Сегодня же хочется рассказать о другой штуке. Как вывести количество товара рядом с кнопкой добавить в корзину не в карточке товара, а именно на странице каталога.
Сразу оговорюсь, что это я делал не не бесплатном шаблоне, а на премиум теме legenda. В некоторых других шаблонах такой функционал присутствует уже сразу, но не в этом. По данному руководству вы сможете без проблем добавить счётчик товаров рядом с кнопкой «добавить в корзину» и у любого другого шаблона вордпресс.
Теперь вкратце о проекте. В общем суть проекта такая — делаю сайт по онлайн заказу продуктов питания. Естественно есть необходимость добавлять товар по нескольку штук сразу в корзину, не заходя в карточку товара. Конечно можно несколько раз кликнуть на добавить в корзину, или же потом в корзине отредактировать количество товара, но это ни меня, ни заказчика не устраивало. Да и юзабилити сайте, естественно, при этом будет хромать. Нужно чтобы всё было максимально просто.
В общем как это реализовал.
В самом вукоммерсе в файле по пути /wp-content/plugins/woocommerce/templates/single-product/add-to-cart/simple.php есть нужный нам код. Я его скопировал ниже
<form class=»cart» method=»post» enctype=’multipart/form-data’>
<?php do_action( ‘woocommerce_before_add_to_cart_button’ ); ?>
<?php if ( ! $product->is_sold_individually() )
woocommerce_quantity_input( array(
‘min_value’ => apply_filters( ‘woocommerce_quantity_input_min’, 1, $product ),
‘max_value’ => apply_filters( ‘woocommerce_quantity_input_max’, $product->backorders_allowed() ? » : $product->get_stock_quantity(), $product )
) );
?>
<input type=»hidden» name=»add-to-cart» value=»<?php echo esc_attr( $product->id ); ?>» />
<button type=»submit» class=»single_add_to_cart_button button alt»><?php echo $product->single_add_to_cart_text(); ?></button>
<?php do_action( ‘woocommerce_after_add_to_cart_button’ ); ?>
</form>
<?php do_action( ‘woocommerce_after_add_to_cart_form’ ); ?>
Копируем его. Далее идём в файлы нашего шаблона. Там так же есть аналогичная папка под вукоммерс. Находим там файл content-product.php начинаем править.
В самом низу у нас есть див под названием add-to-container и вставляем в него вышеуказанный код после
<?php
/**
* woocommerce_after_shop_loop_item_title hook
*
* @hooked woocommerce_template_loop_price — 10
*/
if (etheme_get_option(‘product_page_price’)) {
do_action( ‘woocommerce_after_shop_loop_item_title’ );
}
?>
И будет вам счастье. Кстати в этом же диве не забудьте удалить старый код добавления в корзину.
В результате получится что-то типа такого.
В примере картинки ещё с демо товарами после автоимпорта.
Таким образом мы смогли сделать поле выбора количества товара рядом с кнопкой «Добавить в корзину».
У данного способа есть один минус. Обнаружили его не сразу. Когда добавляем товар в корзину, то надпись типа «товар добавлен и т.д» не появляется. Происходит перезагрузка страницы, но товар в корзине лежит уже. Как это поправитья пока не знаю.
Надеюсь данное руководство вам поможет в сайтостроении.
Не забываем подписываться и делиться материалами по кнопкам ниже)
С уважением, фрилансер-вебмастер Александр Шульгинов
16 комментариев. Оставить новый
Добрый вечер почему когда добавил товар в магазин и переходишь по ссылке то не могу перейти возвращается обратно на то место где добовлял товар а когда нажимаю кнопку корзина то нормально переходит но нажимаю еще оформить заказ то тоже самое что и с карзиной ни чего не происходит???????
если честно не знаю. у меня всё работало. единственное не появлялась надпись что товар добавлен в корзину, а происходит обновление страницы. но товар в корзину добавляется. по остальному — всё нормально
Понял. Но как и написал в первом ответе, в WooCoomerce выбор вариаций доступен только в карточке товара. Это сделано специально и вполне аргументировано. Представьте что получится, если 2-3 вариации будут отображаться под товаром вместо выбрать вариацию , и где тогда будет кнопка добавить в корзину? ??
тут как бы речь идёт не о вариации, а о количестве товара. разные вещи в общем то
Добрый вечер почему когда добавил товар в магазин и переходишь по ссылке то не могу перейти возвращается обратно на то место где добовлял товар а когда нажимаю кнопку корзина то нормально переходит но нажимаю еще оформить заказ то тоже самое что и с карзиной ни чего не происходит???????
напишите мне в вк, обсудим
Здравствуйте у меня такой вопрос! создал магазин на woocommerce и установил модуль мультиязычности WPML. но в настройках страниц woocommerce я только одини страницы могу выбрать это или страницы русские или английские или еще другие языки. Если я выбрал язык страниц русский в настройках страниц woocommerce то все в меню профиля моих заказов и корзины и оплаты все русскоязычное но если я хочу на английской версии магазина работать или на других языках или товар просматриватьили смотреть мои заказы или смотреть в корзину то меня по умолчанию на русскоязычную версию сайта подбрасывает все страницы созданы и на русском и на английском языке подскажите как с этим справиться для полноценного мультиязычного магазина.
Магазины мультиязычные ни разу не делал. если он у вас на 2 языкаможет лучше сделать именно 2 магаза по отдельности? один чисто на домене, другой на поддомене.
«У данного способа есть один минус. Обнаружили его не сразу. Когда добавляем товар в корзину, то надпись типа «товар добавлен и т.д» не появляется. Происходит перезагрузка страницы, но товар в корзине лежит уже. Как это поправитья пока не знаю.»
нашелся способ решить данную проблему?
решение пока не нашёл к сожалению
Бодрого настроения! Меня отправили сюда (аналогичная проблема на сайте). https://docs.woocommerce.com/document/override-loop-template-and-show-quantities-next-to-add-to-cart-buttons/ Я сделал, но ничего не работает! Это официальная информация от Вукоммерц . Может быть Вы своим опытным взглядом посмотрите, что здесь не так?! Жду с нетерпением. Надо реализовать на своем сайте!
напишите мне вконтакте, посмотрим
Спасибо! рабочий вариант.
Добрый день. Попробовал Ваш способ. Всё работает, но есть одна крупная проблема. Если убрать оригинальную корзину, то при изменении количества товара на новой корзине — перемещает на страницу этого товара. Смысла нету добавлять эту функцию, если покупателя так и так переносит на страницу с товаром. Можете пожалуйста сказать как это можно исправить?
Добрый день.
Не подскажете как добавить такие атрибуты?
https://i.imgur.com/vaWgXTR.png
Заранее благодарен.
Где же ты был год назад? Из за этого кода я мог 200$ заработать но не заработал(((