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

Hierfür müssen wir zwei Bereiche anpassen. Zum einen über PHP die Größe des Bildes anpassen und anschließend über CSS das ganze noch optimieren.

Als Erstes erstellen wir eine neue Bildgröße custom_size. Dafür verwenden wir die Funktion add_image_size von WordPress.

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

Als Nächstes müssen wir WooCommerce noch mitteilen, das wir eine andere größe verwenden möchten. Dafür steht uns der Filter woocommerce_cart_item_thumbnail zur Verfü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ätten wir auch schon das Format angepasst. Bereits jetzt solltest du eine Änderung des Bildes bemerken.

Als Nächstes müssen wir natürlich das ganze noch über CSS optimieren. Das kannst du entweder direkt über die CSS Datei oder über den Customizer von WordPress erledigen.

Das Bild kannst du mit folgendem CSS ansprechen:

.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 sollte das Vorschaubild deiner Produkte im Warenkorb deinen Wünschen entsprechen. Darüber hinaus steht dir auf deiner Webseite nun ein neues Bild Format „custom_size“ zur Verfügung.

Hat dir der Artikel gefallen? Dann hinterlass uns gerne einen Kommentar.