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

For this, we need to adjust two are­as. First, adjust the size of the image via PHP and then opti­mi­ze the who­le thing via CSS.

First we crea­te a new image size custom_size. For this, we use the add_image_size func­tion of Word­Press.

/**
 * 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 Woo­Com­mer­ce that we want to use a dif­fe­rent size. For this, we can use the woocommerce_cart_item_thumbnail fil­ter.

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 alre­a­dy adjus­ted the for­mat. Alre­a­dy now you should noti­ce a chan­ge in the image.

Next, of cour­se, we need to opti­mi­ze the who­le thing via CSS. You can do this eit­her direct­ly via the CSS file or via the Word­Press Cus­to­mi­zer.

You can address the image with the fol­lo­wing 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 pre­view image of your pro­ducts in the shop­ping cart should cor­re­spond to your wis­hes. In addi­ti­on, a new image for­mat “custom_size” is now available on your web­site.

Did you like the artic­le? Then feel free to lea­ve us a com­ment.