Woocommerce. Добавляем счётчик товаров рядом с кнопкой “добавить в корзину”

Всем привет. Что-то в последнее время приходится много работать с плагином интернет-магазина 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’ );
}
?>

 

И будет вам счастье. Кстати в этом же диве не забудьте удалить старый код добавления в корзину.

В результате получится что-то типа такого.

8104056bbb

В примере картинки ещё с демо товарами после автоимпорта.

Таким образом мы смогли сделать поле выбора количества товара рядом с кнопкой “Добавить в корзину”.

У данного способа есть один минус. Обнаружили его не сразу. Когда добавляем товар в корзину, то надпись типа “товар добавлен и т.д” не появляется. Происходит перезагрузка страницы, но товар в корзине лежит уже. Как это поправитья пока не знаю.

Надеюсь данное руководство вам поможет в сайтостроении.

Не забываем подписываться и делиться материалами по кнопкам ниже)

С уважением, фрилансер-вебмастер Александр Шульгинов

 

 

 

Подпишитесь на рассылку

Чтобы быть в курсе обновлений блога, новостей по вордпресс и сайтостроительству

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

  • Добрый вечер почему когда добавил товар в магазин и переходишь по ссылке то не могу перейти возвращается обратно на то место где добовлял товар а когда нажимаю кнопку корзина то нормально переходит но нажимаю еще оформить заказ то тоже самое что и с карзиной ни чего не происходит???????

  • если честно не знаю. у меня всё работало. единственное не появлялась надпись что товар добавлен в корзину, а происходит обновление страницы. но товар в корзину добавляется. по остальному – всё нормально

  • Понял. Но как и написал в первом ответе, в 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/ Я сделал, но ничего не работает! Это официальная информация от Вукоммерц . Может быть Вы своим опытным взглядом посмотрите, что здесь не так?! Жду с нетерпением. Надо реализовать на своем сайте!

  • напишите мне вконтакте, посмотрим

  • Спасибо! рабочий вариант.

  • Добрый день. Попробовал Ваш способ. Всё работает, но есть одна крупная проблема. Если убрать оригинальную корзину, то при изменении количества товара на новой корзине – перемещает на страницу этого товара. Смысла нету добавлять эту функцию, если покупателя так и так переносит на страницу с товаром. Можете пожалуйста сказать как это можно исправить?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Заполните поле
Заполните поле
Пожалуйста, введите корректный адрес email.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Обо мне

Работаю с сайтами с 2010 года.
Более 500 выполненных проектов
Специализируюсь преимущественно на сайтах-визитках, блогах и небольших интернет магазинах.
Подробнее

Внимание! Получи бесплатно видеокурс!

Хостинг ХостиЯ


Меню