Меня попросили в магазине 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); }
Конечно значения цвета, ширины, длины, угла наклона линии и отступы Вам самим придется подобрать под свой сайт. Но принцип должен быть понятен.
Но мне больше нравится вариант с надписью "Нет в наличии":
Для этого вместо выше указанного кода добавляем в файл 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; }
Понравилось? =) Поделись с друзьями:
Спасибо, вариант простой и удобный!
Сможете помочь? Мне нужно изменить размер шрифта цены товара на главной(странице всех товаров). Вроде бы нашел коды, которые ставятся в файл style.css. Они меняют размер шрифта, но меняют в том случае, когда стоит обычная цена(перечеркнутая) и цена распродажи. Если я оставляю обычную цену, а цену распродажи не ставлю(не нравится мне с перечеркиванием), то эти коды не работают.
Надеюсь мой вопрос понятен. Может подскажете че сделать?
dimmka, нужно смотреть на сайте, так ничего не увидев ничего подсказать не могу.
А как сделать то же самое, но еще и в карточке товара?
а как прописать что товар «есть на складе!»?
что бы быkо не только «нет в наличии», но и что товар реально есть. Понятно что это по умолчанию подразумевается что все товары есть в наличии если указана цена и нет предупреждения о том что закончился, но все таки надо именно подчеркнуть, акцентировать внимание что товар есть в наличии.
если не сложно, подскажите…
Добрый день! а у меня отображается нет в наличии не сверху картинки а под ней
Подскажите как сделать тоже самое, но только что бы надпись выводилось только на странице одиночного товара. Какой хук нужно использовать?