Produktbildergrößen in WooCommerce einstellen

Onlineshops mit WordPress
Wie groß sollen sie sein, die Produktbilder in WooCommerce? Einstellen lassen sich die diversen Größen unter WooCommerce > Produkte >Darstellung

Bildgröße einstellen

Bildgrößen einstellen

Bildgrößen einstellen

WooCommerce kennt drei unterschiedliche Arten von Produktbildern, Katalogbilder, einzelne Produktbilder und Produkt-Vorschaubilder. Wichtig: Deine Originalbilder sollten nicht kleiner als dein Zuschnitt sein. Ist das nicht der Fall, dann skaliert WooCommerce die Bilder nämlich hoch, mit Verpixelungs-Effekten!

Bildarten in WooCommerce

Bildarten in WooCommerce

  1. Katalogbilder werde auf der Startseite deines Shops angezeigt
  2. Einzelne Bilder erscheinen am Produkt selbst
  3. Produkt-Vorschaubilder in der Produktgalerie

Leider funktionieren die eingestellten Größen nicht mit jedem Theme. Ich habe es schon erlebt, dass einzelne Produktbilder übergroß dargestellt wurden! Dagegen gibt es zwei Rezepte:

  • Thumbnail-Plugin
  • CSS-Lösung

Thumbnails über ein Plugin neu generieren

Vorschaubilder regenerieren

Vorschaubilder regenerieren

Installiere das Plugin Regenerate Thumbnails, um die Bilder nach einer Größenänderung neu darstellen zu lassen. Das Plugin versteckt sich nach der Aktivierung im Menü Werkzeuge. Klicke auf alle Vorschaubilder regenerieren. Hat alles funktioniert, wunderbar! Falls nicht, hilft ein Eingriff via CSS.

Bilder über CSS-Code trimmen

Bilder über CSS-Code trimmen

Bilder über CSS-Code trimmen

Falls die Bilder immer noch zu groß angezeigt werden, hilft nur noch der Eingriff in den CSS-Code. Mit WordPress 4.7 hat die CSS-Box in die meisten Themes Einzug gehalten. Gib hier diesen Code ein:

.woocommerce #primary .images img {
width: auto;
}

Tipp: Custom CSS-Plugin installieren

Falls dein Theme noch keine CSS-Box bietet, installiere dir ein Custom-CSS-Plugin. Das ist sicherer, als die Bearbeitung der CSS-Datei über den Editor. Außerdem werden die Code-Änderung beim Update des Themes nicht überschrieben.
Update April 2017: Das war früher, heute brauchst du kein CSS-Plugin mehr. WordPress-Version hat eine CSS-Box im Customizer! Dort kannst du alle CSS-Anpassungen vornehmen 😉
CSS im Customizer

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.