EU-Energielabel in WooCommerce: der Klassenpfeil neben dem Preis

Ein Onlineshop, der ein Gerät mit EU-Energielabel verkauft, muss das Label dieses Produkts zeigen, und üblicherweise geschieht das mit einem kleinen farbigen Pfeil samt Energieklasse direkt neben dem Preis. Art. 5 Abs. 1 Buchst. a der Verordnung (EU) 2017/1369 macht den Händler für die Anzeige des Labels verantwortlich, auch im Fernabsatz über das Internet, und der delegierte Rechtsakt für deine Produktgruppe legt Skala und genaue Darstellung fest. WooCommerce hat kein Feld für eine Energieklasse, keinen Pfeil und keinen Platz für das Produktdatenblatt. Das kostenlose Plugin Shoplex ergänzt WooCommerce um den Klassenpfeil, den Link zum Label und den Link zum Produktdatenblatt.

Was das EU-Energielabel ist

Das EU-Energielabel ist die Skala von A bis G, oben grün und unten rot, die Käufern zeigt, wie effizient ein Produkt im Vergleich zu anderen derselben Gruppe ist. Den Rahmen setzt die Verordnung (EU) 2017/1369, und ein eigener delegierter Rechtsakt für jede Produktgruppe legt deren Skala und die Darstellung des Labels fest. Für einen Shop ist Art. 5 Abs. 1 Buchst. a der entscheidende Teil: Der Händler zeigt das Label.

Ein WooCommerce-Shop ist fast immer Händler. Der Lieferant (Hersteller oder Importeur) stellt das Label und das Produktdatenblatt bereit; deine Aufgabe ist es, beides dort korrekt zu zeigen, wo die Kaufentscheidung fällt. Ein Shop-Plugin sollte deshalb die Dokumente des Lieferanten verlinken und kein eigenes Label zeichnen.

Hinweis: Der delegierte Rechtsakt für deine Produktgruppe legt die Skala fest. Nicht jedes Produkt braucht ein Label, und nicht jede Gruppe nutzt denselben Bereich. Prüfe, welcher Rechtsakt für dein Sortiment gilt, bevor du etwas einträgst.

Was die Vorgaben von einem Onlineshop verlangen

Die Grundpflicht steht in Art. 5 Abs. 1 Buchst. a der Verordnung (EU) 2017/1369: Der Händler zeigt das für das Produkt gelieferte Label, und das gilt auch für den Fernabsatz über das Internet, ebenso wie für das Ladengeschäft. Die Einzelheiten der Darstellung regelt der delegierte Rechtsakt der jeweiligen Produktgruppe.

Ein guter Bezugspunkt ist die Delegierte Verordnung (EU) 2019/2014, denn ihr Anhang VIII beschreibt die Darstellung im Internet genau. Nach Anhang VIII sieht sie so aus:

• Ein Pfeil in der Farbe der Energieklasse, in der Nähe des Produktpreises.
• Der Klassenbuchstabe in weißer Calibri fett, in derselben Schriftgröße wie der Preis.
• Der Skalenbereich in Schwarz auf dem Pfeil, mit schwarzem Rand.
• Das vollständige Label auf Abruf: Ein Klick, Mouseover oder Tippen auf den Pfeil zeigt das Label, zum Beispiel in einem Pop-up, einem neuen Tab oder einem eingeblendeten Fenster.
• Ein Alternativtext für den Pfeil, der die Energieklasse nennt.
• Ein Link zum Produktdatenblatt in der Nähe des Preises.

Andere delegierte Rechtsakte folgen demselben Gedanken, verbindlich ist aber der Rechtsakt für deine Produktgruppe. Lies dort Skala und Darstellungsregeln nach, bevor du dich auf eine Voreinstellung verlässt.

Was eine gute Energielabel-Lösung braucht

Ein Werkzeug, das das Energielabel auf WooCommerce-Produktseiten bringt, muss sechs Dinge leisten:

• Daten pro Produkt. Klasse, Skala, Label und Datenblatt gehören zum Produkt, nicht zu einer shopweiten Einstellung.
• Die Skala vom Label. Neu skalierte Gruppen nutzen A bis G, manche Gruppen noch ältere Bereiche wie A+++ bis D. Das Werkzeug sollte die Skala vom gedruckten Label übernehmen lassen, statt eine einzige vorauszusetzen.
• Anzeige neben dem Preis, überall wo der Preis erscheint. Kunden sehen Preise auf der Produktseite, in Kategorierastern und in Produktblöcken auf der Startseite. Der Pfeil sollte dem Preis folgen, statt in einem einzigen Template zu stehen.
• Das Label des Lieferanten statt einer Kopie. Das Label kommt vom Lieferanten oder aus der EU-Produktdatenbank EPREL. Ein Link auf das Original ist besser als eine hochgeladene Kopie.
• Stille bei Produkten ohne Label. Ein Produkt ohne Energielabel darf keinen Pfeil bekommen. Ohne vollständige Daten sollte nichts erscheinen.
• Barrierefreies Markup. Der Pfeil ist ein Link und braucht daher einen Namen, den ein Screenreader vorliest, einschließlich der Klasse.

Wie Shoplex das löst

Shoplex ist ein kostenloses WooCommerce-Plugin, das Pflichten aus dem EU-Verbraucherrecht als einzelne Module umsetzt, und jedes Modul nennt den Rechtsakt, aus dem es stammt. Das Modul Energielabel, eingeführt in Shoplex 1.7.0, setzt den Klassenpfeil neben den Preis, verlinkt ihn mit dem Label des Lieferanten und ergänzt den Link zum Produktdatenblatt. Es ist standardmäßig ausgeschaltet und tut nichts, bis du es aktivierst.

Die vier Felder pro Produkt

Ist das Modul aktiv, erhält der Tab Shoplex im WooCommerce-Produkteditor einen Abschnitt zum Energielabel mit vier Feldern:

• Energieeffizienzklasse: eine Auswahl mit “Keine” und allen Klassenbuchstaben, die ein delegierter Rechtsakt verwendet, von A+++ bis G.
• Skala: der auf dem Label gedruckte Bereich. A bis G ist voreingestellt und gilt für neu skalierte Produktgruppen; A+++ bis D, A++ bis E und A+ bis F decken die älteren Bereiche ab, die für einige Gruppen noch gelten.
• Energielabel-URL: das Label als Bild oder PDF vom Lieferanten, zum Beispiel der Label-Link aus EPREL.
• Produktdatenblatt-URL: das Datenblatt vom Lieferanten oder die Produktseite in EPREL.

Beim Speichern wird die Klasse gegen die Liste gültiger Buchstaben geprüft, und eine unbekannte Skala fällt auf A bis G zurück. Ein Tippfehler kann also keine erfundene Klasse erzeugen.

Was Kunden sehen

Shoplex hängt den Pfeil über den Filter an, mit dem WooCommerce den Preis ausgibt. Er erscheint daher überall, wo WooCommerce den Produktpreis zeigt: auf der Produktseite, im Shop- und Kategorieraster und in Produktblöcken auf anderen Seiten. Verschiebt ein Theme den Preis, wandert der Pfeil mit. Warenkorb und Kasse geben die Positionspreise auf anderem Weg aus, dort erscheint der Pfeil nicht.

Der Pfeil folgt dem Muster aus Anhang VIII der Delegierten Verordnung (EU) 2019/2014:

• Die Farbe des Pfeils ergibt sich aus der Position der Klasse in der Skala, von Dunkelgrün oben bis Rot unten. Shoplex rechnet dafür die sieben CMYK-Werte aus Anhang III dieser Verordnung in Bildschirmfarben um.
• Der Klassenbuchstabe ist weiß, fett und in Calibri gesetzt (mit Carlito und Segoe UI als Ersatz), und er übernimmt die Schriftgröße des Preises, neben dem er steht.
• Oberes und unteres Ende des Bereichs stehen in Schwarz auf einem weißen Streifen, und der Pfeil hat eine schwarze Kontur.
• Der Pfeil ist ein Link, der das Label des Lieferanten in einem neuen Tab öffnet.
• Sein zugänglicher Name lautet zum Beispiel: Energieeffizienzklasse B (Skala A bis G), öffnet das Energielabel.

Ist eine Datenblatt-URL eingetragen, folgt auf den Pfeil ein Link zum Produktdatenblatt (in der englischen Oberfläche “Product information sheet”), der sich ebenfalls in einem neuen Tab öffnet.

Wann nichts erscheint

Der Pfeil erscheint nur, wenn beide Bedingungen erfüllt sind: Das Produkt hat eine Klasse, die zur gewählten Skala gehört, und es hat eine Label-URL. Eine Klasse ohne Label oder eine Klasse außerhalb der Skala (A+++ bei einem Produkt mit Skala A bis G) gibt nichts aus. Der Datenblatt-Link erscheint nur mit eingetragener URL. Produkte ohne Energiebezug zeigen nie etwas an, deshalb kannst du das Modul auch in einem gemischten Sortiment einschalten, ohne den Rest anzufassen.

Variationen und die aktuelle Grenze

Variationen verwenden das Energielabel ihres übergeordneten Produkts. Das passt zum häufigen Fall, einem Gerät in mehreren Farben, aber nicht zu einem Shop, der dasselbe Modell in Größen mit unterschiedlichen Klassen verkauft. Felder pro Variation sind als eigene Änderung erfasst. Bis dahin legst du solche Größen am besten als separate Produkte an.

Für Entwickler

Das fertige Markup läuft zusammen mit dem Produkt und seinen Energiedaten durch den Filter shoplex/energy_label/html, sodass ein Theme oder Add-on die Ausgabe anpassen kann, ohne das Modul zu ersetzen. Das Stylesheet lädt auf Shopseiten und anderswo nur dann, wenn tatsächlich ein Preishinweis ausgegeben wird.

Dasselbe Energielabel-Modul steckt ab Version 1.45.0 auch im kostenlosen Plugin Polski, für Shops, die Polski bereits für die polnischen Anforderungen in WooCommerce nutzen.

Die Einrichtung

Den Pfeil live zu bringen, dauert pro Produkt ein paar Minuten:

1. Installiere Shoplex über Plugins > Installieren und aktiviere es. WooCommerce muss aktiv sein.
2. Öffne WooCommerce > Shoplex und schalte das Modul Energielabel ein.
3. Bearbeite ein betroffenes Produkt und öffne den Tab Shoplex in den Produktdaten.
4. Wähle Klasse und Skala genau so, wie sie auf dem Label des Lieferanten gedruckt sind.
5. Trage die Label-URL und die URL des Produktdatenblatts ein und aktualisiere das Produkt.
6. Sieh dir Produktseite und Kategorieseite an: In beiden steht der Pfeil neben dem Preis, und ein Klick öffnet das Label.

Die Shoplex-Dokumentation listet alle Module, ihre Einstellungen und den Rechtsakt, den jedes Modul umsetzt.

Praktische Tipps

• Übernimm die Skala vom Label, nicht aus dem Gedächtnis. Der delegierte Rechtsakt für deine Produktgruppe legt die Skala fest, und das gedruckte Label zeigt am schnellsten, welcher Bereich gilt.
• Nutze EPREL-Links, wo es geht. Die EU-Produktdatenbank EPREL hat für registrierte Modelle einen Label-Link und eine Produktseite, so verlinkst du die Dokumente des Lieferanten statt einer Kopie.
• Prüfe den Pfeil auch im Kategorieraster. Der Pfeil folgt dem Produktpreis, also erscheint er auch auf der Shopseite und in Produktblöcken der Startseite.
• Trage neben dem Label auch das Datenblatt ein. Der Pfeil ohne Datenblatt-Link deckt nur die Hälfte des Musters aus Anhang VIII ab.
• Sieh das Modul als Anzeigewerkzeug. Shoplex zeigt, was du einträgst. Ob ein Produkt ein Label braucht und welcher Rechtsakt und welche Skala gelten, entscheidest du als Händler.

Energielabel in Shoplex gegenüber Standard-WooCommerce

Funktion	Standard-WooCommerce	Shoplex-Modul Energielabel
Energieklasse pro Produkt	Keine	Auswahl von A+++ bis G
Skala	Keine	A bis G, A+++ bis D, A++ bis E, A+ bis F
Pfeil neben dem Preis	Keiner	Ja, in der Farbe der Klasse
Wo er erscheint	n. v.	Produktseite, Shop- und Kategorieraster, Produktblöcke
Label auf Abruf	Keins	Pfeil öffnet das Label des Lieferanten in neuem Tab
Link zum Produktdatenblatt	Keiner	Link neben dem Pfeil
Produkte ohne Label	n. v.	Keine Ausgabe
Screenreader-Text	n. v.	Klasse und Skala im Linknamen
Variationen	n. v.	Übernehmen das Label des übergeordneten Produkts
Kosten	Kostenlos (ohne Energielabel)	Kostenlos, keine Bezahlversion

Weitere Pflichten auf derselben Produktseite

Das Energielabel ist selten die einzige Pflichtangabe am Preis. Shoplex deckt die benachbarten Pflichten im selben Plugin ab, jeweils als eigenes Modul: Grundpreis, niedrigster Preis vor einer Preisermäßigung, Hinweise zu Mehrwertsteuer und Versandkosten sowie Angaben zur Produktsicherheit. Die Leitfäden GPSR für WooCommerce und WooCommerce Omnibus behandeln diese beiden Themen.

Kurz gesagt

Wenn du Produkte mit EU-Energielabel verkaufst, verpflichtet Art. 5 Abs. 1 Buchst. a der Verordnung (EU) 2017/1369 dich als Händler, das Label auch online zu zeigen, und der delegierte Rechtsakt für deine Produktgruppe legt Skala und Darstellung fest. Anhang VIII der Delegierten Verordnung (EU) 2019/2014 beschreibt die Internetfassung: einen Pfeil in Klassenfarbe neben dem Preis, der das Label öffnet, plus einen Link zum Produktdatenblatt. WooCommerce hat nichts davon. Das kostenlose Plugin Shoplex ergänzt vier Felder pro Produkt (Klasse, Skala, Label-URL, Datenblatt-URL), zeigt den Pfeil neben dem Produktpreis auf Produktseiten, in Shop-Rastern und in Produktblöcken, verlinkt Label und Datenblatt des Lieferanten und bleibt bei jedem Produkt ohne vollständiges Label stumm.