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

 add_action('woocommerce_single_product_summary', 'QL_add_text_above_add_to_cart', 20);
функция 'QL_add_text_above_add_to_cart'() {
  echo '14-дневная гарантия возврата денег';
}

С другой стороны, вы также можете добавить текст под кнопкой «Добавить в корзину» . Это может быть полезно, чтобы уведомить покупателей, например, о скидках на оптовые покупки. Чтобы добавить текст под кнопкой «Добавить в корзину», вы можете использовать этот фрагмент кода:

 add_action('woocommerce_after_add_to_cart_button', 'QL_add_text_under_add_to_cart');
функция QL_add_text_under_add_to_cart() {
  echo 'Свяжитесь с нами для оптовых закупок';
} 

Как видите, это очень простые изменения, которые вы можете сделать, чтобы быстро повысить коэффициент конверсии.

3) Измените цвет кнопки «Добавить в корзину».

Теперь давайте посмотрим, как отредактировать кнопку «Добавить в корзину», изменив ее цвет. Несмотря на то, что большинство тем WordPress и WooCommerce имеют цвета кнопок по умолчанию, вы должны убедиться, что они соответствуют стилю вашего магазина.

Чтобы настроить цвет кнопки «Добавить в корзину» в WooCommerce, вам нужно добавить фрагмент кода CSS в файл style.css . Вы можете получить к нему доступ с помощью FTP-клиента или из панели инструментов WordPress, выбрав « Внешний вид» > «Настроить» > «Дополнительный CSS» . Тут есть два варианта:

1. Изменение цвета кнопки «Добавить в корзину» для отдельных товаров
2. Изменить цвет кнопки «Добавить в корзину» на страницах архива

3.1) Изменить цвет отдельных продуктов

Вставьте этот код в файл style.css и измените цвета на нужные. В этом случае у нас будет красный фон и серебристый текст.

 .single-product .product .single_add_to_cart_button.button {
цвет фона: #FF0000;
цвет: #C0C0C0;
}

3.2) Изменить цвет кнопки «Добавить в корзину» на странице «Архив»

Чтобы настроить кнопку «Добавить в корзину» и изменить ее цвет на странице архива WooCommerce, используйте этот код и измените шестнадцатеричные коды на те, которые подходят для вашего магазина.

 .woocommerce .product .add_to_cart_button.button {
цвет фона: #FF0000;
цвет: #C0C0C0;
} 

4) Удалите кнопку «Добавить в корзину» и добавьте кнопку «Прямая покупка» на странице магазина.

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

В этом разделе мы покажем вам, как удалить кнопку «Добавить в корзину» и заменить ее кнопкой прямой покупки с помощью Direct Checkout для WooCommerce . Этот плагин имеет как бесплатную, так и премиум-версию и имеет множество функций, которые помогут вам упростить оформление заказа. Кроме того, он позволяет пропустить страницу корзины и перенаправить пользователей прямо на страницу оформления заказа , что сокращает процесс покупки. Итак, давайте посмотрим, как полностью убрать кнопку «Добавить в корзину» и заменить ее кнопкой прямой покупки.

Изменить функцию кнопки «Добавить в корзину»

Во-первых, вам нужно установить и активировать Direct Checkout. Вы можете скачать бесплатную версию по этой ссылке или посмотреть один из премиальных планов , которые начинаются с 19 долларов США (единовременный платеж).

После активации плагина на панели инструментов WordPress перейдите в WooCommerce > Прямая оплата > Общие и заполните параметры следующим образом:

Для получения дополнительной информации о том, как настроить страницу магазина WooCommerce, ознакомьтесь с этим полным руководством.

Измените текст кнопки «Добавить в корзину».

После настройки параметров на вкладке «Общие» кнопка «Добавить в корзину» перенаправит пользователей на страницу оформления заказа. Однако вам также следует отредактировать текст кнопки, поскольку вы изменили ее функцию. Кнопка больше не добавляет товары в корзину, поэтому лучше изменить ее, например, на что-то вроде «Купить сейчас». Для этого перейдите на вкладку « Архивы » и заполните параметры следующим образом: Здесь вы можете изменить текст кнопки для определенных типов продуктов. Мы применим изменения ко всем типам товаров, выбрав их все в соответствующем поле. После этого пришло время проверить переднюю часть.

Как видите, мы настроили кнопку «Добавить в корзину» в нашем магазине WooCommerce и заменили кнопку «Добавить в корзину» кнопкой «Купить сейчас », которая перенаправит покупателей со страницы магазина прямо на страницу оформления заказа. Кроме того, мы полностью убрали функцию корзины из нашего магазина.

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

5) Настройте кнопку «Добавить в корзину» и добавьте кнопку «Прямая покупка» на страницу продукта.

Наконец, мы можем сделать что-то подобное и настроить кнопку «Добавить в корзину», чтобы перенаправлять пользователей со страницы продукта на страницу оформления заказа .

Таким образом, вы можете легко создать пользовательскую кнопку «Добавить в корзину» в WooCommerce как на странице «Магазин», так и на странице «Продукты». И самое приятное то, что вы можете иметь разные кнопки на каждой странице.

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

Помимо настройки кнопки, вы также можете редактировать сообщение «Добавлено в корзину». Самый простой способ сделать это — просто изменить сообщение, вставив следующий скрипт в файл functions.php .

 add_filter('wc_add_to_cart_message_html', 'quadlayers_custom_add_to_cart_message');
функция quadlayers_custom_add_to_cart_message() {
   $message = 'Ваш товар добавлен в корзину. Спасибо за покупку!' ;
   вернуть $сообщение;
}

В этом случае мы меняем сообщение на Ваш товар добавлен в корзину. Спасибо за покупку!

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

 add_filter('wc_add_to_cart_message', 'quadlayers_custom_wc_add_to_cart_message', 10, 2); 
 
функция quadlayers_custom_wc_add_to_cart_message($message, $product_id) { 
    $message = sprintf(esc_html__('%s добавлен в вашу корзину. Спасибо за покупку!','tm-organik'), get_the_title( $product_id ) ); 
    вернуть $сообщение; 
} 

Это всего лишь несколько примеров, но вы можете сделать гораздо больше и добавить ссылки и кнопки в сообщение. Для получения дополнительной информации ознакомьтесь с нашим руководством о том, как изменить сообщение о добавлении в корзину WooCommerce.

Бонус: изменение текста кнопки «Добавить в корзину» для разных категорий.

Теперь предположим, что у вас есть разные категории продуктов, и вы хотите иметь настраиваемые кнопки «Добавить в корзину» для каждой категории. Например, вы можете захотеть иметь кнопку с надписью «Купить сейчас» для категории продуктов 1, но отображать текст «Загрузить» для категории 2.

Для этого вы должны использовать ту же функцию, которую мы использовали в пункте 1. add_filter('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');

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

if($category=='category 1'){
return __('Buy Now', 'woocommerce');
}elseif($category=='category 2'){
return __('Download', 'woocommerce');
}else{
return __('Default text', 'woocommerce');
}

Моя кнопка «Добавить в корзину» не работает. Что я могу сделать?

Может быть несколько причин, по которым кнопка «Добавить в корзину» может не работать. Наиболее распространенные из них:

• Несовместимость плагина/темы
• Товары с неполной информацией
• Проблемы с кешем
• Конечные точки оформления заказа
• Постоянные ссылки
• Проблемы ModSecurity
• И больше

Чтобы узнать, как решить каждую из этих проблем, ознакомьтесь с нашим руководством о том, как исправить кнопку «Добавить в корзину».

ПРИМЕЧАНИЯ

• Настройки, которые вы сохраняете в разделе « Архивы » панели параметров плагина, будут применяться к базовым страницам категорий «Магазин» и «Продукт», а настройки в разделе «Продукты» будут применяться только к страницам «Продукт».
• Для этой демонстрации мы использовали тему Storefront, но вы можете использовать любую тему, совместимую с WooCommerce.
• Несмотря на то, что большинство тем интегрируются без каких-либо проблем, некоторые темы могут изменять функции WooCommerce по умолчанию и вызывать проблемы при использовании Direct Checkout.
• Мы рассмотрели некоторые основные функции Direct Checkout. Чтобы узнать о дополнительных функциях, ознакомьтесь с планами Premium, которые помогут вам вывести свой магазин на новый уровень.

Вывод

В целом, настройка кнопки «Добавить в корзину» может оказать большое влияние на ваш бизнес. Вот почему мы рекомендуем вам адаптировать его к потребностям вашего магазина. В этом руководстве вы узнали о различных способах настройки кнопки «Добавить в корзину» как программно, так и с помощью плагинов:

• Измените текст кнопки «Добавить в корзину».
• Добавьте текст над или под кнопкой «Добавить в корзину».
• Изменить цвет кнопки «Добавить в корзину»
• Удалите кнопку «Добавить в корзину» и добавьте кнопку «Прямая покупка» на странице магазина.
• Настройте кнопку «Добавить в корзину» и добавьте кнопку «Прямая покупка» на страницу продукта.