WooCommerce: как настроить шаблоны электронной почты без программирования

Ежедневно вы, вероятно, используете перетаскивание в различных интерфейсах. Например, перетащите элементы Gmail в соответствующую категорию, загрузите файлы в медиатеку WordPress или организуйте приложения на главном экране телефона.

Хотя многие платформы для создания страниц помогают вам разработать веб-сайт с помощью перетаскивания, создание транзакционных электронных писем WooCommerce по-прежнему считается сложной задачей.

По умолчанию настройки электронной почты WooCommerce позволяют изменять только основные цветовые профили и текст. Для дальнейшей настройки вам придется изменить код темы.

Если вы не являетесь техническим специалистом и не хотите взламывать код между скриптами в wp-content/plugins/woocommerce/templates/emails/email-styles.php или около того, используйте структуру для создания электронной почты с помощью перетаскивания. является лучшим решением.

Представляем YayMail

YayMail — это платформа для создания электронной почты, развернутая для WooCommerce.

Он был разработан с учетом простоты использования в качестве основной цели, но был протестирован на максимальную совместимость с веб-браузером и почтовым клиентом, при этом следя за скоростью отклика.

Вы можете скачать и использовать его бесплатно с WordPress.org. Этот открытый исходный код всегда бесплатен, и вам не нужно будет обновляться до какой-либо премиум-версии, чтобы полностью настроить все стандартные шаблоны электронной почты Woo.

Теперь, когда вы установили и активировали его, перейдите в WooCommerce > Email Customizer , чтобы получить доступ к редактору электронной почты.

Создавайте электронные письма с помощью конструктора писем с перетаскиванием

Являясь редактором перетаскивания, похожим на конструктор страниц Elementor, YayMail поставляется со всеми параметрами и настройками на одном экране.

1. Верхняя панель инструментов

Здесь вы найдете первый раскрывающийся список для всех доступных шаблонов электронной почты WooCommerce. В зависимости от активных плагинов WooCommerce на вашем текущем сайте вы увидите здесь новые шаблоны.

Если вы используете плагин членства WooCommerce, у вас будут дополнительные шаблоны электронной почты, такие как членство — приветствие, напоминание о членстве, членство с истекшим сроком действия и т. д.

Во втором раскрывающемся списке «Образец заказа» вы можете выбрать любой реальный заказ, чтобы увидеть, как динамические поля электронного письма отображаются на стороне конкретного покупателя.

На этой верхней панели инструментов вы также можете найти наиболее часто используемые кнопки действий, в том числе:

• Шорткоды : скопируйте шорткод отсюда и вставьте его в соответствующий блок дизайна электронной почты.
• Отправить тестовое электронное письмо : одним щелчком мыши отправьте тестовое сообщение на любой адрес электронной почты, чтобы увидеть, как созданное вами электронное письмо будет выглядеть в папке «Входящие».
• Пусто : очистите все блоки электронной почты, чтобы у вас была полностью пустая канва, после чего вы могли приступить к дизайну для своих собственных целей.
• Копировать шаблон : скопируйте из ранее разработанного шаблона и вставьте его в текущее тело электронной почты. Затем вы можете внести небольшие коррективы, чтобы не начинать с нуля.
• Сбросить шаблон : эта опция сбрасывает ваш шаблон в исходное состояние, то есть у вас все еще есть блоки электронной почты по умолчанию.
• Предварительный просмотр : Мгновенно просматривайте свою настроенную электронную почту на рабочем столе и мобильных устройствах.
• Сохранить . Сохраните изменения в любой момент времени.

2. Складная боковая панель

Боковая панель настройщика электронной почты YayMail WooCommerce состоит из двух вкладок: « Элементы » и « Настройки ».

Все элементы можно перетаскивать и включать множество параметров настройки. Блок заголовка, например, позволяет вам редактировать его отступы, цвет фона, цвет текста, семейство шрифтов и другие визуальные параметры.

Хотя изменения на вкладке « Элементы » применяются только к выбранному блоку, настройки в « Настройках » применяются ко всему шаблону электронной почты.

Таким образом, некоторые часто используемые функции включают в себя:

• Ширина контейнера электронной почты
• Периферийный фоновый цвет
• Скрыть/показать изображение продукта и артикул
• Экспорт/импорт шаблонов электронной почты

3. Предварительный просмотр электронной почты

Поскольку это конструктор электронной почты на основе блоков, вы можете перемещать любые блоки вверх/вниз или использовать ручку, чтобы перетаскивать их.

В правом углу у вас будет несколько вариантов, таких как:

• Дублируйте блок электронной почты
• Скопируйте блок в другой шаблон
• Удалить блок

С YayMail вы можете выполнять бесконечные настройки, изменяя дизайн и макеты электронной почты, чего не происходит, если вы изменяете файлы кода темы или используете настройщик WordPress.

Практический пример: настройка электронного письма с подтверждением заказа WooCommerce

Чтобы начать настройку электронного письма с подтверждением заказа, перейдите в WooCommerce > Настройщик электронной почты > Электронная почта для отображения. Оттуда вы можете выбрать «Заказ на обработку» или «Выполненный заказ ».

С этого момента вы можете начать добавлять любые элементы, которые хотите. Некоторые элементы, которые я собираюсь использовать, включают:

• Логотип : загрузите прозрачное изображение логотипа и измените его размер, чтобы он соответствовал ширине контейнера электронной почты.
• Значки социальных сетей: легко выбирайте значки социальных сетей и добавляйте URL-адрес для каждой платформы.
• Заголовок : отредактируйте текст заголовка, шрифт заголовка, цвет текста и цвет фона.
• Изображение : добавьте пользовательское изображение и отрегулируйте его ширину с помощью ползунка.
• Нижний колонтитул : добавьте ссылки на свой веб-сайт, такие как «Мой аккаунт», «Поддержка клиентов» и т. д.

В любой момент вы можете нажать кнопку « Предварительный просмотр », чтобы увидеть внешний вид электронной почты на рабочем столе или мобильном телефоне во всплывающем окне без необходимости покидать текущую страницу или обновлять ее.

Затем вы можете легко закрыть окно предварительного просмотра, чтобы вернуться в редактор.

Чтобы увидеть YayMail в действии, посмотрите это обучающее видео, чтобы узнать, как оно помогает вам выполнять работу.

Интеграции

Транзакционная электронная почта — хорошее средство коммуникации для ваших маркетинговых целей. Особенно, когда вы предлагаете модель подписки или членства через WooCommerce, вам следует настроить уведомления по электронной почте, чтобы сделать профиль вашего бренда индивидуальным и последовательным.

Пример 1: Плагин WooCommerce Membership

По умолчанию это то, что ваша аудитория получает, когда срок их членства на вашем сайте истекает. Вы можете редактировать текст темы, заголовка и пользовательского сообщения.

Почему бы не превратить этот шаблон электронной почты в призыв к действию, чтобы убедиться, что аудитория вернется к своему членскому пакету?

Для этого дополнительного контента я буду использовать несколько столбцов для сообщения электронной почты об истечении срока членства.

Шаги идут следующим образом:

• Перетащите блок из двух столбцов в электронное письмо.
• Отредактируйте ширину столбца в процентах, т.е. 70/30
• Добавьте цвет фона или изображение (необязательно), здесь я использую белый цвет фона.
• Выберите текстовый блок для первого столбца
• Выберите полосу изображения для второго столбца

Вот как я получаю шаблон электронной почты с несколькими столбцами для сообщений электронной почты членства.

Пример 2: Плагин WooCommerce для последующих электронных писем

С помощью настраиваемого расширения шаблона электронной почты, такого как Follow-Ups, вы можете отправлять дополнительный контент после выполнения определенных действий клиента.

Существует так много сценариев магазина, в которых можно отправлять запланированные автоматические электронные письма с настраиваемым содержимым.

В этом разделе я покажу, как создать и настроить шаблон электронной почты, который будет отправлен после использования купона .

Во-первых, начните добавлять новое продолжение:

• Дайте ему имя, тему электронной почты и некоторый контент
• В метабоксе « Тип отслеживания» обязательно выберите « Покупка электронной почты ».
• В нижних полях выберите триггер «после использования купона».
• Он поставляется с множеством расширенных опций, так что не стесняйтесь исследовать его.

Затем давайте перейдем к шагам настройки:

• Вставить логотип и заголовок
• Добавьте элемент поля изображения
• Вставьте контент и социальные значки

Поскольку я пытаюсь установить тон для цветовых профилей моего бренда, розоватый цвет будет использоваться для цвета фона заголовка, а также основного изображения в элементе поля изображения.

Спроектировать блоки очень просто, поэтому все, что осталось сделать, это настроить отступы между блоками электронной почты, чтобы добиться внешнего вида и ощущений, которые вы всегда хотели.

Краткое примечание: обратитесь к их документам, чтобы убедиться, что вы получаете правильный аддон YayMail для ваших текущих активных расширений WooCommerce.

Пример 3: плагины вознаграждений за лояльность

Расширение Points and Rewards для WooCommerce может генерировать более 10 уведомлений по электронной почте для связи с клиентами.

Шаблоны электронной почты различаются в зависимости от используемого вами плагина, но в основном это выглядит как текстовое сообщение. В настройках уведомлений о баллах вы можете писать свои собственные сообщения в поле «Описание электронной почты», используя их короткий код.

Затем сохраните изменения и перейдите к нашему настройщику электронной почты WooCommerce. В раскрывающемся списке выберите электронное письмо с баллами и вознаграждениями, чтобы начать настройку шаблона.

Давайте оживим, добавив еще несколько мультимедийных элементов, таких как изображения, кнопки и ссылки.

Этот новый дизайн будет применяться ко всем отправляемым уведомлениям о баллах. Только то, что средний блок уведомлений будет заменен сообщениями, которые вы только что написали на предыдущем шаге.

Вывод

Существует несколько способов настройки шаблона электронной почты WooCommerce без кодирования. Если вам не подходит модификация исходного кода, вы можете попробовать настроить электронные письма с помощью плагинов.

Некоторые плагины используют настройщик WordPress для разработки шаблонов электронной почты. Тем не менее, конструктор электронной почты с перетаскиванием поможет вам создать гораздо более гибкий макет с расширенными параметрами.

Сегодня вы можете попробовать его, загрузив YayMail из репозитория WP, и использовать его совершенно без риска, поскольку он без проблем работает со всеми темами WordPress.