WooCommerce Produktbild ändern und die Galerie sortieren: ein kurzer Leitfaden
Wenn Sie ein WooCommerce Produktbild ändern wollen, setzen Sie das Hauptbild im Produkteditor, in der rechten Spalte, im Feld Produktbild. Dieses Bild erscheint in der Produktliste, im Warenkorb und als erstes auf der Produktseite. Weitere Bilder ergänzen Sie darunter im Feld Produktgalerie und ändern ihre Reihenfolge, indem Sie die Vorschaubilder mit der Maus ziehen.
Autor: Das TellMyShop-Team. Ein Ratgeber für Betreiber von WordPress-Websites und WooCommerce-Shops: die Ursache, die Lösung von Hand und dieselbe Arbeit im Gespräch mit dem Chat.
Zuletzt aktualisiert: · 6 Min. Lesezeit
Wo erscheint welches Bild?
Das Hauptbild wirkt an mehr Stellen als die Galerie, daher lohnt es sich, es bewusst zu wählen, statt das erste Foto aus dem Shooting zu nehmen.
| Ort | Welches Bild | Worauf Sie achten |
|---|---|---|
| Produkt- und Kategorielisten | das Hauptbild, auf ein Vorschaubild beschnitten | standardmäßig quadratisch, hohe Bilder verlieren oben und unten |
| Produktseite | das Hauptbild, darunter die Galerie | die Reihenfolge der Galerie legen Sie von Hand fest |
| Warenkorb und Bestell-E-Mails | das Hauptbild, ein kleines Vorschaubild | ein Detail in Nahaufnahme ist im Warenkorb unlesbar |
| gewählte Variation | das Variationsbild statt des Hauptbilds | ohne Variationsbild sieht der Kunde immer das Hauptbild |
| Teilen in sozialen Medien | meist das Hauptbild, über das SEO-Plugin | das SEO-Plugin kann ein eigenes Bildfeld haben |
| Google und der Produktfeed | das Hauptbild als Produktbild | es sollte das Produkt selbst klar zeigen |
WooCommerce beschreibt drei Bildgrößen und die Einstellungen zum Beschneiden in seiner Dokumentation zu Produktbildern und Galerien. Google verlangt in der Spezifikation des Bildlinks, dass das Hauptbild das verkaufte Produkt klar zeigt und weitere Aufnahmen in die zusätzlichen Bilder kommen.
So ändern Sie das Hauptbild und ordnen die Galerie
Ein Produkt ändern Sie im Backend in wenigen Minuten.
- Öffnen Sie Produkte → Alle Produkte und bearbeiten Sie das Produkt.
- Suchen Sie in der rechten Spalte das Feld Produktbild. Klicken Sie auf das aktuelle Bild oder auf den Link zum Festlegen.
- Wählen Sie ein Bild aus der Mediathek oder laden Sie ein neues hoch. Tippen Sie dabei gleich den Alt-Text ein, eine kurze Beschreibung dessen, was zu sehen ist.
- Ergänzen Sie darunter im Feld Produktgalerie weitere Bilder. Mit gedrückter Strg- oder Cmd-Taste wählen Sie mehrere auf einmal.
- Ziehen Sie die Vorschaubilder der Galerie in die Reihenfolge, in der der Kunde sie sehen soll.
- Klicken Sie auf Aktualisieren und öffnen Sie die Produktseite in einem privaten Fenster, um sie wie ein Kunde zu sehen.
Eine Galerie-Reihenfolge, die meist funktioniert: das Produkt auf weißem Hintergrund, das Produkt im Einsatz, ein Detail (Naht, Struktur, Verschluss), Größenverhältnis oder Maße, Verpackung. Das erste Bild beantwortet „was ist das“, die nächsten die Fragen, die ein Kunde im Laden stellen würde.
Welches Bild soll das Hauptbild sein? Eines, das auch als kleines Vorschaubild in der Liste noch sagt, was das Produkt ist. Das Produkt allein, ohne Verpackung, auf hellem, ruhigem Hintergrund, vollständig und mittig. Halten Sie in einer Kategorie einen Bildausschnitt und ein Seitenverhältnis ein, denn eine Liste aus Hoch-, Querformat und gestellten Szenen wirkt unordentlich. Fotos mit Modell, gestellte Szenen und Details gehören in die Galerie.
Geben Sie in einem variablen Produkt jeder Variation ein Bild, die anders aussieht, meist jeder Farbe. Öffnen Sie den Tab Variationen, klappen Sie die Variation auf und klicken Sie auf das Bildsymbol daneben. Größen derselben Farbe können sich ein Bild teilen.
Schreiben Sie Alt-Texte konkret: „schwarzer Kapuzenpullover, Seitenansicht“, ohne Keywords hineinzustopfen. Mehr dazu im Beitrag zum Alt-Text in WordPress, und Google behandelt das in seinem Leitfaden zur Bilder-SEO.
Falsches Bild in der Liste, obwohl die Produktseite stimmt?
Meist sind Beschnitt, Cache oder eine Variation schuld. Gehen Sie diese drei der Reihe nach durch.
- Beschnitt der Vorschaubilder. Unter Design → Customizer → WooCommerce → Produktbilder gibt es eine Einstellung für das Seitenverhältnis der Vorschaubilder. Quadratisch beschneidet Hochformate. Nach einer Änderung erzeugt WooCommerce die Vorschaubilder im Hintergrund neu, was bei einem großen Katalog eine Weile dauert.
- Cache. Ein Caching-Plugin oder Ihr Hoster zeigt vielleicht eine alte Liste. Prüfen Sie in einem privaten Fenster und leeren Sie bei Bedarf den Cache. Mehr dazu im Beitrag, warum Änderungen in WordPress nicht sichtbar sind.
- Eine Variation mit eigenem Bild. In einem variablen Produkt ersetzt das Bild der gewählten Variation das Hauptbild. Hat die Variation ein altes Bild, sieht der Kunde das alte Bild.
Erscheint neben Blogbeiträgen kein Bild, ist das ein anderes Thema. Das Beitragsbild für Beiträge behandeln wir in einem eigenen Beitrag zum WordPress Beitragsbild.
So ändern Sie Bilder bei vielen Produkten auf einmal
Für ein Produkt reicht das Backend. Schickt ein Lieferant neue Packshots für 80 Produkte, oder hat nach einem Import der halbe Katalog die Verpackung als Hauptbild, sind das viele Abende voller Klicks.
Das TellMyShop-Plugin für WordPress und WooCommerce verbindet Ihren Shop mit dem Chat. In TellMyShop Free findet der Chat Produkte ohne Hauptbild und Bilder ohne Alt-Text und zeigt Ihnen eine Liste. Er speichert nichts.
In TellMyShop Pro ändert der Chat Bilder in Paketen von bis zu 50 Produkten. Er setzt das Hauptbild aus der Mediathek oder von einer öffentlichen Adresse, ergänzt und entfernt Galeriebilder, ordnet ihre Reihenfolge und schreibt Alt-Texte. Für eine Variation setzt er ein Variationsbild. Das funktioniert gleich nach der Aktivierung der Lizenz, ohne Schalter.
Sie: In der Kategorie Becher ist das Hauptbild der Karton. Setz das Foto des Bechers selbst als Hauptbild und stell den Karton ans Ende der Galerie.
Ihr Chat: In der Kategorie Becher gibt es 24 Produkte. Bei 19 ist das erste Bild der Karton, und der Becher steht an zweiter Stelle in der Galerie. Probe:
5 Produkte haben kein Foto des Bechers allein, die lasse ich unverändert.
Sie: Gut, mach die 19.
Ihr Chat: Ich bereite eine Vorschau des ganzen Pakets vor. Ich speichere nach Ihrem „Ja“.
Status der Karte: wartet auf Ihr „Ja“Emaille-Becher 350 ml
alte Version: Hauptbild: emaille-becher-karton.jpg
neue Version: Hauptbild: emaille-becher-seite.jpg
alte Version: Galerie: emaille-becher-seite.jpg, emaille-becher-detail.jpg
neue Version: Galerie: emaille-becher-detail.jpg, emaille-becher-karton.jpg
Zahlen und Dateinamen im Gespräch sind Beispiele. Jedes Paket landet im Änderungsverlauf. Das Rückgängigmachen stellt die Bildzuordnungen und Alt-Texte wieder her, und von Adressen geladene Dateien bleiben in der Mediathek. Jede Änderung können Sie mit einer Anweisung rückgängig machen.
Was TellMyShop nicht tut: Es macht keine Fotos, bearbeitet sie nicht in einem Grafikprogramm und ändert nicht das Seitenverhältnis der Vorschaubilder in den Design-Einstellungen. Den Beschnitt stellen Sie selbst ein, mit ein paar Klicks.
Beginnen Sie mit dem kostenlosen TellMyShop Free, das Produkte ohne Bilder findet. Es funktioniert mit Claude oder ChatGPT, auch mit kostenlosen Konten. Details finden Sie auf der Seite TellMyShop für WordPress und WooCommerce, die Preise für Pro auf der Seite Preise. Richten Sie Produkte gerade erst ein, beginnen Sie mit dem Beitrag dazu, wie Sie ein Produkt in WooCommerce hinzufügen.
Fragen und Antworten
Wo ändere ich in WooCommerce das Hauptbild eines Produkts?
Im Produkteditor, in der rechten Spalte, im Feld Produktbild. Klicken Sie auf das aktuelle Bild, wählen Sie ein anderes aus der Mediathek oder laden Sie ein neues hoch und aktualisieren Sie das Produkt. Das Bild aus diesem Feld erscheint in der Produktliste, im Warenkorb und als erstes auf der Produktseite.
Wie ändere ich die Reihenfolge der Bilder in der Produktgalerie?
Ziehen Sie im Feld Produktgalerie die Vorschaubilder mit der Maus an ihre neuen Plätze und aktualisieren Sie das Produkt. Das Hauptbild steht immer vor der Galerie. Soll also ein anderes Bild an erster Stelle stehen, setzen Sie es als Produktbild.
Warum sind die Vorschaubilder in der Produktliste beschnitten?
WooCommerce beschneidet Bilder in Listen auf ein Seitenverhältnis, standardmäßig quadratisch. Das Verhältnis ändern Sie unter Design → Customizer → WooCommerce → Produktbilder. Haben Bilder unterschiedliche Proportionen, bereiten Sie sie am besten von Anfang an in einem Format vor.
Kann eine Produktvariation ein eigenes Bild haben?
Ja, ein Bild pro Variation. Sie setzen es im Tab Variationen in den Einstellungen dieser Variation. Wählt ein Kunde zum Beispiel Rot, ersetzt dieses Bild auf der Produktseite das Hauptbild.
Ändert der Chat Bilder bei vielen Produkten auf einmal?
Ja, in TellMyShop Pro, bis zu 50 Produkte in einem Paket und ohne einen Schalter einzuschalten. Er setzt das Hauptbild, ergänzt Bilder in der Galerie, ordnet ihre Reihenfolge und schreibt Alt-Texte. Jedes Paket sehen Sie vor dem Speichern in einer Vorschau.
WordPress ist eine Marke der WordPress Foundation. WooCommerce ist eine Marke der Automattic Inc. Claude ist eine Marke der Anthropic PBC. ChatGPT und OpenAI sind Marken von OpenAI. TellMyShop ist mit diesen Unternehmen nicht verbunden.