How to change the thumbnail size for products in the WooCommerce shopping cart.

For this, we need to adjust two areas. First, adjust the size of the image via PHP and then optimize the whole thing via CSS.

First we create a new image size custom_size. For this, we use the add_image_size function of WordPress.

/**
 * Erklärung:
 * add_image_size(individueller_name, breite, höhe, automatisch_beschneiden)
 */
add_image_size('custom_size', 300, 150, false);

Next, we need to tell WooCommerce that we want to use a different size. For this, we can use the woocommerce_cart_item_thumbnail filter.

add_filter('woocommerce_cart_item_thumbnail', 'doChangeCartThumbnail', 10, 3);

/**
 * Vorschaubild für Produkte im Warenkorb anpassen
 */
function doChangeCartThumbnail($thumbnail, $cart_item, $cart_item_key){
    // Produkt laden
    $_product   = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );

    // Thumbnail anpassen
    return $_product->get_image('custom_size');
}

With this, we would have already adjusted the format. Already now you should notice a change in the image.

Next, of course, we need to optimize the whole thing via CSS. You can do this either directly via the CSS file or via the WordPress Customizer.

You can address the image with the following CSS:

.woocommerce-cart table.cart .product-thumbnail img,
.woocommerce-cart table.cart .product-thumbnail{
     width:150px;
     height:100px;
 }

That brings us to the end. Now, the preview image of your products in the shopping cart should correspond to your wishes. In addition, a new image format “custom_size” is now available on your website.

Did you like the article? Then feel free to leave us a comment.