Kennisgeving wettelijke garantie in WooCommerce: widget

In WooCommerce voeg je de kennisgeving over de wettelijke garantie met een blok ‘Aangepaste HTML’ toe aan het sjabloon van de productpagina, direct onder de knop ‘In winkelwagen’. Bij klassieke thema's regelt een kleine hook in het child theme het.

De code voor WooCommerce

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

Meer opties, zoals weergave en taal, stel je in met de codebouwer.

Stap voor stap in WooCommerce

Open het sjabloon
Ga in WordPress naar Weergave → Editor → Sjablonen en open het sjabloon voor een enkel product. Heb je een klassiek thema, ga dan meteen naar stap 4.
Voeg een blok in
Voeg onder het blok met de knop ‘In winkelwagen’ een blok ‘Aangepaste HTML’ in.
Plak de code
Plak de widgetcode en sla het sjabloon op. Hij geldt dan voor alle productpagina's.
Klassiek thema
Zonder blokeditor geef je de code in je child theme weer via de hook woocommerce_single_product_summary met prioriteit 35, of je gebruikt een snippet-plugin.

Goed om te weten over WooCommerce

Caching- en optimalisatieplugins (bijvoorbeeld plugins die JavaScript-bestanden samenvoegen) mogen widget.js niet aanpassen. Sluit het bestand zo nodig uit van optimalisatie.
Een script in een blok ‘Aangepaste HTML’ blijft alleen behouden als je gebruiker eigen HTML mag opslaan (de bevoegdheid unfiltered_html, bij multisite alleen superbeheerders). Laad het script anders met een snippet-plugin.
Is je webshop meertalig, dan herkent de widget de taal aan <html lang>. Met data-sprache leg je de taal vast.

Waar de kennisgeving hoort in WooCommerce

In blokthema’s bewerk je de template “Single Product” in de site-editor. In klassieke thema’s bouwt WooCommerce de productpagina op uit de template content-single-product.php en de bijbehorende hooks:

woocommerce_single_product_summary vult de samenvatting naast de afbeeldingen. Volgens de template staan daar de titel (prioriteit 5), beoordeling en prijs (10), korte beschrijving (20), de winkelwagenknop (30), metagegevens (40) en deellinks (50). Met prioriteit 35 staat de widget dus direct onder de winkelwagenknop.
woocommerce_after_single_product_summary volgt onder de samenvatting, vóór de tabbladen (10), upsells (15) en gerelateerde producten (20). Daar staat de kennisgeving verder van de koopknop.

Voor de kennisgeving in de footer gebruik je in blokthema’s het templateonderdeel “Footer”. Je vindt het onder Weergave → Editor → Patronen, bij de templateonderdelen. Volgens WooCommerce zijn templateonderdelen altijd gesynchroniseerd: een wijziging geldt overal waar de footer wordt gebruikt. Een blok “Aangepaste HTML” met data-darstellung="link" is daar genoeg.

Variaties, merk en modelidentificatie

Een variabel product bestaat uit variaties. Elke variatie heeft eigen velden, waaronder SKU en “GTIN, UPC, EAN, or ISBN”. Blijven die leeg, dan geldt de waarde van het hoofdproduct. Merken horen sinds WooCommerce 9.6 bij de kern. Je beheert ze onder Producten → Merken en kiest ze in het product.

WooCommerce heeft geen apart veld voor de modelidentificatie. De SKU is je eigen artikelnummer en niet automatisch de modelidentificatie van de producent. Het GARAN-label vermeldt merk en modelidentificatie, dus er is één label per modelidentificatie. Delen alle variaties dezelfde modelidentificatie, dan is één label voor het product genoeg. De widget toont precies één GARAN-label per placeholder en verandert niet mee met de gekozen variatie. Hebben variaties verschillende modelidentificaties, maak die modellen dan aan als aparte producten, elk met een eigen label.

Veelvoorkomende valkuilen in WooCommerce

Thema-updates: wijzigingen in bestanden van WooCommerce of van het hoofdthema gaan bij de volgende update verloren. Daarom overschrijf je templates in het childthema, in de map woocommerce/.
Verouderde templates: WooCommerce werkt overschreven templates niet bij. Welke verouderd zijn, zie je onderaan WooCommerce → Status → Systeemstatus.
Hook in plaats van template: voor de widget heb je geen overschreven template nodig. Een hook in de functions.php van het childthema is genoeg. WordPress laadt dat bestand naast het bestand van het hoofdthema.
Footer: een wijziging in het templateonderdeel geldt op elke pagina met deze footer. Een voorbeeldweergave is er niet, dus controleer de live site.

Meer bronnen

Kennisgeving over de wettelijke garantie in de orderbevestiging

Volgens de richtsnoeren van de Commissie hoort de kennisgeving ook in de bevestigingsmail. WooCommerce-e-mails pas je aan onder WooCommerce → Instellingen → E-mails. Om de kennisgeving over de wettelijke garantie aan de bestelmail toe te voegen, voeg je daar de officiële afbeelding van onze downloadpagina als afbeelding in, afhankelijk van je thema via de e-mailsjablonen of een e-mailplugin. Een losse link telt waarschijnlijk niet als duurzame gegevensdrager (Hof van Justitie van de EU, zaak C-49/11, Content Services); het veiligst zet je de kennisgeving direct in de e-mail, als afbeelding, tekst of bijlage. De officiële bestanden vind je op onze downloadpagina.

Producentengarantie? Voeg dan het GARAN-label toe

Geeft de producent kosteloos een commerciële levensduurgarantie van meer dan twee jaar voor het hele product, dan hoort ook het GARAN-label op de productpagina. Met de GARAN-labelgenerator maak je het in een paar seconden uit het aantal jaren, het merk en het model, je eerste 3 labels gratis en zonder registratie. Onder elk klaar label krijg je een insluitcode met vaste afbeeldings-URL's: je uploadt niets en plakt hem in WooCommerce zoals hierboven beschreven.

Liever je eigen bestanden? Upload dan de volledige en de geneste versie naar de mediabibliotheek van WooCommerce en vul de adressen in de widgetcode in:

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

De widget toont dan de geneste versie onder de kennisgeving over de wettelijke garantie, en één klik opent het volledige GARAN-label.

Veelgestelde vragen

Heb ik een plugin nodig?

Nee. Een blok ‘Aangepaste HTML’ is genoeg. Alleen bij klassieke thema's zonder blokeditor is een snippet-plugin of een child theme de makkelijkste weg.

Werkt dit met Elementor of Divi?

Ja. Beide hebben een HTML- of code-element dat je in het productsjabloon onder de knop ‘In winkelwagen’ sleept. In Elementor heb je voor productsjablonen Elementor Pro (Theme Builder) nodig.

Wordt mijn webshop trager?

Nauwelijks. Het script is klein, laadt asynchroon en blokkeert het opbouwen van de pagina niet.

Waarom prioriteit 35 voor de hook?

Volgens de WooCommerce-template hangt de winkelwagenknop aan prioriteit 30 en de metagegevens aan 40. Met 35 staat de widget precies daartussen, direct onder de koopknop.

Heeft elke variatie een eigen GARAN-label nodig?

Alleen als de variaties verschillende modelidentificaties hebben. De widget toont één label per placeholder en verandert niet mee met de variatie. Zulke modellen kun je beter als aparte producten aanmaken.

Waar stel ik het merk voor het GARAN-label in?

Sinds WooCommerce 9.6 onder Producten → Merken. Het merk kies je in het product. De vroegere Brands-plugin is niet meer nodig.

Kennisgeving over de wettelijke garantie toevoegen in WooCommerce