Мар
25
20

Хаки для кнопки добавить в корзину WooCommerce

Кнопка добавить в корзинуХочу рассмотреть некоторые интересные хаки, связанные с задачей добавления товара в корзину WooCommerce. Ранее вы уже могли видеть некоторые посты по настройке страницы корзины или ее автоматическом обновлении, а сегодня заметка будет больше касаться самой кнопки Add to Cart (и всего, что происходит при взаимодействии с ней). В частности, попробуем добавить сообщение при нажатии на произвольной страничке и заменить линк с нее на URL полного описания товара. Все эти решения тестировал лично, однако со временем некоторые из них (из-за версии модуля магазина) могут не срабатывать. Начну пока что с парочки сниппетов, а дальше по возможности буду данную заметку обновлять.

Изменяем ссылку добавления в корзину

По умолчанию в магазине для товаров вместе с заголовком, ценой, картинкой отображается также ссылка/иконка с функцией добавления товара в корзину. В настройках WooCommerce вы можете задать разные варианты поведения для нее:

Ссылка добавления в корзину

Но иногда при клике на кнопку требуется поренаправление посетителей на страничку с описанием товара. Теоретически это можно сделать через правку файлов макета, если он позволяет такое реализовать. Однако правильнее и логичнее внести изменения с помощью хуков.

В файл темы custom-function.php, function.php или любой другой, где у вас расположены хаки для темы, добавляете строки:

add_filter( 'woocommerce_loop_add_to_cart_link', 'custom_product_link' );
function custom_product_link( $link ) {
global $product;
    echo '<a href="'.esc_url( $product->get_permalink( $product->id )).'" class="button product_type_simple add_to_cart_button">Подробнее</a>';
}

Таким образом, вы сможете изменить кнопку добавить в корзину Woocommerce на свою. Вместо указанного class подставляйте те значения, которые используются в вашей теме дабы не пришлось дополнительный раз править CSS стили. Текст «Подробнее» тоже заменяем, хотя обычно он вообще не отображается, а подменяется на иконку.

Сообщение о добавлении товара на произвольной странице

В WooCommerce вы можете использовать шорткоды отображения списка товаров (новых, популярных, по ID) на любой странице сайта. Однако при этом кнопка добавить в корзину WooCommerce (Add to Cart) свою функцию выполняет, но никакое сообщение не показывает. А, по идее, должно быть что-то вроде следующей картинки:

Сообщение о добавлении товара в корзину

Дабы это исправить первым делом определите файл шаблона, который отвечает за вывод информации на нужной странице. Как правило, он называется page.php, хотя может иметь и другие значения, например page-home.php (для главной), page-fullwidth.php (для широкоформатной) и т.п.

Далее в коде выбранного файла добавляем одну из двух следующих строк на выбор:

<?php wc_print_notices();?>

или

<?php do_action( 'woocommerce_before_single_product' ); ?>

После этого загружаете новую версию на FTP и проверяете показ сообщения после добавления товара в корзину WooCommerce. Я пробовал оба варианта кода — все работало хорошо. Если у вас есть еще какие-то вопросы по теме, пишите в комментариях, буду искать соответствующие решения. Плюс советую почитать заметку про вариативные товары что тоже может пригодиться в работе.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 3, средний балл: 7,00 из 7)
Загрузка...

категория Категории: WooCommerce;
теги Теги: , , , .

комментариев 20 к статье “Хаки для кнопки добавить в корзину WooCommerce”

  • Виктор   16.05.2017

    Здравствуйте!
    Спасибо вам за ваши советы по wordpress.

    У меня есть вопрос по теме. Когда я нажимаю на кнопку «Добавить в корзину», кнопка меняется на «Перейти в корзину». Как изменить надпись я разобрался. А вот как сделать чтобы кнопка не вела на страницу корзины т .е «my-site/cart» я не могу понять. Буду очень благодарен за подсказку.

  • Tod   16.05.2017

    Виктор, насколько я помню, по умолчанию кнопка себя так не ведет, то есть это уже какая-то специальная наработка в шаблоне. Первым делом советую изучить файлы custom-function.php, shop-functions.php, theme-init.php (все они в директории include могут быть).
    Хотя фишка может быть в каком-то другом месте, в таком случае нужно будет внимательно изучать код, возможно, пригодится программа WinGrep для поиска фраз (cart) или классов стилей в директории темы (предварительно скачивайте ее на компьютер). Если бы я встречался с такой фишкой, то подсказал бы точнее, а так остается только разбираться в шаблоне.

  • Евгений   23.05.2017

    У меня такая же проблема уже два дня мучаю. может это зависеть от обновления плагина вуу?
    Я сначала вместо $product->id поставил add_to_cart_url() и все заработало а потом к вечеру обновился и все слетело. Хотя странно по идее не должно. и теперь что бы не делал ничего не получается.

  • Tod   24.05.2017

    Евгений, код из статьи тестировался с WooCommerce < 3.x на последней версии не смотрел. Плюс я читал, что после апдейта там много чего поменялось, в том числе и глюки разные полезли. Поэтому еще не обновлялся.

  • Руслан   10.08.2017

    Евгений привествую тебя. как называется файл где ты заменил слово на кнокпе

  • Евгений   10.08.2017

    Руслан, я мучал файл function.php темы.

  • Ярослав   25.09.2017

    Добрый день, у меня такой вопрос, при добавлении товара в корзину он виден всем, то есть кто не зайдет на сайт корзина уже будет с товарами. Не подскажете как это исправить?

  • Tod   25.09.2017

    Ярослав, закрадывается подозрение, что это что-то с кэшированием — либо кэш в браузере, если вы пробуете на одном и том же компе, либо с плагином кэширования, если у вас такой установлен. У мены был похожий «глюк», но с заполнением информации в оформлении заказа, но чтобы содержимое корзины показывалось всем, такого не наблюдал. Попробуйте отключить все сторонние модули, связанные с магазином, кроме WooCommerce — поменяйте тему на базовую. Нужно как-то найти причину глюка.

  • Валерий   10.02.2018

    Добрый день, у меня такой вопрос. Я хочу вместо кнопки «в корзину» на home.page.php поставить иконку Font Awesome. Ваш код с этим прекрасно справляется, но теперь он перенаправляет на страницу товара. Подскажите, пожалуйста, какой href ввести вместо get_permalink( $product->id )).'» class=»fa fa-shopping-cart»>, чтобы перенаправило в корзину с добавлением товара. Или в ином случае, как и в каком месте WP можно добавить класс, для отображения иконки Font Awesome вместо кнопки «в корзину».

  • Tod   11.02.2018

    Валерий, данный хак меня ссылку добавления в корзину на страницу товара, поэтому так и работает. Вам может пригодиться статья про работу с Font Awesome в WordPress — там есть пример, где можно просто через CSS подставить нужную иконку без необходимости добавлять класс (второй пример с меню #menu-item).

  • Анастасия   04.04.2018

    добрый день! Добавила вывод сообщений на страницу. Они выводятся, но под это сообщение место не выделяется, и сообщение где то за товарами всплывает) Как исправить дело?

  • Tod   06.04.2018

    Анастасия, стиль отображение зависит от вашего шаблона. По идее, сообщение появляется в блоке с классом woocommerce-message, поэтому в style.css нужно добавить подходящее оформление для него… я бы попробовал сначала .woocommerce-message {position: relative;} или если не получится: .woocommerce-message {display: block}
    Также, как вариант, можно подсмотреть какие стили используются для других сообщений на сайте (например, описывающих ошибки при оплате) и скопировал бы их код.

  • Nikita   13.08.2018

    // Display variations dropdowns on shop page for variable products
    add_action( ‘woocommerce_before_shop_loop’, ‘handsome_bearded_guy_select_variations’ );
    function handsome_bearded_guy_select_variations() {
    remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
    add_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_single_add_to_cart’, 30 );
    }

    //from remi corson
    // Display variations dropdowns on shop page for variable products
    add_filter( ‘woocommerce_loop_add_to_cart_link’, ‘woo_display_variation_dropdown_on_shop_page’ );
    function woo_display_variation_dropdown_on_shop_page() {

    global $product;
    if( $product->is_type( ‘variable’ )) {

    $attribute_keys = array_keys( $product->get_variation_attributes() );
    ?>

    <form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="id ); ?>» data-product_variations=»get_available_variations() ) ) ?>»>

    get_available_variations() ) && false !== $product->get_available_variations() ) : ?>

    get_variation_attributes() as $attribute_name => $options ) : ?>

    <label for="»>

    get_variation_default_attribute( $attribute_name );
    wc_dropdown_variation_attribute_options( array( ‘options’ => $options, ‘attribute’ => $attribute_name, ‘product’ => $product, ‘selected’ => $selected ) );
    echo end( $attribute_keys ) === $attribute_name ? apply_filters( ‘woocommerce_reset_variations_link’, ‘‘ . __( ‘Clear’, ‘woocommerce’ ) . ‘‘ ) : »;
    ?>

    <?php } else {

    echo sprintf( '%s‘,
    esc_url( $product->add_to_cart_url() ),
    esc_attr( isset( $quantity ) ? $quantity : 1 ),
    esc_attr( $product->id ),
    esc_attr( $product->get_sku() ),
    esc_attr( isset( $class ) ? $class : ‘button’ ),
    esc_html( $product->add_to_cart_text() )
    );

    }

    }

    Есть такой код, он делает возможным выбирать вариативный товар со странички магазина, но есть проблема в том что кнопка перекидывает все равно на страничку товара и весь смысл функционала меняется можете подсказать как это исправить.. хотелось бы что б кнопка срабатывала как и обычная без обновлений и перекидываний, а просто загоралась галочка и товар добавлялся в корзину
    foodboss47.ru вот сайт

  • Tod   13.08.2018

    Nikita, лучше спросить об этом автора данного решения. Если честно, мне сложновато вникнуть в данный код.

  • Илья   11.12.2019

    Добрый день, Tod!
    Ай ни хэлп! Так как сам не могу справиться с задачей.
    Суть такова — Использую плагин WooCommerce, но стандартную карточку товара использовать не хочу.
    Сделал свою карточку товара и вывел через шорткод [add_to_cart id=»4068″ show_price=»false»] кнопку добавить в корзину.
    Проблема — Например товара в наличии 2. Когда нажимаешь на кнопку добавить в корзину 2 раза, то идет редирект на карточку товара, где всплывает оповещение, что столько товара нет в наличии.
    Вопрос — Как убрать этот редирект? В идеале — чтоб оповещение всплывало на этой же странице. Если не представляется такой возможности, то просто больше не добавлять в корзину и никакого редиректа.
    Спасибо!

  • Tod   11.12.2019

    Илья, если честно, я не работал с «товарами на складе», т.е. не использую эту опцию чтобы клиенты магазина лишний раз не видели подобных сообщений — товар либо есть, либо нет. Что касается редиректа, то эта опция есть в настройках модуля (Товары — Основное), ее можно выключить, но опять же я не в курсе какая логика работы Woocommerce, когда учитываются остатки продукции.

  • Катерина   19.12.2019

    Добрый день, Tod!
    Могли бы подсказать, после добавления товара, появляется поле «Вы добавили товар в корзину» и кнопка «Посмотреть корзину». Как эту кнопку можно скрыть или удалить?

    Указанный ниже код не срабатывает, выдает ошибку в нем.

    .added_to_cart.wc-forward{
    display: none !important;
    }
    И с изменением названия стиля кнопки «a.button.wc-forward» также не срабатывает.

  • Tod   19.12.2019

    Катерина, напишите на почту stod84@gmail.com и пришлите туда ссылку на сайт, надо глянуть. Скрыть проще всего через CSS либо разбираться как формируется этот блок.

  • Ольга   06.08.2020

    Tod, приветствую!
    Подскажите пожалуйста, как настроить кнопку «Добавить в корзину» для незарегистрированных пользователей на показ всплывающего окна или редирект на страницу регистрации/авторизации?
    Чтобы незарегистрированный пользователь не мог попасть по кнопке в Корзину до авторизации/регистрации на сайте.

    Спасибо!

  • Tod   10.08.2020

    Ольга, тут одним простым советом не обойтись — в функции «подмены» кнопки добавления в корзину вы, во-первых, добавляете условие/проверку является ли пользователь зарегистрированным — если нет, то вместо обычной кнопки показываете ему совсем другую. Второй момент — создать само всплывающее окно через Popup Maker, например, и добавить туда форму регистрации. ЛИБО (еще проще) вместо ссылки на модальное окно, подменяете линк добавить в корзину на ссылку на страницу регистрации/авторизации — посмотрите в настройках магазина URL этой страницы.

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


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости