Как добавить бейджи «Новинка» и «Скоро в продаже» в WooCommerce

В этом уроке я покажу, как с помощью простого PHP-кода добавить на витрину интернет-магазина на WooCommerce стильные бейджи для новинок и товаров, которых нет в наличии.

Для чего это нужно

Бейджи на товарах выполняют несколько важных функций:

• Привлекают внимание к новинкам
• Информируют покупателей о статусе товара
• Улучшают визуальную привлекательность карточек товаров
• Помогают выделить определенные товары
• Позволяет не использовать лишние, тяжёлые плагины.

Код для добавления бейджей

add_action( 'woocommerce_before_shop_loop_item_title', 'display_sold_out_and_new_overlay' );
function display_sold_out_and_new_overlay() {
    global $product;
    $days_ago = 30;
    $created_at = strtotime( $product->get_date_created() );
    $new_product = ( strtotime( '-' . $days_ago . ' days' ) < $created_at ) ? true : false;

    if ( !$product->is_in_stock() ) {
        echo '<span class="sold-out-badge">Скоро в продаже</span>';
    }

    if ( $new_product ) {
        echo '<span class="new-badge">Новинка</span>';
    }
}

add_action( 'wp_head', 'add_custom_css' );
function add_custom_css() {
    echo '<style>.sold-out-badge, .new-badge { position: absolute; top: 15px; right: 0; padding: 0px 6px; font-size: 12px;} .sold-out-badge { background-color: #af8a78; color: white; z-index:10; } .new-badge { background-color: #0bbf0b; color: white; top: 15px; z-index:9; }</style>';
}

Как это работает

1. Хук woocommerce_before_shop_loop_item_title — добавляет наш код перед заголовком товара в цикле магазина.
2. Проверка новизны товара:
   • Мы определяем товар как «новинку», если он был создан менее 30 дней назад (можно изменить это значение)
   • Используем $product->get_date_created() для получения даты создания товара
3. Проверка наличия товара:
   • !$product->is_in_stock() проверяет, есть ли товар в наличии
   • Если товара нет, выводим бейдж «Скоро в продаже»
4. Стилизация:
   • Через хук wp_head добавляем CSS-стили для бейджей
   • Бейджи позиционируются абсолютно в правом верхнем углу карточки товара
   • «Новинка» — зеленый бейдж (#0bbf0b)
   • «Скоро в продаже» — бежевый бейдж (#af8a78)

Как установить код

1. Откройте файл functions.php вашей дочерней темы
2. Добавьте код в конец файла
3. Сохраните изменения

Важно. Если вы не знаете, что такое дочерняя тема и functions.php, воспользуйтесь плагином Code snippets.

1. Создайте сниппет и поместите в него этот код
2. Сохраните сниппет.

Настройка и кастомизация

Вы можете легко настроить этот код под свои нужды:

1. Изменить текст бейджей:
   • Просто замените «Новинка» и «Скоро в продаже» на нужный текст
2. Изменить период для новинок:
   • Замените $days_ago = 30; на другое количество дней
3. Изменить стили:
   • Подправьте цвета, отступы, размер шрифта в CSS-коде
   • Например, можно сделать бейджи круглыми, добавив border-radius: 50%;
4. Добавить другие бейджи:
   • По аналогии можно добавить проверку скидки, популярности и других параметров