Qudrat Qodirov

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

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

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

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

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

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

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


 

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

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

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

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

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

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

или

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

 

Обсуждение закрыто.