Jeśli chcesz, aby na zdjęciach produktów pojawiały się odznaki wyprzedaży lub kampanii, możesz je stworzyć w Advanced Promo Kit. Ten przewodnik przeprowadzi Cię przez proces tworzenia etykiety, w tym opcje zakładki Styl, takie jak animacje i podpowiedzi po najechaniu kursorem, dzięki czemu odznaka będzie wyglądać tak, jak zaplanowałeś na stronach sklepu i produktów.
Wymagania wstępne
- WooCommerce zainstalowany i aktywny
- Zainstalowany i aktywny Advanced Promo Kit Advanced Promo Kit
- Przynajmniej jeden opublikowany produkt WooCommerce
Krok 1: otwórz ekran Tworzenie 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 Etykieta odznaki wpisz tekst, który ma się pojawić na odznace: na przykład SALE, NOWOŚĆ lub -20%. Możesz używać zmiennych dynamicznych (patrz tabela poniżej), aby automatycznie wyświetlać dane produktu na żywo. Jak używać dynamicznych symboli zastępczych treści 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ść (piksele) i Wysokość (piksele): wprowadź wartości w pikselach (20–500 px), aby ustawić rozmiar odznaki.
- Promień zaokrąglenia (piksele): dostosuj każdy róg niezależnie, aby zaokrąglić krawędzie.
- Wypełnienie tekstu (piksele): ustaw wypełnienie po każdej stronie tekstu odznaki.
- Dodatkowe style: 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ę między 0 a 360 stopniami.
- Kierunek tekstu: wybierz Poziomy lub Pionowy.
- Umiejscowienie odznaki: wybierz Na obrazie (nakładka na obraz produktu) lub Poza obrazem (poniżej karty).
- Pozycja odznaki: wybierz górną lub dolną, a następnie lewą lub prawą, a następnie wprowadź przesunięcia w pikselach, aby precyzyjnie dostroić, gdzie pojawia się odznaka.
Gradient i Cień
Użyj tych kontrolek, aby nadać odznace wypełnienie gradientowe i cień.
- Włącz gradient: zastosuj dwukolorowe wypełnienie gradientowe. Wybierz Kolor gradientu 1, Kolor gradientu 2 i Kierunek gradientu (od lewej do prawej, od prawej do lewej, od góry do dołu, od dołu do góry lub po przekątnej).
- Włącz cień: dodaj cień z Kolorem cienia, Rozmyciem, Przesunięciem X i Przesunięciem Y.
Animacja
Użyj Typu animacji, aby odznaka animowała się w sklepie. Opcje: Brak, Pulsowanie, Błysk, Potrząsanie, Podskakiwanie, Obrót i Kołysanie. Wybierz Brak, aby odznaka pozostała nieruchoma.
Interaktywność
- Adres URL kliknięcia (Link do strony): spraw, aby odznaka była linkiem. Kupujący, którzy ją klikną, zostaną przekierowani pod podany adres URL.
- Tekst podpowiedzi (po najechaniu): tekst, który pojawia się, gdy kupujący najeżdża kursorem na odznakę.
Krok 4: ustaw harmonogram (opcjonalnie)
Kliknij kartę Zaplanuj, 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 była widoczna natychmiast po zapisaniu.
- Data zakończenia: data i godzina zakończenia wyświetlania etykiety. Pozostaw puste, aby etykieta była widoczna 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.
Rozwiązywanie problemów
Ekran tworzenia etykiety jest objęty komunikatem licencyjnym
Advanced Promo Kit wymaga aktywnej licencji. Gdy licencja jest brakująca lub wygasła, wtyczka zakrywa ekran powiadomieniem o licencji zamiast pozwalać na edycję etykiety. Dodaj lub odnów swój klucz licencyjny, a następnie przeładuj stronę. Kontrolki na karcie Styl nigdy nie są wyszarzone, więc pole wyglądające na wyłączone jest problemem przeglądarki lub konfliktu, a nie licencji.
Etykieta nie wyświetla się w sklepie
Ustaw przełącznik na górze ekranu Tworzenia Etykiety na Aktywny. Nowa etykieta jest domyślnie nieaktywna. Następnie sprawdź reguły wyświetlania dla tej etykiety. Zobacz Jak skonfigurować reguły i warunki wyświetlania etykiet w Advanced Promo Kit.
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ć karty Warunki podczas tworzenia etykiety, aby automatycznie zastosować ją do produktów, które pasują do zdefiniowanych przez Ciebie kryteriów Jak skonfigurować reguły i warunki wyświetlania etykiet w Advanced Promo Kit: na przykład do wszystkich produktów w określonej kategorii lub na wyprzedaży.
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.
Czy mogę inaczej stylizować etykiety na urządzeniach mobilnych?
Nie. Advanced Promo Kit nie ma oddzielnego panelu stylów mobilnych. Te same ustawienia karty Styl dotyczą każdego widoku. Kontroluj, które produkty wyświetlają etykietę, za pomocą reguł wyświetlania, a nie przełącznika urządzenia. Zobacz Jak skonfigurować reguły i warunki wyświetlania etykiet w Advanced Promo Kit.
Co dalej
- Jak zarządzać etykietami w Advanced Promo Kit
- Jak skonfigurować reguły i warunki wyświetlania etykiet w Advanced Promo Kit
- Jak używać dynamicznych symboli zastępczych w etykietach produktów
- Ustawienia Advanced Promo Kit
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
