Gewährleistungslabel in WooCommerce einbinden: Gratis-Widget

In WooCommerce setzen Sie das Gewährleistungslabel mit einem Block „Individuelles HTML“ in die Vorlage der Produktseite, direkt unter den Warenkorb-Knopf. Bei klassischen Themes geht es über einen kleinen Hook im Child-Theme.

Der Code für WooCommerce

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

Weitere Optionen wie Darstellung und Sprache stellen Sie im Code-Baukasten ein.

Schritt für Schritt in WooCommerce

Vorlage öffnen
In WordPress auf Design → Editor → Vorlagen gehen und „Einzelnes Produkt“ öffnen. Bei klassischen Themes direkt zu Schritt 4.
Block einfügen
Unter dem Block „In den Warenkorb“ einen Block „Individuelles HTML“ einfügen.
Code einsetzen
Den Widget-Code einfügen und die Vorlage speichern. Er gilt damit für alle Produktseiten.
Klassisches Theme
Ohne Block-Editor den Code über den Hook woocommerce_single_product_summary mit Priorität 35 im Child-Theme ausgeben, oder mit einem Snippet-Plugin.

Besonderheiten in WooCommerce

Caching- und Optimierungs-Plugins (etwa für das Zusammenfassen von JavaScript) sollten widget.js nicht verändern. Schließen Sie die Datei bei Bedarf von der Optimierung aus.
Ein Skript im Block „Individuelles HTML“ bleibt nur erhalten, wenn Ihr Benutzer eigenes HTML speichern darf (Recht unfiltered_html, bei Multisite nur Super-Admins). Sonst laden Sie das Skript über ein Snippet-Plugin.
Läuft der Shop mehrsprachig, erkennt das Widget die Sprache aus <html lang>. Mit data-sprache legen Sie sie fest.

Gewährleistungslabel in der Bestellbestätigung

Laut Leitlinien der Kommission soll der Hinweis auch in der Bestätigungs-E-Mail stehen. Die WooCommerce-Mails passen Sie unter WooCommerce → Einstellungen → E-Mails an. Für das Gewährleistungslabel in der Bestellmail fügen Sie dort die amtliche Grafik als Bild aus dem Download ein, je nach Theme über die E-Mail-Vorlagen oder ein E-Mail-Plugin. Ein bloßer Link reicht als dauerhafter Datenträger voraussichtlich nicht (EuGH, Rs. C-49/11); am sichersten steht der Hinweis als Bild, Text oder Anhang direkt in der Mail. Die amtlichen Dateien finden Sie im Download.

Herstellergarantie? Dann gehört das GARAN-Label dazu

Gibt der Hersteller eine kostenlose Haltbarkeitsgarantie von mehr als zwei Jahren auf die ganze Ware, gehört zusätzlich das GARAN-Label auf die Produktseite. Mit dem GARAN-Label-Generator erstellen Sie es in Sekunden aus Jahren, Marke und Modell. Das erste Label ist kostenlos.

Laden Sie die vollständige und die geschachtelte Fassung in die Medienverwaltung von WooCommerce und tragen Sie die Adressen im Widget-Code ein:

<div data-garantielabel
  data-garan-voll="https://…/GARAN-MX-500.svg"
  data-garan-klein="https://…/GARAN-MX-500-geschachtelt.svg"></div>

Das Widget zeigt dann die geschachtelte Fassung unter dem Gewährleistungslabel, ein Klick öffnet das vollständige GARAN-Label.

Häufige Fragen

Brauche ich ein Plugin?

Nein. Ein Block „Individuelles HTML“ reicht. Nur bei klassischen Themes ohne Block-Editor ist ein Snippet-Plugin oder ein Child-Theme der einfachste Weg.

Funktioniert das mit Elementor oder Divi?

Ja. Beide haben ein HTML- bzw. Code-Element, das Sie im Produkt-Template unter den Warenkorb-Knopf ziehen. Produkt-Templates gibt es bei Elementor nur mit Elementor Pro (Theme Builder).

Wird mein Shop langsamer?

Kaum. Das Skript ist klein, lädt asynchron und blockiert den Seitenaufbau nicht.