Advanced Promo Kit pozwala dodawać przyciągające wzrok etykiety produktów — odznaki, które znajdują się bezpośrednio na zdjęciach produktów w Twoim sklepie WooCommerce. Etykiety można w pełni dostosować: wybierasz kształt, tekst, kolory, rozmiar i pozycję, a także możesz opcjonalnie zaplanować ich wyświetlanie tylko podczas wyprzedaży lub kampanii. Ten artykuł przeprowadzi Cię przez proces tworzenia pierwszej etykiety od początku do końca.
Czego będziesz potrzebować
- WooCommerce zainstalowany i aktywny
- Zainstalowany i aktywny Advanced Promo Kit Advanced Promo Kit
- Przynajmniej jeden opublikowany produkt WooCommerce
Krok 1 — Otwórz ekran tworzenia etykiety
W panelu administracyjnym WordPress kliknij Promo Kit w menu po lewej, a następnie kliknij Create Label.
Krok 2 — Wypełnij zakładkę Ogólne
Zakładka General kontroluje treść etykiety i jej kształt.
- W polu Title wprowadź nazwę wewnętrzną dla tej etykiety. Jest ona przeznaczona tylko do Twojej wiadomości i nie jest widoczna dla klientów.
- W polu Badge Label wpisz tekst, który chcesz wyświetlić na odznace — na przykład SALE, NEW lub −20%. Możesz używać dynamicznych zmiennych (patrz tabela poniżej), aby automatycznie wyświetlać dane produktu na żywo. Jak używać symboli zastępczych treści dynamicznych w etykietach produktów
- W sekcji Text Options ustaw rozmiar czcionki (od 8 do 72 px), grubość czcionki (Normal, Bold, Semi Bold lub Light) i wysokość linii.
- W sekcji Badge Shape kliknij wybrany kształt. Dostępnych jest 12 kształtów: Rectangle Horizontal, Rectangle Vertical, Pill, Circle, Square, Ribbon Left, Ribbon Right, Tag, Hexagon, Star, Banner i Custom Image. Jeśli wybierzesz Custom Image, pojawi się przycisk przesyłania, dzięki czemu możesz użyć własnego pliku obrazu jako odznaki.
Zmienne dynamiczne
Wpisz dowolny z tych kodów w polu Badge Label. Advanced Promo Kit zastąpi je rzeczywistymi wartościami, gdy etykieta zostanie wyświetlona na produkcie w Twoim sklepie.
| Zmienna | Zastępowana przez |
|---|---|
{product_price} | Aktualna cena produktu |
{regular_price} | Cena regularna produktu (nieprzeceniona) |
{sale_price} | Cena promocyjna produktu |
{discount_percent} | Procent zniżki, np. 20% |
{discount_amount} | Stała kwota zniżki, np. 10 zł |
{stock_quantity} | Aktualna liczba sztuk produktu w magazynie |
Krok 3 — Dostosuj styl
Kliknij zakładkę Styl, aby kontrolować wygląd swojej etykiety. Zakładka jest podzielona na kilka sekcji.
Opcje stylu
- Kolor odznaki — kliknij próbnik kolorów, aby otworzyć selektor kolorów i wybrać kolor tła dla swojej etykiety.
- Szerokość i Wysokość — wprowadź wartości w pikselach (20–500 px), aby ustawić rozmiar odznaki.
- Promień obramowania — dostosuj każdy róg niezależnie, aby zaokrąglić krawędzie.
- Additional Styles — dodaj dowolny niestandardowy kod CSS potrzebny dla tej konkretnej etykiety.
Przezroczystość i Pozycja
- Przezroczystość — ustaw przezroczystość etykiety od 0 (niewidoczna) do 100 (w pełni kryjąca).
- Obrót — obróć odznakę w zakresie od 0 do 360 stopni.
- Kierunek tekstu — wybierz poziomy lub pionowy.
- Badge Placement — wybierz, czy etykieta ma znajdować się na zdjęciu produktu (nakładając się na nie), czy poza nim (poniżej).
- Pozycja — wybierz górę lub dół, a następnie lewo lub prawo, a następnie wprowadź przesunięcia w pikselach, aby precyzyjnie dostroić, gdzie pojawi się odznaka.
Więcej opcji stylu
Zakładka Style oferuje również następujące opcje:
- Gradient — włącz wypełnienie dwukolorowym gradientem. Wybierz spośród sześciu kierunków gradientu.
- Cień — dodaj cień do swojej odznaki z niestandardowym kolorem, promieniem rozmycia oraz przesunięciami X/Y.
- Animacja — spraw, aby odznaka animowała się automatycznie. Dostępne efekty: Pulsowanie, Błyskanie, Potrząsanie, Podskakiwanie, Obrót i Huśtanie.
- Klikalny adres URL — spraw, aby odznaka była klikalnym linkiem, który przeniesie klientów do określonego przez Ciebie adresu URL.
- Etykietka — pokaż tekst etykietki, gdy klienci najedą kursorem na odznakę.
Krok 4 — Ustaw harmonogram (Opcjonalnie)
Kliknij zakładkę Harmonogram, jeśli chcesz, aby etykieta pojawiała się tylko w określonym przedziale czasowym — na przykład tylko podczas weekendowej wyprzedaży.
- Data rozpoczęcia — data i godzina rozpoczęcia wyświetlania etykiety. Pozostaw puste, aby etykieta wyświetlała się natychmiast po zapisaniu.
- Data zakończenia — data i godzina zakończenia wyświetlania etykiety. Pozostaw puste, aby etykieta wyświetlała się bezterminowo.
Krok 5 — Zapisz etykietę
Gdy będziesz zadowolony z ustawień, kliknij Save na górze ekranu. Etykieta zostanie utworzona i pojawi się na liście etykiet. Ustaw przełącznik na górze ekranu na Active, aby etykieta wyświetlała się w Twoim sklepie, ponieważ nowa etykieta jest domyślnie nieaktywna. Możesz ją edytować w dowolnym momencie, klikając ją na liście.
Korzystanie z podglądu na żywo
Podczas wypełniania zakładek Ogólne i Styl, podgląd na żywo po prawej stronie ekranu aktualizuje się w czasie rzeczywistym. Pokazuje przykładowy produkt z zastosowaną etykietą, dzięki czemu możesz zobaczyć, jak będzie wyglądać przed zapisaniem.
Podgląd używa przykładowych wartości produktów. Zmienne dynamiczne, takie jak {discount_percent}, będą wyświetlać poprawne wartości dla każdego rzeczywistego produktu w Twoim sklepie, gdy etykieta będzie aktywna.
Często zadawane pytania
Jak przypisać etykietę do konkretnych produktów?
Po zapisaniu etykiety otwórz produkt, który chcesz oznaczyć i znajdź pole Advanced Promo Kit na ekranie edycji produktu. Zbuduj etykietę tam. Dotyczy ona tylko tego produktu i zawsze ma pierwszeństwo przed etykietami globalnymi. Możesz również użyć zakładki Conditions podczas tworzenia etykiety, aby automatycznie zastosować ją do produktów spełniających zdefiniowane przez Ciebie kryteria Jak skonfigurować zasady wyświetlania etykiet i warunki w Advanced Promo Kit — na przykład do wszystkich produktów z określonej kategorii lub tych w promocji.
Czy mogę użyć więcej niż jednej etykiety na tym samym produkcie?
Produkt może mieć jedną etykietę specyficzną dla produktu oraz wszelkie etykiety globalne, których warunki spełnia. Ustawienie Maximum Labels Per Product określa, ile etykiet może być wyświetlanych jednocześnie, a domyślnie wynosi 3. Każda etykieta ma własne ustawienia pozycji, dzięki czemu można je układać lub rozkładać na zdjęciu produktu.
Tekst mojej etykiety wygląda na ściśnięty lub obcięty. Jak to naprawić?
Otwórz zakładkę Style dla swojej etykiety i zwiększ wartości Width (Pixel) oraz Height (Pixel). Możesz również zmniejszyć rozmiar czcionki w sekcji Text Options na zakładce General. Domyślny rozmiar etykiety to 80x30px, co jest odpowiednie dla krótkiego tekstu, dlatego dłuższe etykiety, w tym te używające dynamicznych zmiennych, potrzebują więcej miejsca. Dobrym punktem wyjścia jest szerokość od 240 do 280px i wysokość od 36 do 40px. Podglądaj wyniki i dostosowuj, aż tekst będzie wygodnie dopasowany.
Potrzebujesz pomocy?
Jeśli masz pytanie lub napotkasz jakiekolwiek problemy, jesteśmy tutaj, aby pomóc.
- Użytkownicy Premium: Otwórz zgłoszenie wsparcia
- Użytkownicy darmowi: Odwiedź nasze forum społecznościowe
