Чтобы создать собственный баннер или ленту продажи в 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):
- Установите и активируйте плагин ACF.
- Добавьте новую группу настраиваемых полей с полем «Продажа» типа «Истина/Ложь».
- Назначьте группу полей нужному местоположению (например, продуктам).
- Получите значение поля и отобразите баннер продажи соответствующим образом:
/* 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');