Umieszczanie odznak

Rząd odznak pojawia się na dwa sposoby: automatycznie pod przyciskiem dodania do koszyka na karcie produktu i ręcznie przez shortcode [trust_badges]. Ta strona omawia oba, a do tego motywowanie oraz zachowanie pod kątem wydajności i dostępności.

Odznaki pod przyciskiem dodaj do koszyka

Domyślne umiejscowienie, dokładnie tam, gdzie kupujący decyduje o zakupie.

1. Otwórz WooCommerce > Trust Badges i upewnij się, że Włącz odznaki zaufania oraz Pokazuj na kartach produktu są włączone.
2. Wpisz nagłówek w stylu Gwarantowany bezpieczny zakup albo wyczyść pole, by mieć rząd samych ikon.
3. Na karcie Odznaki zaznacz te pasujące do sklepu, od trzech do pięciu zwykle czyta się lepiej niż wszystkie dziesięć.
4. Zapisz.

Rząd drukuje się na woocommerce_after_add_to_cart_form z domyślnym priorytetem, więc w większości motywów ląduje tuż pod przyciskiem dodania do koszyka w podsumowaniu produktu. Ponieważ to renderowany po stronie serwera PHP w normalnym przepływie dokumentu, nie powoduje przeskoku układu.

Nie ma umiejscowienia w koszyku ani w zamówieniu i nie ma ustawienia pozycji: hak karty produktu i shortcode to dwa sposoby, na jakie rząd się pojawia.

Wstawianie rzędu shortcodem

Aby pokazać rząd poza podsumowaniem produktu, na stronie, w bloku, w obszarze widżetów, w części szablonu, użyj:

[trust_badges]

Shortcode nie przyjmuje żadnych atrybutów; renderuje ten sam rząd z zapisanych ustawień (te same odznaki, nagłówek i kolor). Arkusz stylów dokłada na żądanie, więc działa na stronach, gdzie rząd karty produktu w ogóle się nie uruchamia. Główny przełącznik Włącz odznaki zaufania i tak musi być włączony. Jeśli chcesz mieć odznaki wyłącznie tam, gdzie sam je wstawisz, wyłącz Pokazuj na kartach produktu i zostań przy samym shortcode.

W motywie blokowym wstaw blok Shortcode i wklej [trust_badges]. W klasycznych widżetach użyj widżetu Shortcode lub Tekst.

Motywowanie pod markę

• Wystarczy jeden kolor. Ustaw Kolor ikon na ekranie ustawień; koloruje ikony i nagłówek, a na front trafia inline jako --trust-seal, więc każda odznaka idzie za nim przez currentColor.
• Reszta w CSS. Rozmiar, odstęp i zaokrąglenie to --trust-icon-size, --trust-gap i --trust-radius na .trust-badges; ustaw je w arkuszu motywu, by przeskalować lub zwęzić rząd.
• Same ikony. Zostaw nagłówek pusty, by mieć zwarty, minimalistyczny pasek.

Jak wygląda znacznik rzędu

Wynikiem jest kontener .trust-badges z opcjonalnym akapitem .trust-badges__heading i listą .trust-badges__list (role="list"). Każda odznaka to element listy, którego ikona jest opakowana w <span class="trust-badge__icon" role="img" aria-label="...">, gdzie etykieta to nazwa odznaki z biblioteki (na przykład Bezpieczny zakup (kłódka)). Ikony są widoczne, a etykiety czytają technologie asystujące, nie są drukowane jako podpisy.

Nie ma ścieżki nadpisania szablonu w motywie: rząd renderuje się z własnego pliku wtyczki templates/badges.php i nie przechodzi przez locate_template, więc skopiowanie go do motywu nic nie daje. Zamiast tego przemotywuj go właściwościami niestandardowymi CSS powyżej.

Dlaczego pozostaje szybkie i dostępne

• Bez JavaScriptu na froncie. Wynik na froncie to czysty CSS, na stronie nie działa żaden skrypt.
• Bez zapytań zewnętrznych. Każda ikona to inline SVG z Twojej witryny, nic nie ładuje się z zewnątrz i nie ma czego śledzić.
• Bez przeskoku układu. Rząd renderuje się po stronie serwera w normalnym przepływie, więc nie przesuwa treści przy malowaniu strony.
• Dostępne nazwy i lista. Każda odznaka ma dostępną nazwę przez aria-label, a rząd to semantyczna lista.
• Ruch respektuje ustawienia. Uniesienie przy najechaniu i jednorazowa animacja pieczęci są opakowane w prefers-reduced-motion: no-preference, więc odwiedzający, którzy proszą o ograniczony ruch, dostają nieruchomy pasek.