WooCommerce: Как добавить значок "Продано"

Меня попросили  в магазине WooCommerce пометить проданные товары перечеркнутой линией:

WooCommerce: нет товара

Сделать это можно добавив в файлы functions.php и style.css следующий код:

Файл functions.php:

add_action( 'woocommerce_before_shop_loop_item_title', function() {
 global $product; 
 if ( !$product->is_in_stock() ) {
 echo '<hr id="soldout">';
 }
});

Style.css:

hr#soldout {
height: 5px;
width: 270px;
background-color: #D13939;
border: 0;
margin-top: -100px;
margin-bottom: 94px;
margin-left: -57px;
-webkit-transform: rotate(134deg);
-moz-transform: rotate(134deg);
-ms-transform: rotate(134deg);
-o-transform: rotate(134deg);
}

Конечно значения цвета, ширины, длины, угла наклона линии и отступы Вам самим придется подобрать под свой сайт. Но принцип должен быть понятен.

Но мне больше нравится вариант с надписью "Нет в наличии":

WooCommerce: товара нет в наличии

 

Для этого вместо выше указанного кода добавляем в файл functions.php:

add_action( 'woocommerce_before_shop_loop_item_title', function() {
 global $product; 
 if ( !$product->is_in_stock() ) {
 echo '<span class="onsale soldout">Нет в наличии</span>';
 }
});

И в файл Style.css:

span.onsale {
 background: #D13939 !important;
}
Понравилось? =) Поделись с друзьями:

Обсуждение записи “WooCommerce: Как добавить значок "Продано"”

  1. Роман says:

    Спасибо, вариант простой и удобный!

  2. dimmka says:

    Сможете помочь? Мне нужно изменить размер шрифта цены товара на главной(странице всех товаров). Вроде бы нашел коды, которые ставятся в файл style.css. Они меняют размер шрифта, но меняют в том случае, когда стоит обычная цена(перечеркнутая) и цена распродажи. Если я оставляю обычную цену, а цену распродажи не ставлю(не нравится мне с перечеркиванием), то эти коды не работают.
    Надеюсь мой вопрос понятен. Может подскажете че сделать?

  3. Владимир Демянович (elims.org.ua) says:

    dimmka, нужно смотреть на сайте, так ничего не увидев ничего подсказать не могу.

  4. Ruslan says:

    А как сделать то же самое, но еще и в карточке товара?

  5. сергей says:

    а как прописать что товар «есть на складе!»?
    что бы быkо не только «нет в наличии», но и что товар реально есть. Понятно что это по умолчанию подразумевается что все товары есть в наличии если указана цена и нет предупреждения о том что закончился, но все таки надо именно подчеркнуть, акцентировать внимание что товар есть в наличии.

    если не сложно, подскажите…

  6. Виктор says:

    Добрый день! а у меня отображается нет в наличии не сверху картинки а под ней

Обсудить