WooCommerce Produktbilder Größe: die drei Bildgrößen und wie du sie wirklich änderst

WooCommerce erzeugt für jedes hochgeladene Produktfoto drei Bildgrößen, und nur zwei davon lassen sich im WordPress-Backend bearbeiten. woocommerce_thumbnail ist das Bild im Katalograster, woocommerce_single das große Bild auf der Produktseite und woocommerce_gallery_thumbnail die kleine Thumbnail-Leiste darunter. Geändert wird das unter Design > Customizer > WooCommerce > Produktbilder — und wenn dieses Panel zwar ein Auswahlmenü für den Zuschnitt zeigt, aber keine Breitenfelder, hat dein Theme die Breiten absichtlich im Code festgelegt.

Die drei Größen

Name der Größe	Wo sie auftaucht	Zuschnitt	Im Customizer änderbar
woocommerce_thumbnail	Shop-Seite, Kategorieraster, ähnliche Produkte, Cross-Sells	Standardmäßig hart auf ein Quadrat beschnitten	Breite und Verhältnis
woocommerce_single	Hauptbild auf der einzelnen Produktseite	Unbeschnitten — ursprüngliches Seitenverhältnis bleibt	Nur Breite
woocommerce_gallery_thumbnail	Kleine Leiste unter dem Produkt-Hauptbild	Hart beschnittenes Quadrat	Nein

Diese kommen zu den WordPress-Standardgrößen hinzu. Ein einzelnes Produktfoto erzeugt typischerweise thumbnail, medium, medium_large, large, die drei WooCommerce-Größen und womöglich weitere, die dein Theme über add_image_size registriert. Das sind viele Dateien pro Upload — und der Grund, warum ein Import von 300 Produkten so lange dauert.

Das Galerie-Thumbnail ist das, was Leute überrascht: Dafür gibt es überhaupt keinen Regler im Backend. In einer Standardinstallation ist es ein kleines Quadrat, historisch 100 px, und es sieht auf Retina-Bildschirmen am ehesten weich aus, weil die Datei tatsächlich winzig ist.

Wo die Einstellungen wirklich liegen

Design > Customizer > WooCommerce > Produktbilder gibt dir drei Regler:

• Breite des Hauptbilds — die Breite von woocommerce_single. Die Höhe ergibt sich automatisch, das ursprüngliche Seitenverhältnis bleibt also erhalten.
• Breite des Thumbnails — die Breite von woocommerce_thumbnail.
• Thumbnail-Zuschnitt — 1:1 (Quadrat, die Voreinstellung), Benutzerdefiniert (du gibst ein Verhältnis wie 4:3 ein) oder Unbeschnitten.

Beachte, was fehlt: Für das Katalog-Thumbnail gibt es kein Höhenfeld, weil sich die Höhe aus dem Zuschnittverhältnis ergibt. Und für das Galerie-Thumbnail gibt es gar nichts.

Bevor du etwas änderst, hilft es zu sehen, welche Ableitungen eine bestimmte Datei tatsächlich erzeugt — zieh ein echtes Produktfoto in das Werkzeug für WordPress-Bildgrößen und du bekommst die komplette Liste, samt der Angabe, ob deine Quelle groß genug ist, um jede Größe ohne Hochrechnen zu füllen.

Warum deine Katalogbilder falsch aussehen

Das Katalog-Thumbnail wird hart auf ein Quadrat beschnitten. Harter Zuschnitt heißt: WooCommerce nimmt ein mittiges Quadrat aus deinem Foto und wirft den Rest weg — es setzt keine Balken und staucht auch nichts. Aus einer Produktaufnahme mit 2000x1200 wird ein 1200x1200 großer Ausschnitt aus der Mitte, der anschließend verkleinert wird.

Für eine mittig fotografierte Flasche mit Rand ringsum ist das völlig in Ordnung. Für Folgendes ist es eine Katastrophe:

• Lange Produkte (Skier, Kabel, Gardinenstangen) — man sieht das mittlere Drittel und sonst nichts
• Außermittige Kompositionen — das Produkt rutscht an den Bildrand und wird angeschnitten
• Fotos, bei denen der Artikel das Bild randlos ausfüllt — oben und unten wird abgeschnitten
• Lifestyle-Aufnahmen mit dem Produkt in einer Ecke

Der übliche Rat lautet “stell den Zuschnitt auf Unbeschnitten um”. Das funktioniert, aber sei ehrlich beim Preis: unbeschnitten heißt, dass jedes Thumbnail sein eigenes Seitenverhältnis behält, ein Raster aus Fotos mit gemischter Ausrichtung wirkt also unruhig, und die Zeilen fluchten nicht mehr, solange das CSS deines Themes keine variablen Höhen beherrscht. Die meisten Themes gehen von Quadraten aus.

Die bessere Lösung, wenn du sie dir leisten kannst, liegt an der Quelle: einheitlich quadratische Produktfotos mit mittigem Artikel und gleichmäßigem Rand. Dann ist ein quadratischer harter Zuschnitt wirkungslos und alles Weitere vorhersehbar. Die Zuschnitt-Einstellung zu ändern ist der Behelf; einheitliche Ausgangsbilder sind die eigentliche Lösung.

Wenn das Theme die Breiten sperrt

Bietet dein Panel “Produktbilder” nur den Zuschnitt an, hat dein Theme beim Anmelden der WooCommerce-Unterstützung feste Breiten hinterlegt:

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

Übergibt ein Theme diese Werte, entfernt WooCommerce die Breitenregler aus dem Customizer und lässt nur das Verhältnis stehen. Das ist kein Fehler und auch keine Bosheit des Themes — das Produktlayout-CSS ist auf genau diese Pixelbreiten gebaut, und dich sie ändern zu lassen würde das Raster zerlegen.

Du kannst sie aus der functions.php eines Child-Themes über den Filter je Größe überschreiben:

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

Dasselbe Muster funktioniert für woocommerce_get_image_size_thumbnail. Es ist außerdem die einzige Möglichkeit, das Galerie-Thumbnail zu ändern, da es keine Oberfläche dafür gibt.

Der reale Preis, klar benannt: Überschreibst du eine gesperrte Breite, passt die von WooCommerce erzeugte Datei nicht mehr zu dem, was das CSS des Themes erwartet. Meist skaliert das Bild einfach im Browser und sieht gut aus, weil es nun größer als sein Rahmen ist. Manchmal hat das Theme einen Container mit fester Höhe, und du bekommst Balken oder Überlauf. Teste an einem Produkt, bevor du 2.000 neu erzeugst.

Größen ändern heißt neu erzeugen

Jede Größeneinstellung wirkt ausschließlich auf neue Uploads. Vorhandene Produkte liefern weiter die Dateien aus, die beim Hochladen erzeugt wurden, sichtbar ändert sich also nichts, bis du sie neu aufbaust.

WooCommerce stößt beim Speichern im Customizer eine Neuerzeugung im Hintergrund an. Bei einem kleinen Katalog reicht das. Bei einem großen hängt es davon ab, ob WP-Cron zuverlässig auslöst, was in einem Shop mit wenig Traffic oft nicht der Fall ist — und du endest mit einer halb neu erzeugten Mediathek. Führ es lieber selbst aus:

wp media regenerate --yes

Nur Produktbilder neu aufbauen:

wp media regenerate --yes --post_type=product

Wenn du den Hintergrundjob loswerden willst, während du es manuell erledigst:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

Zwei Dinge tut die Neuerzeugung nicht. Sie löscht die alten Dateien nicht — dein Upload-Verzeichnis behält jede verwaiste Ableitung aus den vorherigen Einstellungen, und es wächst. Und sie kann keine Größe erzeugen, die größer als deine Quelle ist, weil WordPress nicht hochrechnet. Setzt du die Hauptbildbreite auf 1200, deine Produktfotos sind aber nur 800 px breit, entsteht keine 1200-px-Datei; der Browser bekommt eine 800-px-Datei und zieht sie auf, und srcset hat nichts Besseres anzubieten.

Die Größe, die du tatsächlich hochladen solltest

Ziel sind quadratische Ausgangsbilder mit etwa der doppelten größten eingestellten Breite — 1200x1200 für ein 600 px breites Hauptbild, 1600x1600, wenn dein Theme 800 px nutzt. Das deckt Retina-Displays mit doppelter Pixeldichte ab und gibt WordPress genug Pixel, um jede Ableitung ohne Hochrechnen zu bauen. Halte alle Produkte bei denselben Abmessungen, damit das Raster gleichmäßig bleibt.

Immer noch festgefahren?

Sind die Größen korrekt eingestellt, hast du neu erzeugt und ein Produkt sieht trotzdem falsch aus, öffne das Bild in einem neuen Tab und lies den Dateinamen. Ein Maßangaben-Suffix, das zu keiner von dir eingestellten Größe passt, bedeutet, dass etwas anderes sie registriert hat. Gar kein Suffix bedeutet, dass WooCommerce auf die Datei in voller Größe zurückgefallen ist, und das heißt fast immer, dass die Quelle für die angeforderte Größe zu klein war. Lass diese Quelldatei durch das Werkzeug für Bildgrößen laufen und vergleiche, was WordPress erzeugen müsste, mit dem, was der Browser tatsächlich geladen hat — wenn beides auseinandergeht, sitzt meist ein Optimierungs-Plugin oder ein CDN-Bildskalierer dazwischen.