Как сделать миниатюру в woocommerce фоном?

Ссылка скопирована
CSS PHP WordPress
1 ответ

Добрый день! Хочу вывести миниатюры подкатегорий в категориях woocommerce не через img, а через background, есть варианты, как сделать? Или возможно есть вариант какой-то, чтобы обернуть тег img в div? Миниатюры товаров обернул, а на подкатегории не работает мой код.

Дополнительно:

Решение. Если кому-то надо будет. В теме у меня есть файл woocommerce.php, там была функция woocommerce_content(); скопировал ее в functions, обозвал woocommerce_content2(), там через код вывел категории, как мне надо

Ответы:

Предлагаю следующее правило CSS для элемента:
background-image: url(https://настоящая ссылка);

  • так надо див тогда добавить вместо тега img, чтобы правило это применять, а как это сделать не понятно
  • Ищите, какой шаблон в WooCommerce отвечает за вывод подкатегорий и переопределяйте его в своей теме

    Пример, как это сделать, уже дан на wordpress.stackoverflow: https://wordpress.stackexchange.com/questions/2560...

  • jazzman7, Либо можно применить класс ко всем тем элементам которым требуется фон изображением. Например class="img-background"
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Backend-редакция Ответ

Для подкатегорий WooCommerce миниатюры выводятся не тем же шаблоном, что товары. Обычно отвечает шаблон content-product_cat.php. Его можно переопределить в дочерней теме и вывести картинку как фон.

Скопируйте файл:

wp-content/plugins/woocommerce/templates/content-product_cat.php
wp-content/themes/your-child-theme/woocommerce/content-product_cat.php

wp-content/plugins/woocommerce/templates/content-product_cat.php wp-content/themes/your-child-theme/woocommerce/content-product_cat.php

В шаблоне получите ID миниатюры категории и URL изображения:

<?php
$thumbnail_id = get_term_meta($category->term_id, 'thumbnail_id', true);
$image_url = $thumbnail_id ? wp_get_attachment_image_url($thumbnail_id, 'woocommerce_thumbnail') : wc_placeholder_img_src();
?>
 
<li <?php wc_product_cat_class('', $category); ?>>
    <a href="<?php echo esc_url(get_term_link($category, 'product_cat')); ?>">
        <span class="category-thumb-bg" style="background-image: url('<?php echo esc_url($image_url); ?>');"></span>
        <h2 class="woocommerce-loop-category__title">
            <?php echo esc_html($category->name); ?>
        </h2>
    </a>
</li>

<?php $thumbnail_id = get_term_meta($category->term_id, 'thumbnail_id', true); $image_url = $thumbnail_id ? wp_get_attachment_image_url($thumbnail_id, 'woocommerce_thumbnail') : wc_placeholder_img_src(); ?> <li <?php wc_product_cat_class('', $category); ?>> <a href="<?php echo esc_url(get_term_link($category, 'product_cat')); ?>"> <span class="category-thumb-bg" style="background-image: url('<?php echo esc_url($image_url); ?>');"></span> <h2 class="woocommerce-loop-category__title"> <?php echo esc_html($category->name); ?> </h2> </a> </li>

CSS:

.category-thumb-bg {
  display: block;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.category-thumb-bg { display: block; aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-repeat: no-repeat; }

Копировать целиком woocommerce_content() в functions.php — рабочий, но хрупкий путь: при обновлениях WooCommerce сложнее поддерживать. Лучше переопределять конкретный шаблон WooCommerce или использовать hooks, если нужно только обернуть изображение.

Миниатюра подкатегории WooCommerce хранится в meta термина thumbnail_id. Поэтому можно не пытаться оборачивать стандартный <img>, а получить URL картинки и вывести свой блок с background-image.

$thumbnail_id = get_term_meta($category-&gt;term_id, 'thumbnail_id', true);
$image_url = $thumbnail_id ? wp_get_attachment_image_url($thumbnail_id, 'medium') : wc_placeholder_img_src();
 
echo '&lt;div class="product-cat-card__image" style="background-image:url(' . esc_url($image_url) . ')"&gt;&lt;/div&gt;';

$thumbnail_id = get_term_meta($category-&gt;term_id, 'thumbnail_id', true); $image_url = $thumbnail_id ? wp_get_attachment_image_url($thumbnail_id, 'medium') : wc_placeholder_img_src(); echo '&lt;div class="product-cat-card__image" style="background-image:url(' . esc_url($image_url) . ')"&gt;&lt;/div&gt;';

CSS:

.product-cat-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
}

.product-cat-card__image { width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; border-radius: 12px; }

Если вы переопределяете стандартный шаблон WooCommerce, смотрите файлы content-product_cat.php или hooks вокруг woocommerce_subcategory_thumbnail(). Можно отключить стандартную миниатюру и вывести свою:

remove_action('woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10);

remove_action('woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10);

Но полностью копировать woocommerce_content() в functions.php — не лучший путь: при обновлениях WooCommerce можно получить расхождения. Безопаснее переопределить нужный template в дочерней теме или повеситься на hook, который отвечает только за миниатюру категории.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 0 ответов