WooCommerce: как установить контроль размера изображений товаров в корзине

Диагностика проблемы с размерами изображений в корзине WooCommerce

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

Чтобы проверить текущие размеры изображений в корзине, откройте страницу корзины и воспользуйтесь инструментами разработчика браузера (F12). Найдите элемент изображения товара (обычно это <img class="woocommerce-cart-item-thumbnail">) и посмотрите, какие размеры (width и height) он имеет.

Если размеры не соответствуют вашим требованиям, это повод применить кастомизацию.

Пошаговое решение: настройка размеров изображений товаров в корзине WooCommerce

1. Определяем нужные размеры

Решите, какой размер превью товара нужен в корзине. Например, 100x100 пикселей — оптимально для компактного отображения.

2. Добавляем фильтр для изменения размера изображения

WooCommerce выводит изображения товаров в корзине с помощью функции wc_get_gallery_image_html() и хука woocommerce_cart_item_thumbnail. Чтобы контролировать размер, используем фильтр woocommerce_cart_item_thumbnail.

Добавьте следующий код в файл functions.php вашей дочерней темы или в кастомный плагин:

add_filter('woocommerce_cart_item_thumbnail', 'custom_cart_item_thumbnail_size', 10, 3);
function custom_cart_item_thumbnail_size($thumbnail, $cart_item, $cart_item_key) {
    $product = $cart_item['data'];
    $size = array(100, 100); // ширина и высота в пикселях
    $image_id = $product->get_image_id();
    if ($image_id) {
        $image = wp_get_attachment_image($image_id, $size, false, array('class' => 'custom-cart-thumbnail'));
        return $image;
    }
    return $thumbnail;
}

3. Применяем CSS для корректного отображения

Добавьте в style.css темы или в кастомный CSS:

.custom-cart-thumbnail {
    object-fit: cover;
    border-radius: 4px;
}

Проверка результата после внедрения кода

Обновите страницу корзины и очистите кеш браузера, если используете кеширование. Проверьте, что изображения товаров в корзине теперь отображаются размером 100x100 пикселей и выглядят аккуратно.

Если используете плагин кеширования, дополнительно очистите кеш плагина.

Частые ошибки и как их исправить

• Изображения не изменились: возможно, код добавлен в неправильный файл или тема перекрывает вывод. Проверьте, что изменения в functions.php активны и не конфликтуют с другими плагинами.
• Изображения искажены: добавьте CSS object-fit: cover; для сохранения пропорций.
• Изображения не загружаются: убедитесь, что у товара есть изображение, и $product->get_image_id() возвращает корректный ID.

Практические советы по оптимизации и безопасности

• Используйте дочернюю тему для внесения изменений, чтобы избежать потери при обновлении основной темы.
• Минимизируйте количество запросов и не загружайте большие изображения, чтобы не замедлять загрузку страницы корзины.
• Добавьте атрибуты loading="lazy" для отложенной загрузки изображений, если корзина содержит много товаров.

Сравнение подходов к изменению размера изображений в корзине WooCommerce