Dostosowanie i edytowanie szablonów e-mail WooCommerce

Większość standardowych sklepów internetowych wysyła różnego rodzaju wiadomości e-mail. Adresatem tych wiadomości jest zarówno personel sklepu jak i klient. W tym artykule przyjrzymy się jaki mamy wpływ na wygląd i treść e-maili w systemie WooCommerce. Możemy wpływać na ich wygląd bezpośrednio z panelu administracyjnego oraz łatwo edytować pliki szablonów jeżeli opcje tam dostępne byłyby dla nas niewystarczające.

Kiedy zależy nam na profesjonalnym wizerunku naszego sklepu internetowego, naturalne będzie dążenie do tego aby jego unikalny charakter był widoczny także w e-mailach jakie system wysyła klientom. Jakie są to e-maile? Są to przykładowo potwierdzenia zamówienia oraz aktualizacje jego statusu.

Dostosowanie e-maili w ustawieniach WooCommerce

Twórcy WooCommerce udostępnili specjalną stronę z ustawieniami gdzie można dostosować teksty a nawet kolorystykę takich wiadomości. Znajdują się one w standardowych ustawieniach WooCommerce:

Każdy e-mail jaki jest wysyłany przez system znajduje się na liście. Są one ponazywane w zrozumiały sposób dlatego nie powinno być problemu z odnalezieniem pożądanej pozycji:

Po wybraniu konkretnej pozycji wyświetli nam się panel do dostosowania

• tematu e-maila,
• nagłówka wiadomości,
• i dodatkową treść.

Na samym dole mamy nawet przycisk do wyświetlenia całego szablonu PHP. Wielu osobom wystarczy tego typu dostosowanie i na tym moglibyśmy zakończyć.

Edycja szablonów e-mail WooCommerce

Są jednak sytuacje kiedy to nie wystarcza i wtedy musimy edytować szablon e-maila dokładnie tak jak edytujemy stronę produktową czy stronę logowania w WooCommerce. O tym jak tworzyć motywy WooCommerce napisałem w obszernym przewodniku: tworzenie szablonów WordPress i WooCommerce.

Aby móc szczegółowo edytować każdy kawałek stylu i struktury HTML w szablonach e-maili WooCommerce, wystarczy upewnić się, że nasz motyw posiada ich aktualną kopię w katalogu /templates/emails/. Przypomnę, że w tym celu najlepiej skopiować zawartość folderu /wp-content/plugins/woocommerce/templates/emails/ do naszego folderu z motywem /wp-content/themes/nazwa_motywu/woocommerce/emails.

Zasady szablonowania WooCommerce spowodują, że system będzie wczytywał szablony umieszczone w naszym bieżącym motywie. Kopiując je z folderu /wp-content/plugins/woocommerce/ zapobiegamy sytuacji, że szablony zostaną nadpisane przez aktualizację wtyczki WooCommerce. Interesować nas będą wszystkie pliki – także te w katalogu /plain/.

Najważniejsze z nich to email-header.php oraz email-styles.php. Pierwszy z nich odpowiada za cały layout wiadomości e-mail. W praktyce to właśnie ten plik ulega najczęstszym zmianom. Wiele wartości CSS znajduje się w pliku email-styles.php. Wiele wartości CSS jest tam sparametryzowana aby działały ustawienia wprowadzane w panelu. Tak wygląda na przykład wywołanie nagłówka wiadomości w email-header.php:

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_header">
   <tr>
      <td id="header_wrapper">
         <h1><?php echo $email_heading; ?></h1>
      </td>
   </tr>
</table>

Layout jest oparty na tabeli, bo tak jest bezpieczniej gdyby z jakiegoś powodu nie zadziałały style dołączone do kodu HTML.

W pliku email-styles.php mamy style CSS w postaci in-line oraz zmienne, które powodują, że zmiany wprowadzone w panelu od razu lądują w szablonach. Oto przykład takich reguł:

#template_container {
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
   background-color: <?php echo esc_attr( $body ); ?>;
   border: 1px solid <?php echo esc_attr( $bg_darker_10 ); ?>;
   border-radius: 3px !important;
}

Podgląd i debugowanie szablonów e-maili w WooCommerce

Oczywiście nie ma najmniejszego sensu dokonywać próbnych zamówień i płatności tylko po to by podglądać jak prezentują się wprowadzane przez nas zmiany w szablonach /woocommerce/templates/emails/. Istnieje świetna wtyczka, która jest w stanie zaprezentować nam wygląd e-maila na podstawie już dokonanych zamówień. Mowa o wtyczce Preview E-mails for WooCommerce której autorem jest Digamber Pradhan.

Po wybraniu typu wiadomości i konkretnego zamówienia można podglądać jak będzie wyglądała wiadomość wysyłana przez dostosowane przez nas szablony:

Wtyczka ta przyspiesza dostosowywanie szablonów e-mail w systemie WooCommerce i pozwoli wysłać wielokrotnie tę samą wiadomość do celów deweloperskich.

Podsumowanie

Prosty system szablonowania pozwala wygodnie dostosować e-emaile wysyłane przez system WooCommerce. Aby dodać logo i zmienić podstawową kolorystykę wystarczą opcje, które wygodnie można zmienić w panelu. Aby wykonać bardziej zaawansowane modyfikacje, będziemy musieli edytować pliki szablonów znajdujące się w folderze /emails/. Wtyczka Preview E-mails for WooCommerce pozwoli na szybki podgląd zmian bezpośrednio w przeglądarce lub wyśle wiadomość na podany adres e-mail.