WooCommerce: Jak dostosować szablony e-maili bez kodowania

Na co dzień prawdopodobnie używasz przeciągania i upuszczania w różnych interfejsach. Na przykład przeciągnij i upuść elementy Gmaila do swojej kategorii, prześlij pliki do biblioteki multimediów WordPress lub uporządkuj aplikacje na ekranie głównym telefonu.

Podczas gdy wiele platform do tworzenia stron pojawia się, aby pomóc Ci zaprojektować witrynę za pomocą przeciągania i upuszczania, budowanie transakcyjnych wiadomości e-mail WooCommerce jest nadal uważane za złożone zadanie.

Domyślnie ustawienia poczty e-mail WooCommerce umożliwiają zmianę tylko podstawowych profili kolorów i tekstu. Aby dalej dostosowywać, musisz zmodyfikować kod motywu.

Jeśli nie jesteś specjalistą i nie chcesz złamać kodu między skryptami w wp-content/plugins/woocommerce/templates/emails/email-styles.php lub tak, używając frameworka do tworzenia wiadomości e-mail typu „przeciągnij i upuść” to najlepsze rozwiązanie.

Przedstawiamy YayMail

YayMail to platforma do tworzenia wiadomości e-mail wdrożona dla WooCommerce.

Został opracowany z myślą o łatwości użytkowania jako głównym celu, ale został przetestowany pod kątem maksymalnej kompatybilności z przeglądarkami internetowymi i klientem poczty e-mail, przy jednoczesnym zachowaniu szybkości reakcji.

Możesz go pobrać i używać za darmo z WordPress.org. Ten kod open source jest na zawsze darmowy i nie będziesz musiał uaktualniać do żadnej wersji premium, aby w pełni dostosować wszystkie domyślne szablony wiadomości e-mail Woo.

Teraz, gdy go zainstalowałeś i aktywowałeś, przejdź do WooCommerce > Email Customizer , aby uzyskać dostęp do edytora poczty e-mail.

Projektuj wiadomości e-mail za pomocą narzędzia do tworzenia wiadomości e-mail typu „przeciągnij i upuść”

Jako edytor przeciągania i upuszczania podobny do kreatora stron Elementor, YayMail zawiera wszystkie opcje i ustawienia na tym samym ekranie.

1. Górny pasek narzędzi

Tutaj znajdziesz pierwszą listę rozwijaną dla wszystkich dostępnych szablonów e-mail WooCommerce. W zależności od aktywnych wtyczek WooCommerce w Twojej bieżącej witrynie, zobaczysz tutaj nowe szablony.

Jeśli korzystasz z wtyczki członkostwa WooCommerce, będziesz mieć dodatkowe szablony wiadomości e-mail, takie jak członkostwo – powitanie, przypomnienie o członkostwie, wygasłe członkostwo i tak dalej.

Drugie menu rozwijane, „Zamówienie próbne”, pozwala wybrać dowolne rzeczywiste zamówienie, aby zobaczyć, jak dynamiczne pola e-maila wyświetlają się po stronie konkretnego kupującego.

Na tym górnym pasku narzędzi można również znaleźć najczęściej używane przyciski akcji, w tym:

• Skróty : Skopiuj stąd skrót, a następnie wklej go do odpowiedniego bloku projektu e-maila.
• Wyślij testową wiadomość e-mail : wystarczy jedno kliknięcie, aby wysłać testową wiadomość na dowolny adres e-mail, aby zobaczyć, jak zaprojektowany e-mail będzie wyglądał w skrzynce odbiorczej.
• Puste : Wyczyść wszystkie bloki wiadomości e-mail, aby uzyskać całkowicie puste płótno, a następnie rozpocząć projektowanie do własnych celów.
• Kopiuj szablon : skopiuj z wcześniej zaprojektowanego szablonu i wklej go do bieżącej treści wiadomości e-mail. Następnie możesz dokonać drobnych korekt, aby uniknąć zaczynania od zera.
• Resetuj szablon : ta opcja resetuje szablon do stanu początkowego, co oznacza, że ​​nadal masz domyślne bloki poczty e-mail.
• Podgląd : natychmiast wyświetlaj spersonalizowaną pocztę e-mail w widokach na komputery i urządzenia mobilne.
• Zapisz : zapisz zmiany w dowolnym momencie.

2. Składany panel boczny

Panel boczny dostosowywania poczty YayMail WooCommerce składa się z dwóch zakładek: Elementy i Ustawienia .

Wszystkie elementy można przeciągać i zawierają mnóstwo opcji dostosowywania. Na przykład blok nagłówka umożliwia edycję wypełnienia, koloru tła, koloru tekstu, rodziny czcionek i innych opcji wizualnych.

Chociaż zmiany na karcie Elementy dotyczą tylko wybranego bloku, zmiany w Ustawieniach odnoszą się do całego szablonu wiadomości e-mail.

Niektóre często używane funkcje obejmują zatem:

• Szerokość kontenera e-mail
• Kolor tła peryferyjnego
• Ukryj/pokaż zdjęcie produktu i kod SKU
• Eksportuj/Importuj szablony wiadomości e-mail

3. Podgląd wiadomości e-mail

Ponieważ jest to narzędzie do tworzenia wiadomości e-mail oparte na blokach, możesz przesuwać dowolne bloki w górę/w dół lub używać uchwytu do przeciągania i upuszczania.

W prawym rogu będziesz mieć kilka opcji, takich jak:

• Zduplikuj blokadę poczty e-mail
• Skopiuj blok do innego szablonu
• Usuń blok

YayMail oferuje nieskończone możliwości dostosowywania, zmieniając projekty i układy wiadomości e-mail, co nie ma miejsca, jeśli zmodyfikujesz pliki kodu motywu lub użyjesz dostosowywania WordPress.

Studium przypadku: dostosuj wiadomość e-mail z potwierdzeniem zamówienia WooCommerce

Aby rozpocząć dostosowywanie wiadomości e-mail z potwierdzeniem zamówienia, przejdź do WooCommerce > E-mail Customizer > E-mail do wyświetlenia. Stamtąd możesz wybrać Przetwarzanie zamówienia lub Zakończone zamówienie .

Od tego momentu możesz zacząć dodawać dowolne elementy, które chcesz. Niektóre elementy, których będę używał, to:

• Logo : prześlij przezroczysty obraz logo i zmień jego rozmiar, aby dopasować go do szerokości kontenera wiadomości e-mail
• Ikony społecznościowe : łatwo wybierz ikony sieci społecznościowych i dodaj adres URL dla każdej platformy
• Nagłówek : Edytuj tekst nagłówka, czcionkę nagłówka, kolor tekstu i kolor tła
• Obraz : Dodaj niestandardowy obraz i dostosuj jego szerokość za pomocą suwaka
• Stopka : dodaj linki do swojej witryny, takie jak Moje konto, Obsługa klienta itp.

W dowolnym momencie możesz kliknąć przycisk Podgląd , aby zobaczyć wygląd wiadomości e-mail na komputerze stacjonarnym/mobilnym w wyskakującym okienku bez konieczności opuszczania lub odświeżania bieżącej strony.

Następnie możesz łatwo zamknąć podgląd, aby wrócić do edytora.

Aby zobaczyć YayMail w akcji, obejrzyj ten film instruktażowy, aby zobaczyć, jak pomaga w wykonaniu pracy.

Integracje

E-mail transakcyjny jest dobrym środkiem komunikacji w celach marketingowych. Zwłaszcza jeśli oferujesz subskrypcję lub model członkostwa za pośrednictwem WooCommerce, powinieneś dostosować powiadomienia e-mail, aby profil Twojej marki był dostosowany i spójny.

Studium przypadku 1: Wtyczka członkowska WooCommerce

Domyślnie to jest to, co otrzymują Twoi odbiorcy, gdy ich członkostwo w Twojej witrynie wygasa. Możesz edytować tekst tematu, nagłówka i niestandardowej wiadomości.

Dlaczego nie zamienić tego szablonu e-maila w wezwanie do działania, aby upewnić się, że odbiorcy powrócą do swojego pakietu członkowskiego?

W przypadku tej dodatkowej zawartości będę używać wielu kolumn w wiadomości e-mail o wygaśnięciu członkostwa.

Kroki przebiegają w następujący sposób:

• Przeciągnij i upuść blok w dwóch kolumnach na e-mail
• Edytuj szerokość kolumny w procentach, czyli 70/30
• Dodaj kolor tła lub obraz (opcjonalnie), tutaj używam białego jako koloru tła
• Wybierz blok tekstowy dla pierwszej kolumny
• Wybierz pasek obrazu dla drugiej kolumny

W ten sposób uzyskuję szablon wiadomości e-mail z wieloma kolumnami dla wiadomości e-mail dotyczących członkostwa.

Studium przypadku 2: Wtyczka WooCommerce Follow-up emails

Dzięki niestandardowemu rozszerzeniu szablonu wiadomości e-mail, takim jak Follow-Ups, możesz wysyłać dodatkowe treści po wykonaniu określonych działań klienta.

Jest tak wiele scenariuszy sklepowych, w których można wysyłać zaplanowane automatyczne wiadomości e-mail z niestandardową treścią.

W tej sekcji pokazuję, jak utworzyć i dostosować szablon wiadomości e-mail do wysłania po wykorzystaniu kuponu .

Najpierw zacznij dodawać nowy follow-up:

• Nadaj mu imię, temat e-maila i treść
• W metabox Typ monitu wybierz opcję Kup e-mail
• W dolnych polach wybierz wyzwalacz jako „po użyciu kuponu”
• Zawiera wiele zaawansowanych opcji, więc nie krępuj się go odkrywać

Następnie przejdźmy do kroków dostosowywania:

• Wstaw logo i nagłówek
• Dodaj element pola obrazu
• Wstaw treść i ikony społecznościowe

Ponieważ próbuję nadać ton profilom kolorów mojej marki, różowawy kolor zostanie użyty jako kolor tła nagłówka, a także główny obraz w elemencie pola obrazu.

Projektowanie bloków jest łatwe, więc wszystko, co musisz zrobić, to dostosować dopełnienie między blokami wiadomości e-mail, aby uzyskać wygląd, którego zawsze chciałeś.

Krótka uwaga: zapoznaj się z ich dokumentacją, aby upewnić się, że otrzymujesz odpowiedni dodatek YayMail dla aktualnie aktywnych rozszerzeń WooCommerce.

Studium przypadku 3: wtyczki do nagród lojalnościowych

Rozszerzenie Points and Rewards dla WooCommerce może generować ponad 10 powiadomień e-mail, aby kontaktować się z klientami.

Szablony wiadomości e-mail różnią się w zależności od używanej wtyczki, ale zasadniczo wyglądają jak wiadomość tekstowa. W ustawieniach powiadomień o punktach możesz pisać własne wiadomości w polu Opis e-maila, używając ich krótkiego kodu.

Następnie zapisz zmiany i przejdź do naszego dostosowywania poczty e-mail WooCommerce. Z menu wybierz Punkty i nagrody e-mail, aby rozpocząć dostosowywanie szablonu.

Podrasujmy go, dodając więcej elementów multimedialnych, takich jak obrazy, przyciski i linki.

Ten nowy projekt będzie obowiązywał we wszystkich wysyłanych powiadomieniach dotyczących punktów. Tylko, że środkowy blok informacyjny zostanie zastąpiony wiadomościami, które właśnie napisałeś w poprzednim kroku.

Wniosek

Istnieje kilka metod dostosowywania szablonu wiadomości e-mail WooCommerce bez kodowania. Jeśli modyfikacja kodu źródłowego nie jest Twoim wyborem, możesz spróbować dostosować wiadomości e-mail za pomocą wtyczek.

Niektóre wtyczki wykorzystują konfigurator WordPress do projektowania szablonów wiadomości e-mail. Jednak kreator wiadomości e-mail typu „przeciągnij i upuść” pomoże Ci stworzyć znacznie bardziej elastyczny układ z zaawansowanymi opcjami.

Dziś możesz go wypróbować, pobierając YayMail z repozytorium WP i używać go całkowicie bez ryzyka, ponieważ działa bezproblemowo ze wszystkimi motywami WordPress.