WooCommerce: вывод изображения бренда в карточке товара на странице «Магазин».

12.11.2024

Обновлено 17.10.2025

382 просмотра

1 минута

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

Входные данные

На сайте используется плагин Perfect Brands for WooCommerce и Тема Bono.
По макету карточки товара, в верхнем левом углу необходимо выводить кликабельную картинку бренда.

При клике на изображение бренда осуществлять переход на страницу магазина, где товары фильтруются и выводятся по данному атрибуту.

Решение

Опытным путем выбрал использовать хук woocommerce_shop_loop_item_title
В вашем случае он может быть другой, все зависит от темы.

Код

add_action("woocommerce_shop_loop_item_title", "my_brand_img");

function my_brand_img()
{
    global $product;

    # Сначала получаем все прикрепленные к товару бренды
    $brands = get_the_terms($product-&gt;get_id(), "pwb-brand");

    # Зная id бренда, получаем id его изображения
    $brand_img_id = get_term_meta($brands[0]->term_id, "pwb_brand_image", true);

    # Получаем тег картинки
    $brand_img = wp_get_attachment_image($brand_img_id, "medium", false);
    
    // Выводим картинку
   echo '<div class="left_angle_top"><a href="'.home_url().
 '/brand/' .$brands[0]->slug.'">' . $brand_img . '</a></div>';
}

add_action("woocommerce_shop_loop_item_title", "my_brand_img");

function my_brand_img()

{

global $product;

# Сначала получаем все прикрепленные к товару бренды

$brands = get_the_terms($product->get_id(), "pwb-brand");

# Зная id бренда, получаем id его изображения

$brand_img_id = get_term_meta($brands[0]->term_id, "pwb_brand_image", true);

# Получаем тег картинки

$brand_img = wp_get_attachment_image($brand_img_id, "medium", false);

// Выводим картинку

echo '<div class="left_angle_top"><a href="'.home_url().

'/brand/' .$brands[0]->slug.'">' . $brand_img . '</a></div>';

}

Уточнения

Переменная $brands содержит массив прикрепленных к товару брендов. В приведенном выше примере обрабатывается только первый элемент массива.
«Прибить» картинку бренда к верхнему левому углу карточки можно с помощью css стилей. Например, прописать их для класса left_angle_top. Все зависит от темы сайта.

В итоге, получилось следующее:

Таким образом, используя простые функции и хуки WooCommerce, вы можете легко интегрировать информацию о брендах в ваш магазин. Это не только улучшает навигацию для пользователей, но и повышает доверие к товарам, а также положительно сказывается на внутренней перелинковке сайта.