Как добавить наложение «продано» на изображения товаров WooCommerce?

Если вы хотите добавить наложение распроданных товаров на изображения ваших товаров в WooCommerce, есть два простых способа сделать это. Во-первых, вы можете использовать такой плагин, как WooCommerce Sold Out Products, который автоматически добавит наложение на ваши изображения.

Или вы можете вручную добавить наложение с помощью CSS.

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

ПРО СОВЕТ: Если вы используете WooCommerce для продажи товаров на своем сайте WordPress, вы могли заметить, что нет встроенного способа добавить наложение «продано» на изображения товаров. Это может стать проблемой, если у вас есть товары, которые часто распродаются, так как покупатели не смогут с первого взгляда определить, какие товары есть в наличии, а какие нет.

Существует несколько плагинов, которые позволяют добавить наложение распродажи на изображения товаров WooCommerce, но имейте в виду: не все они работают хорошо. В частности, мы обнаружили, что плагин «WooCommerce Sold Out Images» часто нарушает макет страниц наших товаров, поэтому мы его не рекомендуем.

Если вы ищете надежный плагин для добавления проданных наложений на ваши изображения продуктов WooCommerce, мы рекомендуем «WooCommerce Image Overlay». Этот плагин легкий и простой в использовании, и он не нарушит ваш макет.

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

.sold-out-overlay {
положение: абсолютное;
top: 0;
left: 0;
ширина: 100%;
высота: 100%;
background-color: rgba(0, 0, 0, 0, 0.5); // Измените это на любой цвет, который вы хотите
}

Обязательно замените «rgba(0, 0, 0, 0, 0.5)» на желаемый код цвета.

Вывод: Существует два простых способа добавить наложение распродажи на изображения товаров в WooCommerce — с помощью плагина или вручную добавив CSS-код.

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии