Jak dynamicznie dodawać pasek kodu kuponu do określonych stron produktów za pomocą Divi

Kiedy prowadzisz sklep internetowy, który stworzyłeś za pomocą Divi i WooCommerce, od czasu do czasu będziesz chciał wyświetlać kody kuponów na swojej stronie internetowej, aby zwiększyć poczucie pilności. W całej sieci zauważysz, że wiele sklepów internetowych udostępnia kody kuponów na pasku przyklejonym u góry strony. Teraz, dzięki Divi's Theme Builder, możesz automatycznie dodać taki pasek kodu kuponu do produktów, które kwalifikują się do otrzymania kodu kuponu.

W tym samouczku pokażemy Ci dokładnie, jak to zrobić. Ten samouczek składa się z kilku części, od konfiguracji kodu kuponu po tworzenie oddzielnego szablonu produktu dla produktów z kategorii rabatowej. Będziesz mógł również bezpłatnie pobrać plik JSON szablonu! Ogólny styl, którego używamy, opiera się na odważnym układzie strony produktu, który udostępniliśmy w przeszłości.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon strony produktu ZA DARMO

Aby położyć swoje ręce na szablonie strony produktu, musisz najpierw pobrać go za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Przegląd samouczka

• Upewnij się, że masz zainstalowaną wtyczkę Divi i WooCommerce na swojej stronie
• W pierwszej części samouczka stworzymy nową kategorię produktów rabatowych
• Przypiszemy kwalifikujące się produkty do tej nowej kategorii produktów
• Następnie utworzymy nowy kod kuponu i upewnimy się, że kod kuponu dotyczy tylko utworzonej przez nas kategorii produktów
• W kreatorze motywów utworzymy nowy szablon dla tej konkretnej kategorii produktów
• W tym szablonie ponownie użyjemy normalnej treści strony produktu i dodamy górny pasek kodu kuponu, korzystając z wbudowanych opcji Divi

1. Utwórz nową kategorię produktów rabatowych

Przejdź do kategorii produktów i dodaj nową kategorię produktów z rabatem

Zacznij od zainstalowania wtyczki WooCommerce na swojej stronie WordPress i dodaj nową kategorię produktów dedykowaną wszystkim produktom kwalifikującym się do nowego rabatu. Jeśli planujesz używać kodu kuponu w istniejących kategoriach produktów, możesz użyć ich zamiast tego.

2. Przypisz produkty do nowej kategorii rabatowej

Edytuj produkt

Następnie otwórz produkty, które chcesz uwzględnić w sprzedaży.

Przypisz produkty do nowej kategorii rabatowej

I uwzględnij je w nowej kategorii produktów rabatowych.

3. Utwórz kod kuponu WooCommerce

Przejdź do kuponów i dodaj nowy kupon

Kolejna część tego samouczka dotyczy tworzenia nowego kodu kuponu. Przejdź do pulpitu WordPress > Kupony > i kliknij „Utwórz swój pierwszy kupon” .

Dodaj kod kuponu i dane kuponu

Dodaj kod kuponu u góry i wybierz ogólne ustawienia, które chcesz zastosować do kodu kuponu.

• Kod rabatowy: Dodaj kod rabatowy
• Rodzaj rabatu: Zniżka procentowa
• Kwota kuponu: Dodaj procent
• Data ważności kuponu: Wybierz datę

Dodaj ograniczenie użytkowania

Następnie przejdź do ograniczenia użytkowania i upewnij się, że kod kuponu działa tylko na produktach z kategorii produktów rabatowych.

• Kategorie produktów: Rabat

4. Dodaj nowy szablon dla kategorii rabatowej

Dodaj nowy szablon

Po utworzeniu kodu kuponu nadszedł czas, aby umieścić go na odpowiednich stronach produktów! Aby to zrobić, przejdź do Divi Theme Builder i dodaj nowy szablon.

Używać

Użyj tego nowego szablonu w kategorii produktów rabatowych.

• Użyj na: Produkt w określonej kategorii produktów: Rabat

5. Użyj ponownie treści globalnej strony produktu dla nowego szablonu

Przeciągnij treść szablonu produktu do treści nowego szablonu

Możesz ponownie użyć treści szablonu zwykłej strony produktu, po prostu przeciągając ją do nowego szablonu. W tym samouczku używamy pogrubionego układu strony produktu, który stworzyliśmy w innym samouczku. Możesz pobrać plik JSON układu w poście na blogu.

6. Dodaj górny pasek kodu kuponu do treści nowego szablonu

Wprowadź edytor szablonów treści

Po dodaniu treści strony produktu do nowego szablonu możesz rozpocząć jego edycję. Zmiany wprowadzone w tym szablonie pojawią się tylko na stronach produktów należących do kategorii produktów ze zniżkami.

Dodaj nową sekcję do góry

W edytorze szablonów pierwszą rzeczą, którą zrobimy, jest dodanie nowej sekcji na górze.

Kolor tła

Otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #e02b20

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Animacja

Uzupełnij ustawienia sekcji, dodając animację.

• Styl animacji: slajd
• Kierunek animacji: w dół
• Czas trwania animacji: 1500 ms
• Opóźnienie animacji: 1000 ms
• Początkowe krycie animacji: 100%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia
• Powtórzenie animacji: raz

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i pozwól wierszowi zająć całą szerokość kontenera sekcji.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Kolumna 1

Rozstaw

Następnie otwórz ustawienia kolumny 1 i dodaj górną i dolną wyściółkę.

• Górna wyściółka: 25px
• Dolna wyściółka: 25px

Kolumna 2

Kolor tła

Otwórz też ustawienia kolumny 2 i dodaj biały kolor tła.

• Kolor tła: #ffffff

Rozstaw

Dodaj również niestandardowe górne i dolne wyściółki do tej kolumny.

• Górna wyściółka: 20px
• Dolna wyściółka: 20px

Granica

I uwzględnij górny lewy i prawy promień obramowania.

• Górny lewy + górny prawy: 30 pikseli

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Pierwszym i jedynym modułem, którego potrzebujemy w kolumnie 1, jest moduł tekstowy. Wprowadź wybraną kopię.

Ustawienia tekstu

Przejdź do zakładki projektu modułu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Montserrat
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 16px
• Wyrównanie tekstu: do środka

Dodaj moduł tekstowy do kolumny 2

Dodaj kod kuponu do pola zawartości

W drugiej kolumnie dodaj kolejny moduł tekstowy z kodem rabatowym, który dodałeś w pierwszej części samouczka.

Ustawienia tekstu

Zmień ustawienia tekstowe modułu w następujący sposób:

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: Ciężka
• Kolor tekstu: #000000
• Rozmiar tekstu: 19px
• Wyrównanie tekstu: do środka

Rozmiary

Następnie zmodyfikuj ustawienia rozmiaru.

• Szerokość: 50%
• Wyrównanie modułu: Środek

Rozstaw

Dodaj też dolną wyściółkę.

• Dolna wyściółka: 10px

Granica

I uzupełnij ustawienia modułu, dodając dolną ramkę.

• Szerokość dolnego obramowania: 1px
• Kolor dolnej krawędzi: #333333

7. Zapisz zmiany w kreatorze motywów i wyświetl wyniki

Po zakończeniu modyfikowanej strony produktu możesz zapisać zmiany w szablonie, wyjść z Kreatora motywów i wyświetlić wynik na stronach produktów ze zniżkami!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak utworzyć pasek kodu kuponu i umożliwić jego automatyczne wyświetlanie na stronach produktów, które kwalifikują się do danego kodu kuponu. To świetny sposób, aby zachęcić odwiedzających do zakupu Twoich produktów. Udało Ci się również pobrać szablonowy plik JSON za darmo! Jeśli masz jakieś pytania, koniecznie zostaw komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.