So änderst du die Größe des Vorschaubildes für Produkte im Warenkorb von WooCommerce.

Hier­für müs­sen wir zwei Berei­che anpas­sen. Zum einen über PHP die Grö­ße des Bil­des anpas­sen und anschlie­ßend über CSS das gan­ze noch opti­mie­ren.

Als Ers­tes erstel­len wir eine neue Bild­grö­ße custom_size. Dafür ver­wen­den wir die Funk­ti­on add_image_size von Word­Press.

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

Als Nächs­tes müs­sen wir Woo­Com­mer­ce noch mit­tei­len, das wir eine ande­re grö­ße ver­wen­den möch­ten. Dafür steht uns der Fil­ter woocommerce_cart_item_thumbnail zur Ver­fü­gung.

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');
}

Damit hät­ten wir auch schon das For­mat ange­passt. Bereits jetzt soll­test du eine Ände­rung des Bil­des bemer­ken.

Als Nächs­tes müs­sen wir natür­lich das gan­ze noch über CSS opti­mie­ren. Das kannst du ent­we­der direkt über die CSS Datei oder über den Cus­to­mi­zer von Word­Press erle­di­gen.

Das Bild kannst du mit fol­gen­dem CSS anspre­chen:

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

Damit wären wir auch schon am Ende. Nun soll­te das Vor­schau­bild dei­ner Pro­duk­te im Waren­korb dei­nen Wün­schen ent­spre­chen. Dar­über hin­aus steht dir auf dei­ner Web­sei­te nun ein neu­es Bild For­mat “custom_size” zur Ver­fü­gung.

Hat dir der Arti­kel gefal­len? Dann hin­ter­lass uns ger­ne einen Kom­men­tar.