Кастомизация кнопки Добавить в Корзину WooCommerce

Кнопка Добавить в Корзину — самый важный элемент в любом интернет-магазине.

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

В этой статье вы узнаете, как изменить кнопку Добавить с Корзину с помощью небольших снипетов для файла functions.php.

Вы можете добавить этот код в файл functions.php дочерней темы, или в текущую тему через специальный плагин, который добавит этот код в файл.

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

Если нужно, сделайте бэкап.

Содержание:

Как изменить текст на кнопке Добавить в Корзину

• Как дать каждой кнопке Добавить в Корзину уникальное название

Как добавить текст над или под кнопкой Добавить в Корзину
Как изменить цвет кнопки Добавить в Корзину

• В карточке товара
• На архивных страницах

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

Бонус. Как сделать кнопку Добавить в Корзину в любом месте сайта

Как изменить текст на кнопке Добавить в Корзину

С помощью этого снипета вы измените текст кнопки Добавить в Корзину в карточке товара и на всех архивных страницах, включая страницу Магазин /shop/:

Замените текст на кнопке в строке 5.

Если вы хотите изменить текст только в карточке товара, то удалите строку 2.

Если вы хотите изменить текст только на архивных страницах, но оставить стандартный текст в карточке товара, то удалите строку 1.

Как дать каждой кнопке Добавить в Корзину уникальное название

Если вы хотите дать одной или нескольким кнопкам В Корзину уникальное название, используйте этот снипет:

Замените ID товаров в строках 4 и 6 на ID своих товаров.

Если вы хотите изменить текст только в одном товаре, удалите строки 6 и 7.

Если вы хотите изменить названия кнопок в 3-х и более товарах, скопируйте строки 6 и 7 столько раз, сколько нужно, и замените ID товаров на свои.

Если товаров слишком много, лучше это сделать через массив.

Как добавить текст над или под кнопкой Добавить в Корзину

Вы можете добавить собственный текст, например, бесплатную доставку, политику возврата, гарантию или картинки над кнопкой В Корзину:

Чтобы добавить текст или картинку под кнопкой В Корзину, используйте этот снипет:

Замените текст (и стили, если нужно) в строке 4.

Замените текст (и стили, если нужно) в строке 4.

Как изменить цвет кнопки Добавить в Корзину

Если ваша тема не поддерживает изменение цвета кнопки В Корзину, то используйте эти снипеты для файла style.css.

Как изменить цвет кнопки Добавить в Корзину в карточке товара

Добавьте этот снипет во Внешний вид — Настроить — Дополнительные стили, или в style.css дочерней темы:

Замените цвет фона кнопки в строке 3, цвет текста в строке 4.

Как изменить цвет кнопки Добавить в Корзину на архивных страницах

Если вы хотите изменить цвет кнопки В Корзину только на Архивных страницах, добавьте этот снипет:

Замените цвет фона кнопки в строке 3, цвет текста в строке 4.

Как отключить или изменить уведомление «Вы добавили [Товар] в свою корзину»

После того, как посетитель добавил товар в корзину, Вукоммерс показывает сообщение “Вы отложили [Товар] в свою корзину”.

Если вы хотите отключить эти сообщения, добавьте этот снипет в functions.php:

Если вы хотите изменить текст этого сообщения, то используйте этот снипет:

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

Переходите в статью:

• Как изменить сообщение Товар добавлен в корзину WooCommerce

Как скрыть кнопку Добавить в корзину

Если вам нужно скрыть кнопку Добавить в Корзину на архивных страницах, или в карточке товара, то используйте эти снипеты для functions.php:

Чтобы скрыть кнопку В корзину на странице Магазин /shop/, добавьте этот снипет:

Чтобы скрыть кнопку В корзину в карточке товара, используйте этот снипет:

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

• Режим каталога WooCommerce
• Как отключить кнопку В корзину в WooCommerce

Бонус. Как сделать кнопку Добавить в Корзину в любом месте сайта

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

Для этого нужно знать ID товара:

Создайте обычную кнопку и дайте ей такую ссылку:

Замените ваш-сайт.ru на ваш домен, 65 на ID вашего товара и замените 3 на нужное количество товара.

Если вам нужно, чтобы по нажатию этой кнопки товар добавлялся в корзину, а посетитель перенаправлялся на страницу Оформления заказа, то дайте кнопке такую ссылку:

Замените ваш-сайт.ru на ваш домен, и замените 65 на ID вашего товара.

Вы можете создавать такие ссылки с другими параметрами на простой или вариативный товар, подробнее в этой статье:

• Как изменить поведение кнопки Добавить в Корзину WooCommerce

Читайте также:

1. Кастомизация кнопки Оформления заказа WooCommerce
2. Прямая ссылка на вариативный товар WooCommerce

Оставляйте комментарии.