Etykieta energetyczna w WooCommerce: strzałka klasy obok ceny

Sklep internetowy, który sprzedaje urządzenie objęte unijnym etykietowaniem energetycznym, musi pokazać etykietę tego produktu. Najczęściej robi się to małą kolorową strzałką z klasą energetyczną tuż obok ceny. Art. 5 ust. 1 lit. a rozporządzenia (UE) 2017/1369 nakłada obowiązek pokazania etykiety na sprzedawcę, także przy sprzedaży na odległość, a skalę i dokładny sposób prezentacji określa akt delegowany dla danej grupy produktów. WooCommerce nie ma pola na klasę energetyczną, strzałki ani miejsca na kartę informacyjną produktu. Z tego poradnika dowiesz się, czego przepisy wymagają od sklepu internetowego, jak wygląda poprawna prezentacja online i jak darmowa wtyczka Shoplex dodaje do WooCommerce strzałkę klasy, link do etykiety i link do karty informacyjnej.

Czym jest unijna etykieta energetyczna

Etykieta energetyczna to skala od A do G, zielona na górze i czerwona na dole, która pokazuje kupującemu, jak efektywny jest produkt na tle innych z tej samej grupy. Ramy wyznacza rozporządzenie (UE) 2017/1369, a osobny akt delegowany dla każdej grupy produktów określa jej skalę i sposób prezentacji etykiety. Sklepu dotyczy przede wszystkim art. 5 ust. 1 lit. a: sprzedawca pokazuje etykietę.

Sklep na WooCommerce prawie zawsze występuje w roli sprzedawcy. Dostawca (producent albo importer) dostarcza etykietę i kartę informacyjną produktu, a Twoim zadaniem jest pokazać je poprawnie tam, gdzie klient podejmuje decyzję. Ten podział ma znaczenie przy konfiguracji: wtyczka sklepowa powinna linkować do dokumentów dostawcy, a nie rysować własną etykietę.

Uwaga: Skalę określa akt delegowany dla Twojej grupy produktów. Nie każdy produkt potrzebuje etykiety i nie każda grupa używa tego samego zakresu. Zanim cokolwiek wypełnisz, sprawdź, który akt obejmuje to, co sprzedajesz.

Czego przepisy wymagają od sklepu internetowego

Podstawowy obowiązek wynika z art. 5 ust. 1 lit. a rozporządzenia (UE) 2017/1369: sprzedawca pokazuje etykietę dostarczoną do produktu, i dotyczy to także sprzedaży przez internet, nie tylko sklepu stacjonarnego. Szczegóły prezentacji są w akcie delegowanym dla danej grupy produktów.

Dobrym punktem odniesienia jest rozporządzenie delegowane (UE) 2019/2014, bo jego załącznik VIII dokładnie opisuje prezentację w internecie. Według załącznika VIII wygląda ona tak:

• Strzałka w kolorze klasy energetycznej, umieszczona przy cenie produktu.
• Litera klasy białą pogrubioną czcionką Calibri, w tym samym rozmiarze co cena.
• Zakres skali na czarno na strzałce, z czarną obwódką.
• Pełna etykieta na żądanie: kliknięcie, najechanie albo dotknięcie strzałki pokazuje etykietę, na przykład w okienku, nowej karcie albo wstawce.
• Tekst alternatywny strzałki, który podaje klasę energetyczną.
• Odnośnik do karty informacyjnej produktu przy cenie.

Inne akty delegowane opierają się na tej samej zasadzie, ale wiąże Cię akt dla Twojej grupy produktów. Sprawdź w nim skalę i zasady prezentacji, zanim zaufasz jakimkolwiek ustawieniom domyślnym.

Czego potrzebuje dobre wdrożenie etykiety

Narzędzie, które pokazuje etykietę energetyczną na kartach produktów WooCommerce, powinno spełniać sześć warunków:

• Dane przypisane do produktu. Klasa, skala, etykieta i karta należą do produktu, a nie do ustawień całego sklepu.
• Skala z etykiety. Grupy po przeskalowaniu używają zakresu A-G, a niektóre nadal mają starsze zakresy, na przykład A+++-D. Narzędzie powinno pozwolić dopasować skalę do tego, co jest na etykiecie, zamiast zakładać jedną.
• Wyświetlanie przy cenie, wszędzie tam, gdzie pojawia się cena. Klient widzi ceny na karcie produktu, w siatce kategorii i w blokach produktów na stronie głównej. Strzałka powinna iść za ceną, a nie siedzieć w jednym szablonie.
• Etykieta dostawcy, nie kopia. Etykieta pochodzi od dostawcy albo z unijnej bazy produktów EPREL. Lepiej linkować do oryginału niż wrzucać kopię.
• Cisza przy produktach bez etykiety. Produkt spoza etykietowania energetycznego nie może dostać strzałki. Bez kompletnych danych nic nie powinno się wyświetlić.
• Kod czytelny dla czytników ekranu. Strzałka jest linkiem, więc potrzebuje nazwy, którą odczyta czytnik ekranu, razem z klasą.

Jak robi to Shoplex

Shoplex to darmowa wtyczka do WooCommerce, która realizuje unijne obowiązki konsumenckie jako osobne moduły, a każdy z nich podaje akt, z którego wynika. Moduł etykiety energetycznej, dodany w Shoplex 1.7.0, wyświetla strzałkę klasy przy cenie, linkuje ją do etykiety dostawcy i dodaje odnośnik do karty informacyjnej produktu. Domyślnie jest wyłączony i nic nie robi, dopóki go nie włączysz.

Cztery pola na produkt

Po włączeniu modułu zakładka Shoplex w edytorze produktu WooCommerce dostaje sekcję etykiety energetycznej z czterema polami:

• Klasa efektywności energetycznej: lista z opcją Brak i wszystkimi literami klas, których używają akty delegowane, od A+++ do G.
• Skala: zakres wydrukowany na etykiecie. Domyślny jest A-G, używany przez grupy po przeskalowaniu, a A+++-D, A++-E i A+-F obsługują starsze zakresy, które nadal obowiązują w części grup.
• URL etykiety energetycznej: obraz albo PDF etykiety od dostawcy, na przykład link do etykiety w EPREL.
• URL karty informacyjnej produktu: karta od dostawcy albo strona produktu w EPREL.

Przy zapisie klasa jest sprawdzana z listą poprawnych liter, a nieznana skala wraca do A-G, więc literówka nie wyprodukuje zmyślonej klasy.

Co widzi klient

Shoplex dopina strzałkę przez filtr, którym WooCommerce generuje cenę, więc pojawia się wszędzie tam, gdzie WooCommerce wyświetla cenę produktu: na karcie produktu, w siatce sklepu i kategorii oraz w blokach produktów na innych stronach. Jeśli motyw przesunie cenę, strzałka przesunie się razem z nią. Koszyk i zamówienie wyświetlają ceny pozycji inaczej, więc tam strzałki nie ma.

Strzałka odwzorowuje wzór z załącznika VIII do rozporządzenia delegowanego (UE) 2019/2014:

• Kolor strzałki zależy od pozycji klasy w skali, od ciemnej zieleni na górze do czerwieni na dole. Shoplex przelicza na kolory ekranowe siedem wartości CMYK wydrukowanych w załączniku III tego rozporządzenia.
• Litera klasy jest biała, pogrubiona i złożona krojem Calibri (zapasowo Carlito i Segoe UI), a rozmiar dziedziczy po cenie, obok której stoi.
• Granice zakresu są wypisane na czarno na białym pasku, a strzałka ma czarny obrys.
• Strzałka jest linkiem, który otwiera etykietę dostawcy w nowej karcie.
• Czytnik ekranu odczyta ją na przykład tak: klasa efektywności energetycznej B (skala A do G), otwiera etykietę energetyczną.

Jeśli podasz adres karty, za strzałką pojawia się odnośnik do karty informacyjnej produktu (w angielskim interfejsie: “Product information sheet”), który też otwiera się w nowej karcie.

Kiedy nic się nie wyświetla

Moduł celowo niczego nie dopowiada. Strzałka pojawia się tylko wtedy, gdy spełnione są oba warunki: produkt ma klasę należącą do wybranej skali i ma adres etykiety. Klasa bez etykiety albo klasa spoza skali (A+++ przy produkcie ze skalą A-G) nie wyświetla niczego. Odnośnik do karty pojawia się tylko przy wypełnionym adresie. Produkty niezwiązane z energią nigdy nic nie pokazują, więc moduł możesz włączyć w mieszanym katalogu bez ruszania reszty.

Warianty i obecne ograniczenie

Warianty korzystają z etykiety produktu nadrzędnego. To pasuje do typowej sytuacji, czyli jednego urządzenia w kilku kolorach, ale nie do sklepu, który sprzedaje ten sam model w rozmiarach o różnych klasach. Osobne pola dla wariantów są zgłoszone jako oddzielna zmiana. Do tego czasu rozmiary o różnych klasach wystaw jako osobne produkty.

Dla programistów

Gotowy kod przechodzi przez filtr shoplex/energy_label/html razem z produktem i jego danymi energetycznymi, więc motyw albo dodatek może zmienić wynik bez podmieniania modułu. Arkusz stylów ładuje się na stronach sklepu, a gdzie indziej tylko wtedy, gdy faktycznie wyświetla się któraś z informacji przy cenie.

Ten sam moduł etykiety energetycznej jest też w darmowej wtyczce Polski od wersji 1.45.0, dla sklepów, które już używają Polski do obsługi polskich wymogów w WooCommerce.

Konfiguracja

Uruchomienie strzałki zajmuje kilka minut na produkt:

1. Zainstaluj Shoplex przez Wtyczki > Dodaj nową i włącz go. WooCommerce musi być aktywny.
2. Otwórz WooCommerce > Shoplex i włącz moduł etykiety energetycznej.
3. Edytuj produkt, którego dotyczy etykieta, i otwórz zakładkę Shoplex w danych produktu.
4. Wybierz klasę i skalę dokładnie tak, jak są wydrukowane na etykiecie od dostawcy.
5. Wklej adres etykiety i adres karty informacyjnej produktu, a potem zaktualizuj produkt.
6. Obejrzyj kartę produktu i stronę kategorii: w obu miejscach strzałka stoi przy cenie, a kliknięcie otwiera etykietę.

W dokumentacji Shoplex znajdziesz wszystkie moduły, ich ustawienia i akty, które realizują.

Praktyczne wskazówki

• Skalę przepisuj z etykiety, nie z pamięci. Skalę określa akt delegowany dla Twojej grupy produktów, a wydrukowana etykieta najszybciej pokazuje, który zakres obowiązuje.
• Tam, gdzie się da, używaj linków z EPREL. Unijna baza produktów EPREL ma link do etykiety i stronę produktu dla zarejestrowanych modeli, więc linkujesz do dokumentów dostawcy, a nie do kopii.
• Sprawdź strzałkę także w siatce kategorii. Strzałka idzie za ceną produktu, więc obejrzyj stronę sklepu i bloki produktów na stronie głównej, nie tylko kartę produktu.
• Wypełniaj link do karty, nie tylko do etykiety. Sama strzałka bez odnośnika do karty spełnia tylko połowę wzoru z załącznika VIII.
• Traktuj moduł jako narzędzie do wyświetlania. Shoplex pokazuje to, co wpiszesz. Czy produkt wymaga etykiety i który akt oraz skala go obejmują, rozstrzygasz Ty jako sprzedawca.

Etykieta energetyczna w Shoplex a standardowe WooCommerce

Funkcja	Standardowe WooCommerce	Moduł etykiety energetycznej Shoplex
Klasa energetyczna produktu	Brak	Wybór od A+++ do G
Skala	Brak	A-G, A+++-D, A++-E, A+-F
Strzałka przy cenie	Brak	Tak, w kolorze klasy
Gdzie się wyświetla	n/d	Karta produktu, siatki sklepu i kategorii, bloki produktów
Etykieta na żądanie	Brak	Strzałka otwiera etykietę dostawcy w nowej karcie
Link do karty informacyjnej	Brak	Odnośnik do karty obok strzałki
Produkty bez etykiety	n/d	Nic się nie wyświetla
Tekst dla czytnika ekranu	n/d	Klasa i skala w nazwie linku
Warianty	n/d	Dziedziczą etykietę produktu nadrzędnego
Koszt	Za darmo (bez obsługi etykiety)	Za darmo, bez płatnej wersji

Inne obowiązki na tej samej karcie produktu

Etykieta energetyczna rzadko jest jedyną informacją prawną przy cenie. Shoplex obsługuje sąsiednie obowiązki w tej samej wtyczce, każdy jako osobny moduł: cenę jednostkową, najniższą cenę przed obniżką, informacje o VAT i kosztach dostawy oraz dane o bezpieczeństwie produktu. Poradniki GPSR w WooCommerce i dyrektywa Omnibus w WooCommerce opisują te dwa tematy równie dokładnie.

W skrócie

Jeśli sprzedajesz produkty objęte unijnym etykietowaniem energetycznym, art. 5 ust. 1 lit. a rozporządzenia (UE) 2017/1369 zobowiązuje Cię jako sprzedawcę do pokazania etykiety także w internecie, a skalę i sposób prezentacji określa akt delegowany dla Twojej grupy produktów. Załącznik VIII do rozporządzenia delegowanego (UE) 2019/2014 opisuje wersję internetową: strzałkę w kolorze klasy przy cenie, która otwiera etykietę, i odnośnik do karty informacyjnej produktu. WooCommerce nie ma żadnego z tych elementów. Darmowa wtyczka Shoplex dodaje cztery pola na produkt (klasa, skala, adres etykiety, adres karty), wyświetla strzałkę przy cenie na kartach produktów, w siatkach sklepu i w blokach produktów, linkuje etykietę i kartę od dostawcy i nie pokazuje niczego przy produktach bez kompletnej etykiety.