Как добавить кнопку в товар WooCommerce: полное руководство с примерами кода

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

1. Добавление кнопки через код

Для добавления кнопки на страницу товара WooCommerce вам потребуется использовать хуки и добавить код в файл functions.php вашей темы.

Пример: Добавление кнопки под ценой товара

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

// Добавляем кнопку под ценой на странице товара
add_action( 'woocommerce_single_product_summary', 'custom_button_under_price', 15 );

function custom_button_under_price() {
  echo '<a href="#" class="button custom-button">Моя кнопка</a>';
}

Этот код добавляет кнопку с текстом "Моя кнопка" под ценой на странице товара. Кнопка имеет класс button, который используется для стилизации кнопок в WooCommerce. Вы можете изменить текст кнопки и её действие, указав нужный URL-адрес в атрибуте href.

Пример: Добавление кнопки под описанием товара

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

// Добавляем кнопку под описанием товара
add_action( 'woocommerce_single_product_summary', 'custom_button_after_description', 35 );

function custom_button_after_description() {
  echo '<a href="#" class="button custom-button">Перейти на другую страницу</a>';
}

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

2. Кастомизация кнопки

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

Пример CSS для кастомной кнопки:

Перейдите в Внешний вид > Настроить > Дополнительные стили CSS.
Добавьте следующий CSS-код для стилизации кнопки:

/* Стилизация кастомной кнопки на странице товара */
a.custom-button {
  background-color: #ff4500;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 16px;
  display: inline-block;
}

a.custom-button:hover {
  background-color: #e63600;
}

Этот код стилизует кнопку: делает её ярко-оранжевой с белым текстом и добавляет округлые углы. При наведении цвет кнопки меняется на более тёмный.

Пример кнопки с такими стилями: Моя кнопка

3. Добавление кнопки "Купить в один клик"

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

Пример кнопки "Купить в один клик":

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

// Добавляем кнопку "Купить в один клик" на страницу товара
add_action( 'woocommerce_single_product_summary', 'quick_purchase_button', 20 );

function quick_purchase_button() {
  global $product;
  $checkout_url = wc_get_checkout_url();
  echo '<a href="' . esc_url( $checkout_url . '?add-to-cart=' . $product->get_id() ) . '" class="button buy-now-button">Купить в один клик</a>';
}

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

4. Добавление кнопки для внешних ссылок

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

// Добавляем кнопку для перехода на внешний сайт
add_action( 'woocommerce_single_product_summary', 'external_link_button', 25 );

function external_link_button() {
  echo '<a href="https://example.com" class="button external-button" target="_blank">Посетить сайт производителя</a>';
}

Этот код добавляет кнопку с внешней ссылкой на сайт производителя. Кнопка открывается в новой вкладке браузера благодаря атрибуту target="_blank".

5. Добавление кнопки в карточку товара на странице каталога

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

// Добавляем кнопку в карточку товара на странице каталога
add_action( 'woocommerce_after_shop_loop_item', 'custom_button_in_catalog', 15 );

function custom_button_in_catalog() {
  echo '<a href="#" class="button catalog-button">Подробнее о товаре</a>';
}

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

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

Добавить кнопку в товар WooCommerce