Кнопка в корзину WooCommerce

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

В этом руководстве мы рассмотрим, как настроить и кастомизировать кнопку «Добавить в корзину» в WooCommerce.

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

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

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

// Изменение текста кнопки на странице товара
add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_single_add_to_cart_text' );
function custom_single_add_to_cart_text() {
  return __( 'Купить сейчас', 'woocommerce' ); // Замените текст
}

// Изменение текста кнопки в каталоге товаров
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_archive_add_to_cart_text' );
function custom_archive_add_to_cart_text() {
  return __( 'В корзину', 'woocommerce' ); // Замените текст
}

Этот код изменит текст кнопки как на странице товара, так и на страницах архивов (каталогах).

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

Вы можете изменить внешний вид кнопки с помощью кастомных стилей CSS. Добавьте следующий код в «Внешний вид» > «Настроить» > «Дополнительные стили CSS»:

/* Стили для кнопки на странице товара */
.single_add_to_cart_button {
  background-color: #0073aa;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-transform: uppercase;
  font-size: 16px;
}
.single_add_to_cart_button:hover {
  background-color: #005a8c;
}

/* Стили для кнопки в каталоге */
.woocommerce a.button.add_to_cart_button {
  background-color: #ff6600;
  color: #fff;
  border-radius: 5px;
  padding: 10px 15px;
}
.woocommerce a.button.add_to_cart_button:hover {
  background-color: #e65c00;
}

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

Перенаправление на страницу корзины

1. Перейдите в «WooCommerce» > «Настройки» > «Продукты» > «Отображение»
2. Активируйте настройку «Перенаправить в корзину после успешного добавления товара»
3. Сохраните изменения

Вывод сообщения после добавления товара

Добавьте этот код в functions.php:

add_filter( 'wc_add_to_cart_message_html', 'custom_add_to_cart_message', 10, 2 );
function custom_add_to_cart_message( $message, $product_id ) {
  $product = wc_get_product( $product_id );
  $message = sprintf( __( 'Товар %s успешно добавлен в корзину! Перейдите к оформлению заказа.', 'woocommerce' ),
    $product->get_name(),
    wc_get_checkout_url()
  );
  return $message;
}

4. Добавление AJAX для кнопки «Добавить в корзину»

Чтобы добавить товары в корзину без перезагрузки страницы:

1. Перейдите в «WooCommerce» > «Настройки» > «Продукты» > «Отображение»
2. Включите опцию «Использовать AJAX для кнопок "Добавить в корзину" на страницах архивов»
3. Сохраните изменения

5. Использование плагинов для кастомизации кнопки

6. Динамическое отображение кнопки

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

add_filter( 'woocommerce_is_purchasable', 'custom_not_purchasable' );
function custom_not_purchasable( $purchasable, $product ) {
  if ( ! $product->is_in_stock() ) {
    return false; // Отключает кнопку, если товара нет в наличии
  }
  return $purchasable;
}

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