Мар
25
8

Хаки для кнопки добавить в корзину 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. Я пробовал оба варианта кода — все работало хорошо. Если у вас есть еще какие-то вопросы по теме, пишите в комментариях, буду искать соответствующие решения. Плюс советую почитать заметку про вариативные товары что тоже может пригодиться в работе.

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

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

комментариев 8 к статье “Хаки для кнопки добавить в корзину 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 — поменяйте тему на базовую. Нужно как-то найти причину глюка.

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


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

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

Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

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

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

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