Вывод кнопки «Добавить в корзину» со счетчиком количества товаров

woocommerce

Приветствую всех читателей! В этой статье речь пойдет о том как вывести кнопку «Добавить в корзину» со счетчиком количества товаров на странице категории товара.






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

2015-09-23

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

Woocommerce существует 4 типа товаров и находятся они по следующему пути: 
/wp-content/plugins/woocommerce\templates\single-product\add-to-cart\

  • Простой товар — simple.php
  • Сгруппированный — grouped.php
  • Внешний\Партнерский товар — external.php
  • Вариативный товар — variable.php

И так от слов к делу:

  1. Первым делом нам понадобиться код для вывода нашей новой кнопки, его можно найти в файле simple.php плагина WooCommerce который находиться по следующему пути: /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' ); ?>
    
    

    этот код нам нужно скопировать

  2. Затем переходим в паку шаблонов WooCommerce которая находиться по следующему пути: woocommerce/templates/ и находим фаил content-product.php в него и вставляем выше упомянутый код перед закрывающимся тегом </li>, тут же можно удалить или закомментировать старую кнопку «Добавить в корзину»

На этом все.

Пишите, спрашивайте в комментариях. Если вызнаете другой способ добавить выше описанную кнопку напишите мне свой способ, буду очень благодарен.






19 комментарии на “Вывод кнопки «Добавить в корзину» со счетчиком количества товаров

  1. Доброго дня!
    Пробовал по вашей инструкции добавить кнопку себе в магазин. Все вроде бы хорошо, работает.
    Только как удалить старую кнопку так и не понял. Разъясните пожалуйста!!

    Спасибо автору за полезную статью!

    • В том же файле (content-product.php) где вы добавили код новой кнопки выше добавленного вами кода есть функция следующего вида: < ?php do_action( 'woocommerce_after_shop_loop_item' ); ?>, просто удалите ее и старая кнопка не будет выводиться

      • Если удалить эту строку, то пропадает описание товара, цена и прочее. Как их вернуть обратно, без второй ненужной кнопки?

  2. А как поступить с вариативном товаром? При нажатие добавить в корзину выдает сообщение — «Размер» — обязательное поле

    • У вас есть 2 варианта: 1) вернуть старую кнопку, т.к. у вас есть ещё дополнительные варинаты товара ( а именно Размеры)
      2) Вывести над кнопками код размеров данного материала. ( для этого необходимо найти необходимый код в вашем плагине либо woocommerce/templates/ найти необходимый шаблон, от туда достать код и вставить его вместе с кнопкой.) Пример можете посмотреть на сайте http://dostavka1.by/magazin/eshhe-kategoriya/ если устроит могу выслать код)

  3. проблема такая:
    все сделал по инструкции, однако если убрать старую кнопку «Добавить в корзину», то когда начинаешь добавлять/убавлять или просто кликать по переключателю, то сразу переходит на страницу товара.

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

    Как быть?

    код content-product.php:
    is_visible() ) {
    return;
    }

    // Increase loop count
    $woocommerce_loop[‘loop’]++;

    // Extra post classes
    $classes = array();
    if ( 0 === ( $woocommerce_loop[‘loop’] — 1 ) % $woocommerce_loop[‘columns’] || 1 === $woocommerce_loop[‘columns’] ) {
    $classes[] = ‘first’;
    }
    if ( 0 === $woocommerce_loop[‘loop’] % $woocommerce_loop[‘columns’] ) {
    $classes[] = ‘last’;
    }
    ?>
    <li >

    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_value’ => ( isset( $_POST[‘quantity’] ) ? wc_stock_amount( $_POST[‘quantity’] ) : 1 )
    ) );
    }
    ?>

    <input type="hidden" name="add-to-cart" value="id ); ?>» />

    single_add_to_cart_text() ); ?>

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

    • т.к. у вас скорее всего ссылка на товар налазит на счетчик, а вообще лучше пришлите ссылку посмотрим.

  5. Отличная статья! Обязательно применю на сайте этот код.
    Есть еще и вопрос — «Как под самим товаром (который стоит в витрине магазина), возле кнопки КУПИТЬ (что обычно стоит под товаром занимая левое положение) разместить кнопку быстрой покупки (Заказ в один клик)»
    — подскажите пожалуйста а если есть урок — дайте на него ссылку.

    Одобряю! Спасибо!!! Неделю искал в нете информацию по шорткодам витрины магазина woocommerce — что бы разобраться в тонкостях как эти шортокоды работают и как работать с ними в WP 4.5.3 — находил только нерабочие. Только на Вашем сайте смог найти правильные — которые действительно работают!

    • Уроков вы на это не найдете. Вам необходимо нужную кнопку добавить в файл (content-product.php) рядом с основной, а далее выровнять с помощью css.

    • т.к. у вас скорее всего ссылка на товар налазит на счетчик (СSS проверьте), а вообще лучше пришлите ссылку посмотрим.

  6. Приветствую!
    У меня такие же проблемы как и у Сергея.

    1. Все сделал по инструкции, однако если убрать старую кнопку «Добавить в корзину», то когда начинаешь добавлять/убавлять или просто кликать по переключателю, то сразу переходит на страницу товара.

    2. Если же не убирать вторую кнопку, то товар добавляется в корзину, но только одна штука, независимо от того сколько выставил на счётчике.

    Может что-то подскажите?

    Заранее спасибо!

    • т.к. у вас скорее всего ссылка на товар налазит на счетчик, а вообще лучше пришлите ссылку посмотрим. Посмотрите КОД!!!

      • Всё верно, ссылка налазит на счётчик.
        Функцию, которая создаёт эту ссылку в таком виде я изменить не могу.
        Пришлось сделать не красиво, но зато работает.
        Спасибо большое!

  7. Добрый день!
    Уважаемый Mon, способ добавления товара, я так понимаю синхронный. Можете ли вы предоставить асинхронный обработчик клика( к примеру на AJAX)?

  8. Добрый день. Спасибо за удобную штуку. Проблему счетчика и второй кнопки можно решить плагином yellow pencil. Удобная вещь — в реальном времени можно изменять все что относится к css. Шрифты, цвет и размер кнопок, расстояние, отступы и тд.

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

    • Попробуйте создать для каждого товара уникальный id и после этого при нажатии на кнопку, после обновления страницы, пользователя будет отправлять на данный id ( экран будет опускаться на последний добавленный товар)

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

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