Создайте индивидуальные рекламные баннеры в WooCommerce с примерами кода

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

Метод 1: использование CSS
Вы можете добавить собственный баннер или пояс продажи с помощью CSS. Сначала вам нужно определить класс CSS для баннера, а затем применить его к продукту или элементу-контейнеру продукта. Вот пример:

/* CSS */
.sale-banner {
  position: relative;
  display: inline-block;
  background-color: #ff0000;
  color: #ffffff;
  font-weight: bold;
  padding: 5px 10px;
}
/* Apply the class to the product */
<div class="sale-banner">Sale</div>

Метод 2: использование хуков WooCommerce
Другой подход — использовать хуки WooCommerce для динамического добавления баннера продажи. Вы можете добавить следующий код в файл functions.phpвашей темы:

/* PHP */
function add_sale_banner() {
  global $product;
  if ($product->is_on_sale()) {
    echo '<div class="sale-banner">Sale</div>';
  }
}
add_action('woocommerce_before_shop_loop_item_title', 'add_sale_banner');
add_action('woocommerce_before_single_product_summary', 'add_sale_banner');

Метод 3: использование настраиваемых полей
Вы также можете использовать настраиваемые поля в WooCommerce, чтобы указать, продается ли продукт или нет. В этом примере мы будем использовать плагин расширенных настраиваемых полей (ACF):

  1. Установите и активируйте плагин ACF.
  2. Добавьте новую группу настраиваемых полей с полем «Продажа» типа «Истина/Ложь».
  3. Назначьте группу полей нужному местоположению (например, продуктам).
  4. Получите значение поля и отобразите баннер продажи соответствующим образом:
/* PHP */
function add_sale_banner() {
  global $product;
  $is_on_sale = get_field('sale', $product->get_id());
  if ($is_on_sale) {
    echo '<div class="sale-banner">Sale</div>';
  }
}
add_action('woocommerce_before_shop_loop_item_title', 'add_sale_banner');
add_action('woocommerce_before_single_product_summary', 'add_sale_banner');