Как изменить кнопку "В корзину" в WooCommerce

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

1. Изменение текста кнопки "В корзину"

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

Пример кода для изменения текста:

Откройте файл functions.php вашей темы.
Добавьте следующий код:

// Изменение текста кнопки "В корзину" на странице архива (категорий)
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text' );

// Изменение текста кнопки "В корзину" на странице товара
add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text' );

function custom_add_to_cart_text() {
  return __( 'Добавить в корзину', 'woocommerce' ); // Замените на нужный текст
}

На странице архива (категорий) WooCommerce использует фильтр woocommerce_product_add_to_cart_text.
На странице товара WooCommerce использует фильтр woocommerce_product_single_add_to_cart_text.

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

2. Изменение внешнего вида кнопки с помощью CSS

Для изменения стиля кнопки "В корзину" (например, цвета, размера текста или шрифта) можно воспользоваться CSS. Это можно сделать, добавив стили в раздел Внешний вид > Настроить > Дополнительные стили CSS или в файл стилей вашей темы.

Пример CSS для изменения кнопки:

/* Изменение стиля кнопки "В корзину" на страницах архива (категорий) */
.woocommerce ul.products li.product a.button {
  background-color: #ff4500; /* Цвет фона */
  color: #ffffff; /* Цвет текста */
  padding: 10px 20px; /* Размер кнопки */
  border-radius: 5px; /* Скругление углов */
  font-size: 16px; /* Размер шрифта */
  text-transform: uppercase; /* Верхний регистр текста */
}

.woocommerce ul.products li.product a.button:hover {
  background-color: #e63600; /* Цвет при наведении */
}

/* Изменение стиля кнопки на странице товара */
.single_add_to_cart_button {
  background-color: #0073aa;
  color: #fff;
  padding: 12px 24px;
  font-size: 18px;
  border-radius: 3px;
}

.single_add_to_cart_button:hover {
  background-color: #005c99;
}

Этот CSS изменяет стиль кнопки на страницах категорий и на странице товара:

Цвет кнопки (background-color).
Цвет текста (color).
Размер текста (font-size).
Скругление углов (border-radius).
Добавляет стиль при наведении (:hover).

3. Изменение поведения кнопки

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

Пример кода для перенаправления на страницу оформления заказа:

Добавьте этот код в файл functions.php вашей темы:

// Перенаправление на страницу оформления заказа после добавления товара в корзину
add_filter( 'woocommerce_add_to_cart_redirect', 'redirect_to_checkout' );

function redirect_to_checkout() {
  return wc_get_checkout_url(); // Перенаправляем на страницу оформления заказа
}

Этот код перенаправляет пользователя на страницу оформления заказа сразу после нажатия кнопки "В корзину".

4. Добавление иконки на кнопку "В корзину"

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

Пример: Добавление иконки через CSS

Если на вашем сайте подключена библиотека FontAwesome (или любая другая), вы можете добавить иконку к кнопке с помощью CSS.

/* Добавление иконки к кнопке "В корзину" */
.woocommerce ul.products li.product a.button:before {
  content: '\f07a'; /* Иконка корзины из FontAwesome */
  font-family: FontAwesome; /* Убедитесь, что FontAwesome подключен */
  margin-right: 5px;
}

.single_add_to_cart_button:before {
  content: '\f07a';
  font-family: FontAwesome;
  margin-right: 5px;
}

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

5. Изменение кнопки для определённых категорий

Если вам нужно изменить кнопку "В корзину" только для определённых категорий товаров, можно использовать условные теги.

Пример кода для изменения кнопки в определённой категории:

Добавьте следующий код в файл functions.php:

// Изменение текста кнопки для определённой категории товаров
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text_for_category' );

function custom_add_to_cart_text_for_category() {
  global $product;

  if ( has_term( 'odezhda', 'product_cat', $product->get_id() ) ) { // Замените 'odezhda' на slug категории
    return __( 'Добавить одежду', 'woocommerce' ); // Новый текст для категории "Одежда"
  }

  return __( 'В корзину', 'woocommerce' ); // Текст для других товаров
}

Этот код изменяет текст кнопки "В корзину" только для товаров в категории с ярлыком odezhda. Вы можете указать другой ярлык категории и текст кнопки.

6. Полное удаление кнопки "В корзину"

Если вы хотите полностью убрать кнопку "В корзину" (например, если магазин работает как каталог без возможности покупки), можно использовать следующий код:

Добавьте код в файл functions.php:

// Убираем кнопку "В корзину" на всех страницах
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

Этот код убирает кнопку "В корзину" с страниц товаров и категорий, превращая магазин в каталог.

Вы можете кастомизировать кнопку "В корзину" в WooCommerce различными способами: изменить её текст, внешний вид, добавить иконку или изменить поведение при нажатии. Используя CSS и хуки WooCommerce, можно создать уникальный пользовательский интерфейс и настроить функциональность кнопки в зависимости от ваших требований.

Изменить кнопку в корзину WooCommerce