Maile ze sklepu ustawia się raz, a potem nikt na nie nie patrzy, dopóki klient nie zadzwoni, że dostał potwierdzenie z logo sprzed trzech lat albo nie dostał żadnego. Tymczasem maile transakcyjne WooCommerce, czyli potwierdzenie zamówienia, dane do przelewu, informacja o wysyłce, faktura i reset hasła, to jedyne wiadomości, które sklep wysyła sam, bez udziału człowieka, do każdego klienta po każdym zakupie. Klient czyta je uważniej niż stronę główną, bo czeka w nich na konkret: czy zamówienie przeszło i kiedy przyjdzie paczka.
Ten tekst jest o ustawieniu ich od zera: co wychodzi, do kogo, z jakiego adresu i jak ma wyglądać. Diagnozę sklepu, który przestał wysyłać, rozpisałem osobno w tekście o WooCommerce, który nie wysyła maili o zamówieniach, a rekordy w DNS w tekście o SPF, DKIM i DMARC. Tutaj do obu tylko odsyłam, a większość miejsca zajmuje to, czego w tamtych dwóch nie ma: inwentarz wiadomości i wygląd, który przeżyje aktualizację.
Maile transakcyjne WooCommerce - dlaczego nie dochodzą
Zanim zaczniesz cokolwiek zmieniać w wyglądzie, upewnij się, że wiadomości w ogóle docierają. Ładny szablon maila, który ląduje w spamie, to robota wyrzucona. Trzy objawy, z którymi przychodzą do mnie właściciele sklepów, i trzy różne kierunki szukania:
- Klient nie dostaje nic, Ty dostajesz powiadomienie. Sklep wysyła, ale skrzynka klienta nie ma powodu ufać nadawcy. To problem wiarygodności domeny, nie WooCommerce.
- Nikt nie dostaje nic. Sklep nie wysyła albo wysyłkę przechwytuje wtyczka. Szukasz w ustawieniach i w liście wtyczek, nie w DNS.
- Maile przychodzą, ale po kilku godzinach, hurtem. Stoi kolejka zadań sklepu, sama wysyłka działa.
Każdy z tych objawów ma własną kolejność sprawdzania i każdą rozpisałem krok po kroku w tekście o diagnozie, więc nie powtarzam jej tutaj. Dla ustawiania od zera ważne jest jedno: najpierw wysyłka, potem wygląd. W tej kolejności, nigdy odwrotnie.
SMTP i uwierzytelnienie domeny
Dwie rzeczy, które robię w każdym sklepie przed pierwszym zamówieniem, zanim dotknę jakiegokolwiek szablonu.
Pierwsza to wysyłka przez SMTP, czyli podpięcie sklepu pod prawdziwą skrzynkę na domenie sklepu zamiast domyślnej wysyłki z serwera hostingu. Sklep loguje się wtedy do serwera poczty tak, jak robi to program pocztowy, i wysyła jako uwierzytelniony nadawca. Druga to trzy wpisy w DNS domeny, które mówią skrzynkom odbiorców, kto ma prawo wysyłać w imieniu Twojej firmy. Kolejność jest zawsze ta sama: najpierw SMTP, potem DNS, bo dopiero uwierzytelniona wysyłka ma szansę przejść sprawdzenie rekordów.
Dobór wtyczki, porty, hasła aplikacji i limity skrzynki są w tekście o diagnozie, a treść rekordów i czytanie raportów w tekście o SPF, DKIM i DMARC. Z perspektywy tego wpisu liczy się test końcowy: wiadomość ze sklepu otwarta w Gmailu, podgląd oryginału i trzy razy wynik pozytywny przy SPF, DKIM i DMARC. Dopóki tego nie widzisz, zmiana wyglądu nie ma sensu, bo i tak nikt tych maili nie zobaczy.
Które maile wychodzą, do kogo i skąd - inwentarz przed zmianą wyglądu
Tu zaczyna się część, której nie ma w tamtych dwóch tekstach. WooCommerce ma w ustawieniach, w zakładce e-maili, listę wszystkich wiadomości, które potrafi wysłać. Warto ją przejść pozycja po pozycji i przy każdej odpowiedzieć na trzy pytania: kiedy wychodzi, do kogo i czy w ogóle jest potrzebna.
Wiadomości dla Ciebie i obsługi sklepu:
- Nowe zamówienie - wychodzi do adresów z pola odbiorców tej wiadomości, nie do administratora WordPressa. To pole ma własną listę, którą wpisujesz ręcznie, i nie zmienia się sama, gdy zmienisz adres administratora. Możesz podać kilka adresów po przecinku, na przykład skrzynkę magazynu i właściciela.
- Zamówienie anulowane i zamówienie nieudane - do tych samych odbiorców. Nieudane warto zostawić włączone, bo to jedyna informacja o kliencie, który chciał zapłacić i mu się nie udało.
Wiadomości dla klienta:
- Zamówienie wstrzymane - przy przelewie tradycyjnym. Zawiera dane do przelewu, więc jej treść ma znaczenie: numer konta, tytuł przelewu, termin.
- Zamówienie w trakcie realizacji - to jest to, co klient rozumie jako „potwierdzenie zamówienia”. Wychodzi, gdy płatność przeszła albo gdy przy pobraniu zamówienie od razu trafia do realizacji.
- Zamówienie zrealizowane - po wysyłce. Tu zwykle ląduje numer przesyłki, jeśli wtyczka kurierska go dopisuje.
- Zwrot, faktura i szczegóły zamówienia, notatka do klienta, reset hasła, nowe konto.
Dwie rzeczy, które gubią najwięcej właścicieli. Po pierwsze, WooCommerce nie wysyła maila „bo przyszło zamówienie”, tylko dlatego, że zamówienie zmieniło status. Klient, który płaci przelewem, dostaje wiadomość o wstrzymaniu, a potwierdzenia realizacji nie dostanie nigdy, jeśli nikt ręcznie nie przestawi statusu po zaksięgowaniu wpłaty. To nie awaria, tylko brakujący krok w procesie. Po drugie, pola nadawcy na dole tej samej strony: nazwa i adres. Adres ma być na domenie sklepu i identyczny z tym, przez który sklep loguje się do SMTP. Nazwa nadawcy to pierwsze, co klient widzi na liście wiadomości, więc wpisujesz nazwę sklepu, nie „WordPress” i nie imię administratora.
Każda wiadomość z listy ma też własne ustawienia: temat, nagłówek i pole na treść dodatkową. To najtańszy sposób na wpisanie do potwierdzenia zdania o czasie realizacji, do wiadomości o wysyłce informacji, gdzie śledzić paczkę, a do wstrzymanego zamówienia prośby o numer zamówienia w tytule przelewu. Bez dotykania szablonu, bez ryzyka przy aktualizacji.
Co pomaga: zamiast klikać po ustawieniach na żywo, złóż u siebie jedno zamówienie testowe każdą metodą płatności, którą masz włączoną, i przeprowadź je ręcznie przez wszystkie statusy. Zbierzesz w skrzynce komplet wiadomości, które klient naprawdę dostaje, i dopiero na tej podstawie decydujesz, co zmienić.
Wygląd maili bez psucia
WooCommerce domyślnie wysyła wiadomości w jednym szablonie, który składa się z obrazka nagłówka, koloru paska u góry, koloru tła, koloru tekstu i tekstu stopki. Wszystkie te rzeczy ustawiasz w tej samej zakładce, globalnie dla wszystkich wiadomości, i to jest pierwsza warstwa, od której zaczynam u każdego klienta. Logo w nagłówku, kolory zgodne ze stroną, w stopce nazwa firmy, adres, telefon i godziny obsługi. Dla większości sklepów to wystarcza, żeby mail przestał wyglądać jak wiadomość z systemu i zaczął wyglądać jak wiadomość od sklepu.
Przy tej warstwie są trzy pułapki, które widuję regularnie:
- Obrazek nagłówka ładowany po adresie bez https albo z serwera testowego. W Gmailu pokazuje się pusta ramka, a w Outlooku ostrzeżenie. Logo ma leżeć na produkcyjnej domenie, pod pełnym adresem z https, w rozsądnej wielkości, bo program pocztowy nie przeskaluje go tak, jak robi to przeglądarka.
- Kolory dobrane pod jasne tło. Coraz więcej osób czyta pocztę w trybie ciemnym i część programów pocztowych sama odwraca kolory. Ciemne logo na przezroczystym tle znika. Logo w mailu daję na stałym, jasnym tle, nawet jeśli na stronie jest przezroczyste.
- Polskie znaki i waluta. Po zmianie szablonu albo wtyczki sprawdzam, czy „zł” i ogonki wyświetlają się poprawnie w każdym programie pocztowym, bo wiadomość, która wychodzi z innym kodowaniem, niż deklaruje, wygląda jak spam.
Jest jeszcze jedna zasada, która obowiązuje niezależnie od sposobu zmiany: w mailu nie działa to, co działa na stronie. Programy pocztowe tną zewnętrzne arkusze stylów, część z nich tnie też style w nagłówku dokumentu, nie wykonują żadnego skryptu i różnie traktują układ. Dlatego style w mailu siedzą w samych znacznikach, a układ jest prostszy niż na stronie. Jeśli ktoś proponuje Ci szablon maila „taki jak strona”, z animacją i siatką, to nie wie, gdzie to będzie wyświetlane.
Trzy sposoby na głębszą zmianę i ich cena przy aktualizacji
Kiedy ustawienia globalne i treść dodatkowa nie wystarczają, zostają trzy drogi. Każda działa, każda kosztuje coś innego, i wybór zależy od tego, kto będzie sklep utrzymywał.
Wtyczka do projektowania maili. Kreator, w którym przeciągasz bloki i widzisz podgląd. Najszybsza droga do efektu i najwygodniejsza dla kogoś, kto nie chce dotykać kodu. Cena: kolejna wtyczka w sklepie, która musi być zgodna z każdą aktualizacją WooCommerce, i uzależnienie od niej, bo po jej wyłączeniu maile wracają do domyślnego wyglądu. Przy sklepie, który i tak ma kilkadziesiąt wtyczek, dokładam ją niechętnie.
Nadpisanie szablonów w motywie potomnym. WooCommerce pozwala skopiować plik szablonu dowolnej wiadomości do folderu motywu i tam go zmienić. To najczystsza droga: żadnej dodatkowej wtyczki, pełna kontrola nad układem. Cena: szablony mają wersje i gdy WooCommerce zmienia swój, Twoja kopia zostaje przy starej. Sklep pokazuje to w statusie systemu jako przestarzały szablon i do czasu ręcznej aktualizacji kopii ryzykujesz, że nowe pole zamówienia nie pojawi się w mailu. Dlatego nadpisuję tylko te pliki, które naprawdę muszę, i sprawdzam ich status po każdej aktualizacji, razem z resztą checklisty bezpiecznych aktualizacji.
Własny kod podpięty pod zdarzenia maili. WooCommerce w wielu miejscach szablonu daje możliwość dopięcia własnej treści bez kopiowania całego pliku: przed tabelą zamówienia, po niej, w stopce. Dodanie bloku z linkiem do śledzenia przesyłki albo informacji o czasie wysyłki dla konkretnej kategorii produktów robię właśnie tak. Cena: potrzebny ktoś, kto to napisze, i miejsce w motywie potomnym albo własnej małej wtyczce, żeby kod przeżył aktualizację motywu.
Kolejność, w której o tym myślę, jest zawsze taka sama: najpierw ustawienia globalne, potem treść dodatkowa per wiadomość, potem kod pod zdarzenia, a dopiero na końcu nadpisanie całego szablonu. Im niżej na tej liście, tym więcej roboty przy każdej aktualizacji.
Jak testuję maile po zmianie
Przycisk „wyślij testową wiadomość” we wtyczce SMTP sprawdza tylko połączenie z serwerem poczty. Nie sprawdza szablonu, treści dodatkowej ani tego, co wtyczki dopisują do konkretnego typu wiadomości. Dlatego po każdej zmianie wyglądu robię to samo, co przy inwentarzu: pełne zamówienie testowe, przeprowadzone ręcznie przez wszystkie statusy, i czytam każdą wiadomość z osobna.
Czytam je w co najmniej trzech miejscach: w Gmailu w przeglądarce, w Outlooku i na telefonie, każde w trybie jasnym i ciemnym. Różnice między nimi są większe, niż się wydaje, i to właśnie Outlook najczęściej pokazuje, że układ, który w Gmailu wyglądał dobrze, rozjeżdża się na szerokość. Do tego podgląd oryginału w Gmailu, żeby po zmianie wtyczki upewnić się, że wiadomość nadal wychodzi tym samym kanałem i nadal przechodzi uwierzytelnienie, bo wtyczki do maili potrafią po cichu podmienić sposób wysyłki.
Jeśli sklep jest już w ruchu i maile wyglądają na coś, co ustawiono lata temu, taki przegląd wchodzi u mnie w zakres rozwoju i optymalizacji istniejącego sklepu: inwentarz wiadomości, uporządkowanie nadawcy i odbiorców, wygląd zgodny ze stroną i test całego cyklu zamówienia w kilku programach pocztowych. Zwykle wychodzi przy tym kilka rzeczy, o których właściciel nie wiedział, w rodzaju powiadomień wysyłanych na skrzynkę osoby, która w firmie dawno nie pracuje.
Najczęstsze pytania
Czy mogę wyłączyć część maili, żeby klient nie dostawał ich tyle? Tak, każda wiadomość ma własny przełącznik. Zostawiam zwykle wstrzymane, w trakcie realizacji i zrealizowane, bo odpowiadają trzem pytaniom klienta: czy zamówienie przeszło, czy jest opłacone i czy wyszło. Wyłączenie wiadomości o zrealizowaniu to najczęstszy powód telefonów „a gdzie moja paczka”.
Jak dodać numer przesyłki do maila o zrealizowaniu zamówienia? Najprościej przez wtyczkę kurierską, która sama dopisuje numer i link do śledzenia do tej wiadomości. Jeśli nadajesz poza systemem, pozostaje notatka do klienta wysyłana z poziomu zamówienia albo własny kod, który dokleja pole z numerem do wiadomości. Ręczne wpisywanie numeru do treści dodatkowej nie ma sensu, bo ta treść jest wspólna dla wszystkich zamówień.
Czy zmiana wyglądu maili może zepsuć ich dostarczalność? Może, w dwóch przypadkach. Gdy wtyczka do projektowania maili podmienia sposób wysyłki i omija ustawiony SMTP, albo gdy nowy szablon ciągnie obrazki z obcego serwera. Po każdej zmianie wyglądu otwieram podgląd oryginału wiadomości w Gmailu i sprawdzam to samo, co przy ustawianiu wysyłki.
Mam maile z WooCommerce i osobno z wtyczki do faktur. Jak je ujednolicić? Wtyczki do faktur zwykle podpinają fakturę jako załącznik do istniejącej wiadomości WooCommerce, a nie wysyłają własnej, i wtedy wygląd jest jeden. Jeśli wysyłają osobno, mają własny szablon w swoich ustawieniach i trzeba ustawić logo i stopkę w dwóch miejscach. Przy większej liczbie systemów wysyłających z domeny sklepu pilnuję też, żeby każdy był wpisany w SPF, inaczej jedna z tych wiadomości zacznie lądować w spamie.
Po aktualizacji WooCommerce maile zmieniły wygląd. Co się stało? Prawdopodobnie sklep przeszedł na nowszy szablon domyślny i Twoje ustawienia kolorów oraz obrazka zostały zinterpretowane na nowo, albo nadpisany szablon w motywie został oznaczony jako przestarzały. Sprawdź status systemu w WooCommerce, tam jest lista szablonów z informacją o wersji, i porównaj ją z kopią w motywie. Jeśli nie masz własnych kopii, wystarczy ponownie przejrzeć ustawienia globalne i zrobić zamówienie testowe.
Masz to u siebie i nie wiesz, od czego zacząć? Przyspieszam i naprawiam istniejące strony i sklepy - Core Web Vitals, awarie, rozbudowa o funkcje, których brakuje. Porozmawiajmy o projekcie.