WooCommerce: как добавить динамические бейджи для товаров на распродаже и с низким запасом

Диагностика задачи: зачем нужны динамические бейджи на товарах WooCommerce

В интернет-магазинах важно привлекать внимание пользователей к товарам на распродаже и тем, у которых заканчивается запас. Стандартный WooCommerce выводит бейдж «Sale!» на товары со скидкой, но он не всегда настраивается под разные сценарии. Бейджи для низкого остатка обычно отсутствуют в дефолтном функционале.

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

Пошаговое решение: как добавить кастомные бейджи для распродаж и низкого запаса

1. Добавление бейджа для товаров на распродаже

WooCommerce уже выводит классический бейдж «Sale», но его можно кастомизировать, изменив текст или стиль. Для замены текста бейджа добавьте в functions.php вашей темы следующий код:

add_filter('woocommerce_sale_flash', 'custom_woocommerce_sale_flash', 10, 3);
function custom_woocommerce_sale_flash($html, $post, $product) {
    return '<span class="onsale">Скидка!</span>';
}

2. Добавление бейджа для товаров с низким запасом

Для вывода бейджа у товаров, у которых запас меньше определённого порога, воспользуемся хуком woocommerce_before_shop_loop_item_title или woocommerce_before_single_product_summary. Ниже пример для каталога и страницы товара:

add_action('woocommerce_before_shop_loop_item_title', 'add_low_stock_badge', 15);
add_action('woocommerce_before_single_product_summary', 'add_low_stock_badge', 15);

function add_low_stock_badge() {
    global $product;
    if (!$product->managing_stock()) return;
    
    $stock_quantity = $product->get_stock_quantity();
    $threshold = 5; // Порог для низкого запаса
    if ($stock_quantity <= $threshold && $stock_quantity > 0) {
        echo '<span class="low-stock-badge" style="color: #fff; background: #e74c3c; padding: 2px 6px; font-weight: bold; border-radius: 3px; font-size: 12px;">Мало товара: ' . $stock_quantity . '</span>';
    }
}

Обратите внимание, что функция проверяет, что у товара включён учёт запасов (managing_stock()) и выводит количество остатка.

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

• Откройте страницу каталога WooCommerce — у товаров со скидкой должен отображаться бейдж с текстом «Скидка!» вместо стандартного «Sale!».
• Для товаров с остатком 5 и меньше (и больше 0) должен появиться красный бейдж «Мало товара: N».
• Проверьте, что товары без управления запасами и с запасом больше 5 бейдж не показывают.

Частые ошибки и как их исправить

• Бейдж не отображается: убедитесь, что используете правильный хук и что в теме нет переопределения вывода бейджей.
• Неправильный запас: проверьте, что у товара включён учёт запасов (в настройках товара в админке).
• Стили бейджей не применяются: добавьте CSS в файл стилей вашей темы или используйте встроенный стиль, как показано в коде.
• Конфликт с кэшированием: после внесения изменений очистите кэш сайта и браузера.

Практические советы по безопасности и производительности

• Минимизируйте количество SQL-запросов — используйте свойства объекта $product, а не дополнительные запросы к базе.
• Выносите стили бейджей в CSS-файл темы для лучшей производительности и удобства поддержки.
• Если используете кэширование страниц, исключите страницы каталога и товара из кэширования или используйте AJAX для динамического обновления бейджей с остатком.

Сравнение вариантов реализации бейджей