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

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

Эти кнопки «Добавить в корзину» WooCommerce визуально привлекательны и в значительной степени способствуют успеху интернет-магазинов, поскольку напрямую влияют на продажи.

В этом блоге мы узнаем о настройке пользовательских URL-адресов/кнопок «Добавить в корзину» WooCommerce, настройке кнопок «Добавить в корзину» с помощью кода и плагинов и замене кнопок «Добавить в корзину» кнопками «Купить сейчас» для прямой проверки.

Давайте начнем.

Кнопка / URL-адрес WooCommerce по умолчанию «Добавить в корзину»

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

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

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

Как создать собственный URL-адрес добавления в корзину?

Здесь вы можете просто заменить URL-адрес по умолчанию для кнопки, а все остальное уже сделано. Этот метод полезен, когда вы хотите разместить кнопки добавления в корзину на настраиваемых целевых страницах, таблицах с ценами, сообщениях в блогах и т. д.

Давайте посмотрим, как создавать собственные HTML-ссылки/кнопки «Добавить в корзину» WooCommerce для простых и вариативных продуктов.

URL-адрес добавления в корзину для простых продуктов

Вы можете легко добавлять простые продукты в корзину с помощью пользовательского URL-адреса.

Перейдите в WooCommerce > Products . Наведите указатель мыши на название продукта, чтобы найти идентификатор продукта, и используйте следующую ссылку:
https://yourdomain.com/?add-to-cart=X&quantity=Y .

Очевидно, замените доменное имя и идентификатор продукта на свой собственный домен и желаемый идентификатор продукта соответственно.

Это добавит один товар в корзину. Чтобы добавить тот же продукт в большем количестве, используйте этот URL:
https://вашдомен.com/ ?add-to-cart=1168&quantity=5 .

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

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

Таким образом, URL-адрес в этом случае будет таким:
https://вашдомен.com/checkout/ ?add-to-cart=1168&quantity=1 .

Помните, что для того, чтобы это работало, вы должны отметить параметр «Включить кнопки AJAX для добавления в корзину в архивах» в разделе WooCommerce > Settings > Products > General , а также отключить «Перенаправление на страницу корзины после успешного добавления».

Вместо оформления заказа, если вы хотите перенаправить пользователей на другие страницы, кроме страницы оформления заказа, URL-адрес будет таким:
https://yourdomain.com/your_custom_page/?add-to-cart=1168&quantity=1 .

URL-адрес добавления в корзину для переменных продуктов

Это также очень легко. Как и в случае с простыми продуктами, вам необходимо заменить идентификатор продукта идентификатором варианта продукта.

Перейдите в WooCommerce > Products . Выберите переменный продукт. Нажмите на вкладку « Variations ». Вы найдете идентификаторы продуктов, как показано. Когда у вас есть идентификаторы, создание URL-адресов — это прогулка по парку.

Чтобы добавить вариант продукта с количеством один, URL-адрес будет следующим:
https://вашдомен.com/ ?add-to-cart=1089&quantity=1 .

Чтобы добавить вариант продукта с количеством пять, URL будет следующим:
https://yourdomain.com/?add-to-cart=1089&quantity=5 .

Чтобы добавить вариант продукта с количеством один в корзину и перенаправить на страницу оформления заказа, URL-адрес будет таким:
https://вашдомен.com/checkout/ ?add-to-cart=1089&quantity=1 .

Чтобы добавить вариант продукта с количеством один в корзину и перенаправить на любую другую страницу, кроме страницы оформления заказа, URL-адрес будет таким:
https://yourdomain.com/your_custom_page/?add-to-cart=1089&quantity=1 .

Достаточно просто? Перейдем к настройке кнопки «Добавить в корзину».

Почему вы настраиваете кнопку «Добавить в корзину» WooCommerce по умолчанию?

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

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

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

. Этот метод особенно хорошо работает в магазинах, продающих только один товар, или в случае, если покупатели хотят приобрести один товар в магазине, где продаются несколько товаров.

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

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

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

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

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

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

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

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

• Добавить в сумку
• Добавить товар(ы) в корзину
• Добавить в мою корзину
• Добавить в мою корзину

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

1. Перейдите в WordPress Admin panel > Appearance > Theme Editor тем.
2. Откройте файл Theme Functions/functions.php.
3. Добавьте следующий код в конец файла function.php.

// Чтобы изменить текст добавления в корзину на странице одного продукта
add_filter('woocommerce_product_single_add_to_cart_text', 'storeapps_custom_single_add_to_cart_text');
функция storeapps_custom_single_add_to_cart_text() {
    return __('Добавить в корзину', 'woocommerce');
}
// Чтобы изменить текст добавления в корзину на странице магазина
add_filter('woocommerce_product_add_to_cart_text', 'storeapps_custom_product_add_to_cart_text');
функция storeapps_custom_product_add_to_cart_text() {
    return __('Добавить в корзину', 'woocommerce');
}

Как видите, этот код предназначен для отдельных товаров и страницы коллекции. Это позволит вам изменить текст на « Add To Bag в корзину». Однако вы можете превратить его в любой другой пользовательский текст, который вы хотите, заменив все фразы «Добавить в корзину» в коде нужными текстами.

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

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

Цвет кнопки «Добавить в корзину» играет важную роль в побуждении клиентов к покупке товаров. Убедитесь, что цвет кнопки соответствует цветовой схеме веб-сайта.

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

Чтобы изменить цвет кнопки «Добавить в корзину» WooCommerce, вам нужно добавить фрагмент кода CSS в таблицу стилей вашей темы (в основном известную как файл style.css). Вы можете получить к нему доступ, перейдя в WordPress Admin panel > Appearance > Customizer .

Затем вы перейдете в новое окно со списком опций. Здесь у вас может быть три способа изменить цвет кнопки «Добавить в корзину».

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

Первый способ — перейти в раздел « Buttons > Background Color ».

Здесь вы можете изменить цвет фона и цвет текста кнопки «Добавить в корзину». Но с этой опцией вы измените цвет всех кнопок на всех страницах.

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

Второй способ — перейти к архиву магазина/единому продукту. С помощью опции «Архив магазина» вы можете не только изменить цвет фона и текста, но и настроить положение кнопки «Добавить в корзину», отображаемой на страницах архива магазина WooCommerce.

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

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

Третий — это раздел «Дополнительные CSS», в который можно добавить собственный код для изменения цвета кнопки «Добавить в корзину» WooCommerce.

Скопируйте приведенный ниже код и вставьте его в раздел «Администрирование WordPress admin > Customizer > Additional CSS » или в файл «style.css» и измените цвета на нужные.

/* Кнопка «Добавить в корзину» на странице одного товара */
.single-product .product .single_add_to_cart_button.button {
    цвет фона: #0c7815;
    цвет: #FFFFFF;
}
/* Кнопка «Добавить в корзину» в архивах (например, магазин, страница категории) */
.woocommerce .product .add_to_cart_button.button {
    цвет фона: #0c7815;
    цвет: #FFFFFF;
}

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

Размещение кнопок «Добавить в корзину» на страницах сайта с помощью шорткода

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

WooCommerce поставляется со встроенным [add_to_cart] , чтобы вы могли вставить кнопку для определенного продукта в любом месте вашего интернет-магазина. Вам просто нужно добавить идентификатор и/или SKU продукта, для которого вы хотите отобразить кнопку «Добавить в корзину».

Кроме того, вы можете указать цену товара: [add_to_cart sku="woo-vneck-tee" show_price="true"] .

Для простых продуктов будет отображаться кнопка добавления в корзину. Но кнопка « Select options » будет отображаться для переменных продуктов.

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

Другой способ настроить кнопку «Добавить в корзину» в WooCommerce — добавить текст до или после кнопки «Добавить в корзину» на отдельных страницах продукта.

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

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

Например, вы можете добавить текст «Бесплатная доставка», используя оператор echo.

add_filter('woocommerce_loop_add_to_cart_link', 'storeapps_before_after_btn', 10, 3);
add_action('woocommerce_before_add_to_cart_button', 'storeapps_before_add_to_cart_btn');
функция storeapp_before_add_to_cart_btn(){
     echo "Бесплатная доставка";
 }

Скопируйте приведенный выше код и вставьте его в файл functions.php темы файла, затем нажмите «Обновить файл», чтобы сохранить все.

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

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

add_action('woocommerce_after_add_to_cart_button', 'storeapps_after_add_to_cart_btn');
функция content_after_addtocart_button_func() {
 // Эхо содержимого.
 эхо '
(*Свяжитесь с нами для оптовой покупки)
';
 }

Скопируйте и вставьте этот код в файл, а затем сохраните его.

Настройте кнопку «Добавить в корзину» со значком

Помимо изменения текста, вы можете заменить текст на значок или добавить значок рядом с текстом кнопки. Это возможно с помощью некоторых плагинов, упомянутых ниже.

Эти плагины также помогут вам настроить кнопки без кода.

Плагины кнопки «Добавить в корзину» для WooCommerce

Написание кода — один из способов создания кнопок «Добавить в корзину». Однако, если вы не разбираетесь в кодировании, лучше всего использовать готовые плагины для настройки кнопок. Вот два наиболее широко используемых плагина.

Окончательная пользовательская кнопка «Добавить в корзину» для WooCommerce

Этот плагин предлагает дополнительные настройки для создания кнопки, которая обязательно привлечет внимание клиентов.

Функции:

• Настройте текст кнопки для простых продуктов, переменных продуктов и сгруппированных продуктов.
• Настройте цвет фона кнопки
• Установка цвета при наведении курсора на кнопку
• Настройка цвета, размера и радиуса границы кнопки
• Добавление значков корзины на кнопку
• Установка градиента в качестве фона при наведении курсора на кнопку
• Использование изображений в качестве кнопки
• Настройка поля количества товара с помощью значков добавления и вычитания
• Создание собственных стилей кнопок на сайте
• Этот плагин также совместим со всеми темами WordPress.

Некоторые функции доступны только в версии Pro.

Скачать сейчас

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

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

Особенности :

• Настройте текст на кнопке «Добавить в корзину».
• Поместите значок рядом с текстом на кнопке.
• Отображать значок корзины вместо всего текста.
• Совместим с большинством тем WordPress.

Скачать сейчас

Как заменить кнопку «Добавить в корзину» на кнопку «Купить сейчас»?

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

Cashier от StoreApps поможет вам создать кнопку «Купить сейчас» всего за несколько кликов.

Это отличный плагин для оптимизации процесса оформления заказа WooCommerce. Вы можете настроить магазин электронной коммерции для:

• Прямая оплата с помощью кнопок быстрой покупки (пропустить корзину и перейти к оформлению).
• Оформление заказа в один клик с помощью кнопок быстрой покупки (без корзины, оформления заказа, экранов оплаты).
• Оформление заказа на одной странице со всей информацией о заказах, платежах и доставке на одной странице.

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

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

Плагин Cashier также совместим с подписками WooCommerce.

Получить плагин кассира

Вывод

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

С помощью кода и плагинов, упомянутых здесь, вы можете легко настроить кнопки «Добавить в корзину» WooCommerce в соответствии с требованиями и повысить конверсию.

Я надеюсь, что вы нашли этот блог полезным. Любые вопросы или предложения, поделитесь ими через поле для комментариев.