WooCommerce: автоматическое выделение товаров, которых нет в наличии

Диагностика проблемы: почему важно выделять отсутствующие товары

Во многих интернет-магазинах на WooCommerce товары могут временно отсутствовать на складе. Если не выделять такие товары визуально, покупатели могут попытаться оформить заказ на них, что приведет к отменам и негативному опыту. Автоматическое выделение товаров без наличия помогает:

• Сделать магазин более информативным;
• Уменьшить количество проблемных заказов;
• Повысить доверие клиентов к сайту.

Как определить товары без наличия в WooCommerce

WooCommerce хранит статус наличия товара в метаполе _stock_status. Значение outofstock означает, что товар отсутствует. Также можно использовать метод $product->is_in_stock().

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

1. Добавляем CSS класс для отсутствующих товаров в списке товаров

Чтобы выделить отсутствующие товары, нужно добавить специальный CSS класс на элемент товара в цикле вывода продуктов.

add_filter('woocommerce_post_class', function($classes, $product) {
    if (!$product->is_in_stock()) {
        $classes[] = 'out-of-stock-product';
    }
    return $classes;
}, 10, 2);

2. Добавляем стили для выделения отсутствующих товаров

Пример стиля, который затемняет товар и добавляет метку «Нет в наличии» сверху.

.out-of-stock-product {
    opacity: 0.5;
    position: relative;
}
.out-of-stock-product::before {
    content: 'Нет в наличии';
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
    z-index: 10;
}

3. Добавляем метку на страницу отдельного товара

Чтобы покупатели видели статус и на странице товара, добавим метку в описание.

add_action('woocommerce_single_product_summary', function() {
    global $product;
    if (!$product->is_in_stock()) {
        echo '<p class="out-of-stock-label" style="color:red; font-weight:bold;">Товар временно отсутствует</p>';
    }
}, 20);

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

• Перейдите на страницу архива товаров (магазина) и убедитесь, что товары без наличия отображаются с полупрозрачным эффектом и меткой «Нет в наличии».
• Откройте страницу товара, которого нет в наличии — должна появиться красная метка «Товар временно отсутствует» под названием.
• Проверьте, что товары со статусом в наличии не получили дополнительного оформления.

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

• Класс не применяется к товарам: убедитесь, что фильтр woocommerce_post_class принимает два параметра (классы и продукт), и при добавлении функции указан приоритет и количество аргументов (10, 2).
• Стиль не отображается: проверьте, что CSS добавлен в тему или child-тему, и что файл стилей подключен корректно. Для отладки используйте инструменты разработчика браузера.
• Метка не отображается на странице товара: проверьте, что хук woocommerce_single_product_summary используется правильно и функция подключена в functions.php или в плагине.
• Проблемы с кэшированием: если используется кеширование (плагины или сервер), очистите кеш после внесения изменений.

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

• Используйте child-тему для внесения изменений в код, чтобы не потерять их при обновлении темы.
• Не добавляйте лишние запросы к базе — используйте методы объекта $product для определения статуса наличия.
• Минимизируйте CSS, добавляя только необходимые стили, чтобы не замедлять загрузку страниц.
• Тестируйте изменения на staging-сайте, чтобы не нарушить работу магазина в продакшене.

Сравнение вариантов реализации выделения отсутствующих товаров