Jak sprawić, by WooCommerce wyświetlał odznaki z procentem rabatu

Domyślna etykieta „Sale!” w WooCommerce informuje klientów, że produkt jest przeceniony, ale nie o ile oszczędzają. Zniżka 10% i zniżka 40% mogą wyglądać identycznie na stronie sklepu, mimo że reprezentują bardzo różne oszczędności.

Ten dodatkowy kontekst ma znaczenie, gdy klienci aktywnie szukają okazji. Według Deloitte’s 2025 Holiday Retail Survey, 89% ankietowanych konsumentów planowało szukać okazji, aby rozciągnąć swoje budżety. Pokazanie faktycznej zniżki daje im więcej użytecznych informacji w mgnieniu oka niż generyczna etykieta wyprzedaży.

Dzięki Advanced Promo Kit możesz sprawić, by WooCommerce wyświetlał etykiety z procentem zniżki, korzystając z danych produktu na żywo, dzięki czemu liczba ta aktualizuje się wraz ze zmianą ceny. Możesz również pokazywać kwotę oszczędności, ograniczać etykiety do większych obniżek i wyświetlać oferty kuponów lub BOGO bezpośrednio w siatce produktów.

Co domyślna etykieta wyprzedaży WooCommerce może, a czego nie może pokazywać

Domyślnie WooCommerce wyświetla ogólny baner promocyjny na produktach objętych promocją. Może się on pojawiać na stronach sklepu i produktów, ale domyślny baner nie informuje klientów o wysokości rabatu.

Tak ma być. WooCommerce decyduje, czy produkt jest w promocji, a następnie domyślny baner wyświetla ogólny napis „Promocja!”. Nie oblicza procentu ani kwoty oszczędności dla klienta i nie reprezentuje rabatów z kuponów.

Jeśli Twój motyw nie oferuje tekstu baneru, którego potrzebujesz, dwie popularne opcje to fragment kodu, który przepisuje tekst baneru promocyjnego, lub wtyczka etykiet, która generuje tekst z danych produktu. Oba podejścia są omówione poniżej.

Metoda fragmentu kodu i jej ograniczenia

Popularne podejście z fragmentem kodu dla klasycznych szablonów WooCommerce wykorzystuje filtr woocommerce_sale_flash i zastępuje „Promocja!” obliczonym procentem. Nowsze banery promocyjne oparte na blokach używają zamiast tego woocommerce_sale_badge_text, więc klasyczny fragment kodu szablonu może nie wpływać na wszystkie powierzchnie banerów. W obu przypadkach kod odczytuje dane cenowe, oblicza procent i zwraca go jako tekst baneru.

W przypadku prostego produktu z jedną parą cen działa to dobrze.

Podstawowy fragment kodu komplikuje się w trzech miejscach:

• Produkty zmienne i grupowe: nie ma jednej ceny regularnej i promocyjnej dla całego produktu. Kod musi zdecydować, jak reprezentować wiele cen lub wariantów w jednym banerze, więc pojedynczy procent może być mylący.
• Aktualizacje motywu: jeśli dodasz fragment kodu bezpośrednio do pliku functions.php motywu nadrzędnego, aktualizacja motywu może go nadpisać. Motyw potomny lub wtyczka fragmentów kodu przechowuje niestandardowy kod oddzielnie.
• Kupony: podstawowy fragment kodu ceny promocyjnej porównuje tylko ceny produktów. Nie wie automatycznie o kuponie rabatowym 20% ani o ofercie kup jeden, drugi gratis zapisanej w ustawieniach kuponu.

Dodaj próg („tylko baner dla produktów z rabatem powyżej 25%”) lub zaplanowaną datę zakończenia, a fragment kodu stanie się bardziej skomplikowany w utrzymaniu.

Jak Advanced Promo Kit generuje banery rabatowe

Advanced Promo Kit generuje tekst baneru z symboli zastępczych, które są rozwiązywane na podstawie danych produktu podczas ładowania strony. Piszesz etykietę raz, z {discount_percent} tam, gdzie powinna być liczba, a symbol zastępczy oblicza wartość na podstawie bieżących danych cenowych produktu podczas jej rozwiązywania.

Trzy funkcje są szczególnie przydatne w tym przepływie pracy:

• Symbole zastępcze rozwiązują się na żywo: {product_price}, {regular_price}, {sale_price}, {discount_percent} i {discount_amount} pobierają dane z produktu w czasie renderowania, formatowane zgodnie z ustawieniami waluty WooCommerce. W przypadku prostych produktów zmiana ceny automatycznie aktualizuje symbole zastępcze rabatu.
• Puste symbole zastępcze ukrywają etykietę: jeśli symbol zastępczy nic nie zwraca (np. {discount_percent} dla produktu, który nie jest w promocji), cała etykieta jest ukrywana dla tego produktu. Nigdy nie zobaczysz baneru z napisem „Oszczędź!” na produkcie w pełnej cenie.
• Warunki decydują, gdzie się wyświetla: zakładka Warunki zawiera opcje Sprzedaż (Jest / Nie jest) oraz warunek Procent zniżki z operatorami Równe, Różne, Większe niż, Większe lub równe, Mniejsze niż i Mniejsze lub równe, połączone logiką AND/OR.

Advanced Promo Kit posiada również opcjonalną integrację z Advanced Coupons. Po aktywacji darmowego wtyczki Advanced Coupons, zastępczy {ac_coupon-COUPONCODE} renderuje zniżkę z kuponu Advanced Coupons, w tym oferty BOGO. Jest to poza tym, co obsługuje podstawowy fragment ceny promocyjnej.

Ten przewodnik zakłada, że masz już stworzoną podstawową etykietę. Jeśli nie, zacznij od naszego przewodnika po tworzeniu niestandardowych odznak produktów i wróć. Od tego momentu będziemy używać tylko zastępczych i warunków.

Krok 1: Wyświetl odznakę procentową na produktach w promocji

Dla prostych produktów możesz wyświetlić procent zniżki na produktach w promocji za pomocą jednej etykiety, której tekst to -{discount_percent}, a jedynym warunkiem jest Sprzedaż z operatorem Jest. Oto sekwencja.

1. Przejdź do Promo Kit > Utwórz etykietę. Nadaj etykiecie nazwę, którą rozpoznasz na liście Zarządzaj etykietami, na przykład „Procent zniżki”.
2. W polu Etykieta odznaki wpisz myślnik. Następnie rozwiń Zmienna: Produkt w panelu Zmienne pod polem i kliknij {discount_percent}. Zastępcze są wrażliwe na wielkość liter, więc użyj panelu lub skopiuj dokładny kod małymi literami.
3. Sprawdź Podgląd odznaki po prawej stronie. Bez wybranego produktu wyświetla -25%, z ustalonych przykładowych wartości (cena regularna 39,99 $, cena promocyjna 29,99 $). Wybierz produkt z listy rozwijanej nad podglądem, a zostanie on rozwiązany na podstawie aktualnych cen tego produktu.
4. Otwórz zakładkę Warunki i dodaj Sprzedaż z operatorem Jest. Nie wymaga ona żadnej wartości.
5. Wybierz styl i pozycję odznaki w zakładce Styl (więcej o tym poniżej). Nowe etykiety są domyślnie nieaktywne, więc przełącz przełącznik u góry ekranu na Aktywny, a następnie Zapisz.

Wybierz rzeczywisty produkt w podglądzie, a następnie potwierdź tę samą wartość w witrynie po zapisaniu.

Odwiedź kategorię z kilkoma prostymi produktami w promocji. Każdy z nich pokazuje swój procent, a produkty w pełnej cenie nic nie pokazują, ponieważ {discount_percent} jest dla nich pusty. Ściśle rzecz biorąc, warunek Sprzedaż jest tutaj dodatkowym zabezpieczeniem, ponieważ reguła automatycznego ukrywania i tak już nie wyświetlałaby etykiety na produktach w pełnej cenie. Zachowaj ją mimo to, aby lista etykiet była czytelna na pierwszy rzut oka.

Jednym z łatwych błędów jest wpisanie {discount_percent}% off, co renderuje „25%% off” w witrynie i sprawia, że zastępczy wygląda na zepsuty. Zastępczy już zawiera znak procenta, więc napisz -{discount_percent} lub {discount_percent} off. Procent może również wyglądać nieoczekiwanie duży przy stromym rabacie o stałej kwocie: rabat 10 $ na produkt za 12 $ renderuje się jako „-83%”. W przypadku tych produktów użyj zastępczego kwoty w Kroku 2.

Pełna lista wbudowanych symboli zastępczych, z dokładną wielkością liter, której potrzebują, i kiedy każdy z nich jest pusty, znajduje się w naszym podręczniku dotyczącym symboli zastępczych dynamicznych treści.

Krok 2: Pokaż kwotę oszczędności lub tylko powyżej progu

Użyj {discount_amount}, gdy chcesz podkreślić kwotę oszczędności, i dodaj warunek Procent zniżki, gdy chcesz wyświetlać etykiety tylko powyżej określonego progu zniżki.

Według Baymard Institute (2022), 18% + stron e-commerce wpada w co najmniej jedną z czterech pułapek podczas wyświetlania zniżek cenowych na stronie produktu, a w ich obszernych testach najlepiej sprawdza się wyświetlanie zarówno bezwzględnej, jak i względnej zniżki. Wskazują również na „Zasadę 100”: procent dla przedmiotów poniżej 100 USD i kwotę dolarową powyżej, więc „100 USD zniżki” na przedmiot za 1000 USD może wydawać się bardziej znaczące niż „10% zniżki”. Drugi etykieta z tekstem Oszczędź {discount_amount} renderuje się jako „Oszczędź 10,00 $” w walucie Twojego sklepu, a nic innego w konfiguracji się nie zmienia.

Dla progu otwórz zakładkę Warunki i dodaj Procent zniżki z operatorem Większy lub równy. Na przykład, wprowadź 15, jeśli chcesz, aby etykieta pojawiała się tylko na produktach z co najmniej 15% zniżką. Wybierz próg, który pasuje do Twojej promocji. Dla kontekstu, analiza Adobe dotycząca sezonu świątecznego 2025 zgłosiła szczytowe zniżki w wysokości 30,9% w elektronice i 29,6% w zabawkach. Jeśli decydujesz, jak dużą zniżkę zaoferować, nasz post z danymi na temat najskuteczniejszego procentu zniżki omawia to osobno.

Dla produktów zmiennych użyj stałego tekstu, takiego jak „Wybrane opcje w promocji”, zachowaj warunek Procent zniżki i dodaj warunek Typ produktu. Następnie ustaw Dopasowanie zmiennych produktów (Promo Kit > Ustawienia > Ogólne) na Dopasuj dowolną wariację, aby etykieta pojawiła się, gdy co najmniej jedna wariacja spełnia próg.

Oto jak to wygląda w praktyce (przykładowe dane):

Cel	Symbol zastępczy / warunek	Tekst etykiety, który wpisujesz	Co widzą kupujący
Procent zniżki na prostą wyprzedaż	W promocji, Jest + {discount_percent}	-{discount_percent}	-25%
Kwota oszczędności	{discount_amount}	Oszczędź {discount_amount}	Oszczędź 10,00 $
Tylko duże obniżki	Procent zniżki >= 25 + {discount_percent}	Wyprzedaż -{discount_percent}	Wyprzedaż -40%
Oferta kuponu na siatce	{ac_coupon-SUMMER20}	{ac_coupon-SUMMER20} zniżki z kodem SUMMER20	20% zniżki z kodem SUMMER20
Kupon BOGO	{ac_coupon-BOGO2FOR1}	{ac_coupon-BOGO2FOR1}	Kup 1, Get 1 Free

Przykładowy tekst etykiety. Wynikowa wartość jest generowana na podstawie bieżących cen każdego produktu i ustawień kuponu.

Krok 3: Pokaż kupony i oferty BOGO jako etykiety

Etykieta kuponu używa symbolu zastępczego {ac_coupon-COUPONCODE}, który renderuje zniżkę z konkretnego kuponu Advanced Coupons na Twoich etykietach produktów. Podstawowy fragment ceny promocyjnej nie generuje tego, ponieważ oferta znajduje się w kuponie, a nie w cenie produktu.

1. Przejdź do Promo Kit > Ustawienia, otwórz kartę Integracje i włącz wiersz Advanced Coupons for WooCommerce. Przełącznik jest wyszarzony, jeśli Advanced Coupons nie jest aktywny. Pojawi się podopcja Waliduj kupon; na razie pozostaw ją wyłączoną.
2. Utwórz lub edytuj etykietę. W panelu Zmienne przewiń do sekcji Advanced Coupons for WooCommerce, wpisz co najmniej dwa znaki kodu kuponu, wybierz kupon z listy rozwijanej i kliknij Wstaw zmienną. Symbol zastępczy, na przykład {ac_coupon-SUMMER20}, zostanie dodany do tekstu etykiety.
3. Zbuduj wokół niego tekst, na przykład {ac_coupon-SUMMER20} zniżki z kodem SUMMER20. Podgląd natychmiast go rozwiązuje.

To, co wydrukuje symbol zastępczy, zależy od typu kuponu:

• Kupon procentowy: 25%
• Stała zniżka na koszyk: 10,00 USD
• Stała zniżka na produkt: 5,00 USD, i tylko na produkty, do których kupon ma zastosowanie
• Oferta BOGO: Kup 2, otrzymaj 1 za darmo, lub Kup 2, otrzymaj 1 za 50% ceny, i tylko na produkty „kupowane” w ramach oferty. Oferta wymaga konkretnych produktów lub kategorii produktów jako wyzwalacza; oferty wyzwalane przez dowolny produkt lub ustawione na dawanie tego samego produktu nie renderują etykiety.
• Zwrot gotówki jako kredyt sklepowy (Advanced Coupons Premium): 15% zwrotu gotówki lub 10,00 USD zwrotu gotówki

Etykiety stałej zniżki na produkt i BOGO pojawiają się tylko na produktach objętych ofertą; wszędzie indziej symbol zastępczy jest pusty, a etykieta jest ukryta, ta sama zasada co wcześniej. Kupony procentowe, stałe na koszyk i zwroty gotówki nie sprawdzają ograniczeń produktów, więc ich etykieta pokazuje się na każdym produkcie, do którego dociera etykieta. Jeśli jeden z tych kuponów obejmuje tylko kategorię, dodaj pasujący warunek Kategorii Produktów do etykiety. Jeśli używasz kuponu WooCommerce BOGO zbudowanego za pomocą darmowego wtyczki Advanced Coupons, etykieta może ogłaszć ofertę wszędzie tam, gdzie pojawi się obsługiwany produkt „kupowany”.

Opcja Waliduj kupon jest opcjonalna i domyślnie wyłączona. Włącz ją, a Advanced Promo Kit sprawdzi, czy kupon jest ważny i nie wygasł, zanim wyświetli etykietę, a kupon, który nie przejdzie weryfikacji, ukryje etykietę. To pasuje do kodów z datami wygaśnięcia. Pozostaw ją wyłączoną dla kodów wieczystych, które chcesz reklamować bez względu na wszystko.

Jeśli Twoja promocja ma stałe daty, ale chcesz, aby etykieta pojawiła się przed uruchomieniem kuponu, zamiast tego użyj karty Harmonogram. Każda etykieta przyjmuje opcjonalną Datę rozpoczęcia i Datę zakończenia, porównywane w strefie czasowej Twojej witryny, i ukrywa się poza tym oknem. Powiązane integracje dodają dwa kolejne symbole zastępcze: {lp_points} pokazuje punkty lojalnościowe, które produkt zdobywa dzięki Advanced Loyalty Program, podczas gdy {agc_gift_card_value} pokazuje wartość produktu karty podarunkowej dzięki Advanced Gift Cards. Odniesienie typu po typie dla wyników kuponów znajduje się w naszym przewodniku po wyświetlaniu informacji o zniżkach kuponów na etykietach produktów.

Stylizacja, Układanie i Testowanie Twoich Dynamicznych Etykiet

Wartości dynamiczne mogą zajmować więcej miejsca niż tekst zastępczy, który widzisz w edytorze. Dla etykiet takich jak „Oszczędź 10,00 zł”, praktycznym punktem wyjścia jest szerokość około 240 do 280 pikseli i wysokość 36 do 40 pikseli. Wymiary można dostroić w zakładce Styl, gdy zobaczysz rozwiązany tekst.

Dwanaście kształtów odznak znajduje się w zakładce Ogólne (Prostokąt poziomy, Prostokąt pionowy, Pigułka, Okrąg, Kwadrat, Wstążka lewa, Wstążka prawa, Etykieta, Sześciokąt, Gwiazda, Baner i Obraz niestandardowy), wraz z kolorem tekstu, rozmiarem czcionki i jej grubością. Zakładka Styl dodaje kolor odznaki, szerokość, wysokość, promień zaokrąglenia, dopełnienie, krycie i obrót, wszystko z podglądem na żywo. Tła gradientowe, cienie, animacje, klikalny adres URL i etykietka podpowiedzi po najechaniu myszką również tam są. Umiejscowienie to Na obrazie lub Poza obrazem, w każdym z czterech rogów z przesunięciami w pikselach. Aby uzyskać pomysły na kształty i kolory, nasz przegląd projektów odznak wyprzedażowych, które konwertują zawiera piętnaście gotowych przykładów.

Układanie jest domyślnie włączone. Maksymalna liczba etykiet na produkt domyślnie wynosi trzy, a odstęp między etykietami domyślnie wynosi pięć pikseli; oba można dostosować w Ustawienia > Ogólne. Priorytet to kolejność przeciągnij i upuść w Ustawienia > Kolejność priorytetów, gdzie etykiety wyżej na liście pokazują się jako pierwsze, więc przeciągnij „Procent zniżki” nad „Oferta kuponowa”.

Zanim uznasz to za gotowe, sprawdź pięć produktów zarówno w siatce sklepu, jak i na stronie pojedynczego produktu:

• Prosty produkt w promocji: pokazuje swój własny procent
• Produkt wariantowy z mieszanymi zniżkami: pokazuje Twoją etykietę o stałym tekście, jeśli wariant kwalifikuje się
• Produkt w cenie regularnej: nic nie pokazuje
• Produkt, do którego Twój kupon się nie stosuje: brak odznaki BOGO lub stałej ceny produktu, ani odznaki procentowej, stałej koszyka lub zwrotu gotówki, jeśli ograniczyłeś ją warunkiem
• Produkt kwalifikujący się do każdej etykiety: przestrzega ustawienia Maksymalna liczba etykiet na produkt i ustalonej kolejności priorytetów

Często zadawane pytania

Przygotowanie Twoich odznak zniżkowych

Celem jest, aby każda odznaka była zgodna z promocją, którą opisuje. Dynamiczne symbole zastępcze zmniejszają ilość tekstu odznaki, którą musisz ręcznie aktualizować, gdy ceny produktów się zmieniają.

Oto, co należy zrobić dalej:

• Co domyślna odznaka wyprzedaży WooCommerce może, a czego nie może pokazać: zdecyduj, czy domyślna etykieta „Wyprzedaż!” daje kupującym wystarczająco dużo szczegółów o zniżce.
• Metoda fragmentu kodu i jej ograniczenia: jeśli już używasz fragmentu kodu, sprawdź go na produkcie wariantowym, zanim mu zaufasz.
• Pokaż odznakę procentową na produktach w promocji: utwórz etykietę procentową i pamiętaj, że symbol zastępczy zawiera własny znak %.
• Pokaż kwotę oszczędności lub tylko powyżej progu: dodaj etykietę kwoty i zniżkę procentową >= próg.
• Umieść oferty kuponowe i BOGO w siatce: włącz integrację i oznacz swój najlepszy kupon.

Jeśli chcesz, aby WooCommerce wyświetlał procent zniżki bez niestandardowego fragmentu kodu do utrzymania, skonfiguruj odznaki dynamicznych promocji Advanced Promo Kit i powiąż tekst odznaki z danymi produktu.