WooCommerce Variantenbilder: Alt-Texte für Farben, Größen und Produktvarianten

Ein WooCommerce-Produkt gibt es in Schwarz, Weiß und Rot. Nach der Auswahl zeigt der Shop jeweils ein anderes Foto. Alle drei Bilder tragen jedoch denselben Alt-Text: Damen-Sneaker.

Wer das Bild nicht sehen kann, erfährt aus diesem Text nicht, welche Farbe gerade angezeigt wird. Wenn ein Variantenbild eine konkrete Produktvariante zeigt, sollte der Alt-Text die relevante Variante widerspiegeln. Dieser Ratgeber zeigt, wie du sichtbare Unterschiede beschreibst und wann ein gemeinsamer Text genügt.

Was ist ein Variantenbild in WooCommerce?

Ein Variantenbild ist einem bestimmten Eintrag eines variablen WooCommerce-Produkts zugeordnet. Wählt jemand eine Produktoption, kann der Shop statt des bisherigen Bildes das Bild dieser Variation anzeigen. Häufige Variantenattribute sind Farbe, Material, Stil, Muster und Ausführung.

Nicht jede Variation braucht ein eigenes Bild. Eine andere Farbe oder Oberfläche verändert oft das sichtbare Produkt. Die Größen S und M eines T-Shirts können dagegen dasselbe Foto verwenden. Entscheidend für den Alt-Text ist das angezeigte Bild, nicht allein die Anzahl der Varianten im Shop.

Warum brauchen Variantenbilder passende Alt-Texte?

Ein Produkt heißt Damen-Sneaker. Für die weißen, schwarzen und roten Schuhe gibt es eigene Fotos. Steht bei allen Damen-Sneaker, fehlt in der Bildbeschreibung der Unterschied, den die Auswahl sichtbar macht.

Passender sind beispielsweise:

• Weiße Damen-Sneaker aus Leder
• Schwarze Damen-Sneaker aus Leder
• Rote Damen-Sneaker aus Leder

Das Material gehört nur dann dazu, wenn es für diese Schuhe verlässlich bekannt ist und zur Beschreibung passt. Die Farbe ist hier nützlich, weil sie die gezeigten Bilder unterscheidet. Ein Alt-Text muss dennoch nicht jedes Attribut des Produkts wiederholen. Für allgemeine Produktfotos findest du weitere Grundlagen im Leitfaden für WooCommerce-Produktbilder.

Welche Varianteninformationen gehören in den Alt-Text?

Nenne vor allem Merkmale, die das Bild erkennbar vermittelt: Farbe, Material, Muster, Oberfläche, Stil oder eine sichtbare Ausführung. Bei einem gemusterten Hemd kann Blaues Hemd mit Streifen hilfreicher sein als nur Hemd. Bei einem Sofa kann Sofa mit dunkelgrauem Stoffbezug die abgebildete Variante erklären.

Übernimm Produktattribute nicht automatisch. Aus einem Foto lässt sich eine interne Artikelnummer nicht ablesen. Auch Lieferumfang, Preis oder eine unsichtbare technische Eigenschaft werden durch bloßes Anhängen nicht zu Bildinhalt. Produktdaten können eine sichtbare Eigenschaft präzisieren, etwa das Material einer erkennbaren Oberfläche. Sie sollten aber keine Behauptung über das Foto erzeugen, die nicht zum gezeigten Produkt passt.

Dasselbe gilt für Größen: Werden für Schuhgröße 38, 39 und 40 exakt dieselben Fotos verwendet, wären Schuh Größe 38, Schuh Größe 39 und Schuh Größe 40 als Bildbeschreibungen künstliche Unterschiede. Die Größe steht bereits in der Variantenauswahl. Anders ist es, wenn ein Bild die Größe tatsächlich zeigt oder vermittelt, etwa durch einen sichtbaren Größenvergleich.

Farben richtig beschreiben

Ein Baumwoll-Hoodie wird mit jeweils einem eigenen Bild in Schwarz, Hellgrau und Dunkelgrün verkauft. Natürliche Alt-Texte wären:

• Schwarzer Baumwoll-Hoodie
• Hellgrauer Baumwoll-Hoodie
• Dunkelgrüner Baumwoll-Hoodie

Du kannst eine Ansicht ergänzen, wenn sie für das Foto wichtig ist: Dunkelgrüner Baumwoll-Hoodie von hinten. Beschreibe die tatsächliche Farbe so genau, wie es sinnvoll und zuverlässig möglich ist. Eine bloße Auswahlbezeichnung aus dem Shop ist kein Ersatz dafür, das Bild anzusehen.

Hoodie Herren schwarz kaufen günstig Baumwolle ist dagegen keine brauchbare Bildbeschreibung. Alt-Text ist ein Beschreibungstext, kein Feld für Suchbegriffe. Werbewörter helfen auch dann nicht, wenn sie im Produkttitel stehen.

Materialien und Ausführungen

Ein Esszimmerstuhl wird in heller Eiche, Walnuss und schwarz lackierter Ausführung angeboten. Zeigen die Variantenbilder genau diese Oberflächen, passen etwa:

• Esszimmerstuhl aus heller Eiche
• Esszimmerstuhl in Walnuss
• Schwarz lackierter Esszimmerstuhl

Material und Oberfläche sind nicht dasselbe. Ein Holzdekor sollte nicht als massives Holz beschrieben werden, nur weil es ähnlich aussieht. Nutze gesicherte Produktinformationen und prüfe, ob das konkrete Bild die genannte Ausführung zeigt. Bei einer reinen Stoffmuster-Auswahl ohne wechselndes Produktbild entsteht kein neuer Alt-Text für das unveränderte Stuhlfoto.

Was ist mit Größenvarianten?

Die Größen S, M, L und XL eines blauen T-Shirts verwenden dasselbe Bild. Dann genügt für dieses Bild Blaues Baumwoll-T-Shirt. Blaues Baumwoll-T-Shirt Größe M ist nicht nötig, wenn das Foto selbst keine Größeninformation vermittelt.

Eine ausgewählte Größe ist eine Produkteigenschaft, aber nicht automatisch eine sichtbare Eigenschaft des Bildes. Auch vier Datensätze für Größenvarianten verlangen keine vier verschiedenen Bildbeschreibungen. Falls ein Foto tatsächlich einen Größenvergleich oder eine Größenkennzeichnung zeigt, darf der Text diese Information natürlich nennen.

Variantenbild vs. Galeriebild

Ein Variantenbild steht für eine konkrete Produktoption wie Rot oder Walnuss. Ein Galeriebild zeigt meist eine weitere Ansicht oder ein Detail. Ein roter Schuh kann also selbst mehrere Galeriebilder haben; die Begriffe schließen sich nicht gegenseitig aus.

Wie du Blickwinkel und Detailfotos beschreibst, erklärt der eigene Ratgeber zu WooCommerce-Produktgalerien. Hier ist entscheidend, ob eine ausgewählte Variante eine andere sichtbare Produkteigenschaft zeigt.

Müssen alle Varianten einen eigenen Alt-Text haben?

Nein. Nutzen mehrere Varianten exakt dasselbe Bild und vermittelt es dieselbe Information, kann derselbe Alt-Text richtig sein. Unterschiedliche Texte nur für künstliche Eindeutigkeit machen die Beschreibung nicht hilfreicher.

Zeigen separate Bilder dagegen sichtbar verschiedene Farben, Materialien oder Stile, sollten die Texte diese Unterschiede normalerweise wiedergeben. Beschreibe das Bild, nicht die Datenbankstruktur. Prüfe deshalb die tatsächlich verwendeten Bilddateien, bevor du hunderte Variantenfelder bearbeitest.

Wo wird der Alt-Text für Variantenbilder gespeichert?

WooCommerce-Variantenbilder beruhen auf WordPress-Medienanhängen. Der alternative Text eines Bildes wird üblicherweise beim entsprechenden Medienanhang in WordPress gepflegt. Wenn ein Bild für mehrere Größen verwendet wird, teilen diese Varianten somit normalerweise dieselbe Bildbeschreibung.

Was Besucher im alt-Attribut sehen, kann von WooCommerce-Templates, dem Theme, einem Variation-Gallery-Plugin, einem Page Builder oder eigenem Code abhängen. Es gibt daher keine universelle Aussage, dass jedes Theme beim Variantenwechsel den Text auf dieselbe Weise aktualisiert. Maßgeblich ist die Ausgabe im Live-Shop.

Wie prüfe ich Alt-Texte von WooCommerce-Variantenbildern?

1. Öffne ein variables Produkt auf der öffentlichen Shop-Seite.
2. Wähle eine Variante aus.
3. Prüfe, welches Produktbild nun angezeigt wird.
4. Untersuche das gerenderte <img>-Element dieses Bildes.
5. Lies den endgültigen Wert seines alt-Attributs.
6. Wechsle zu einer anderen Variante.
7. Prüfe erneut, ob sowohl das Bild als auch sein Alt-Text passend wechseln.

Vergleiche besonders eine Variante mit eigenem Foto und eine, die ein Bild mit anderen Optionen teilt. Manche Shops tauschen Bilder dynamisch aus. Der ursprüngliche HTML-Quelltext allein zeigt dann möglicherweise nicht jeden Zustand nach einer Auswahl. Eine ausführlichere Anleitung zur Prüfung von Bildwerten findest du unter WooCommerce Alt-Texte prüfen.

Beispiel: Gute Alt-Texte für Produktvarianten

Für Damen-Sneaker aus Leder könnten die Texte so aussehen, sofern die jeweiligen Fotos diese Varianten und Ansichten zeigen:

Die letzten beiden Zeilen verbinden Variante und Ansicht. Für ein Detailfoto ist der Ausschnitt oft wichtiger als die Wiederholung des ganzen Produktnamens. Die Tabelle liefert Beispiele, keine Texte zum ungeprüften Kopieren.

Typische Fehler bei Variantenbildern

• Derselbe allgemeine Titel für sichtbar verschiedene Varianten: Damen-Sneaker unterscheidet Weiß und Rot nicht.
• Dateinamen als Alt-Text: shoe_red_final_2 ist keine natürliche Beschreibung.
• Unsichtbare Attribute anhängen: Größe oder Artikelnummer erklären ein unverändertes Foto nicht.
• Alle Attribute aufzählen: Eine lange Variantenliste verdeckt das sichtbare Merkmal.
• Identische Bilder künstlich unterscheiden: Verschiedene Datensätze machen kein anderes Bild.
• Nur die Standardvariante prüfen: Fehler nach einem Variantenwechsel bleiben verborgen.
• Nur Medienfelder prüfen: Entscheidend ist das gerenderte alt-Attribut im Live-Shop.
• Galerie und Variante verwechseln: Ein Blickwinkel und eine Produktfarbe beantworten verschiedene Fragen.

Alt-Texte für Varianten automatisch erstellen

Bei vielen sichtbaren Varianten kann Automatisierung helfen. Ein sinnvoller Ablauf verbindet Produktname, tatsächlich gezeigte Farbe, gesichertes Material und Bildinhalt. Er prüft vorhandene gute Texte und ergänzt nicht blind jedes WooCommerce-Attribut.

Gerade bei ähnlichen Farben oder Oberflächen sollte ein Ergebnis mit dem Bild verglichen werden. Wie ein Generator für solche Aufgaben eingesetzt werden kann, zeigt der Ratgeber zum KI-Alt-Text-Generator für WooCommerce.

WooCommerce-Variantenbilder im Bulk bearbeiten

Viele variable Produkte können hunderte oder tausende Bilder mit eigenen Farben oder Oberflächen ergeben. Jedes Medienfeld einzeln zu öffnen wird dann langsam. Ein Bulk-Ablauf sollte zuerst gemeinsam genutzte Bilder und bereits passende Texte erkennen und anschließend gezielt die problematischen Fälle bearbeiten. Dazu passt der Leitfaden WooCommerce Alt-Texte im Bulk hinzufügen.

Wie IMSCRIB helfen kann

IMSCRIB scannt den Live-WooCommerce-Shop und prüft das gerenderte Bild-Markup auf den untersuchten Seiten. Das ist hilfreich, weil WooCommerce, Themes und Plugins Variantenbilder dynamisch ausgeben können: Ein korrekt gepflegtes Medienfeld garantiert noch nicht, dass auf der Produktseite der erwartete Wert erscheint.

Der Scanner zeigt die bei seinem Scan gerenderten Bilder und Alt-Texte. Wähle zusätzlich Varianten auf der Live-Seite aus und kontrolliere deren Zustand, wenn du prüfen willst, was nach dem Wechsel ausgegeben wird. Entscheidend ist die tatsächlich sichtbare Shop-Ausgabe.

FAQ

Brauchen WooCommerce-Variantenbilder eigene Alt-Texte?

Wenn sie bedeutungsvolle sichtbare Unterschiede zeigen, sollten diese normalerweise im Alt-Text stehen. Für dasselbe Bild kann derselbe Text genügen.

Sollte die Farbe im Alt-Text stehen?

Ja, wenn die Farbe sichtbar und für die gezeigte Variante relevant ist. Schreibe eine natürliche Beschreibung statt nur den Farbnamen.

Sollte die Größe im Alt-Text stehen?

Gewöhnlich nicht, wenn das Bild bei allen Größen gleich bleibt und selbst keine Größe vermittelt.

Können mehrere Varianten denselben Alt-Text haben?

Ja. Wenn sie dasselbe Bild verwenden und dieselbe visuelle Information vermitteln, ist ein gemeinsamer Text sinnvoll.

Wo ändere ich den Alt-Text eines Variantenbildes?

Normalerweise beim zugrunde liegenden WordPress-Medienanhang. Prüfe anschließend die Ausgabe der betreffenden Variante im Shop.

Warum ändert sich mein Alt-Text beim Variantenwechsel nicht?

Das kann am Theme, an einer Variantengalerie, einem Plugin oder eigener Rendering-Logik liegen. Prüfe, ob Bild und alt-Wert im gerenderten Element wechseln.

Wie prüfe ich den tatsächlichen Alt-Text einer Variante?

Wähle die Variante auf der Live-Produktseite und untersuche das angezeigte <img>-Element. Lies dort das aktuelle alt-Attribut.