WooCommerce: 코딩 없이 이메일 템플릿을 사용자 정의하는 방법

게시 됨: 2021-08-05

매일 다양한 인터페이스에서 끌어서 놓기를 사용합니다. 예를 들어 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 이메일 사용자 정의 도구의 측면 패널은 요소 및 설정 의 두 탭으로 구성됩니다.

모든 요소는 드래그할 수 있으며 수많은 사용자 정의 옵션이 포함되어 있습니다. 예를 들어 제목 블록을 사용하면 패딩, 배경색, 텍스트 색상, 글꼴 모음 및 기타 시각적 옵션을 편집할 수 있습니다.

요소 탭의 변경 사항은 선택한 블록에만 적용되지만 설정 의 조정 사항은 전체 이메일 템플릿에 적용됩니다.

따라서 자주 사용되는 일부 기능은 다음과 같습니다.

이메일 컨테이너 너비
주변 배경색
제품 이미지 및 SKU 숨기기/표시
이메일 템플릿 내보내기/가져오기

3. 이메일 미리보기

블록 기반 이메일 빌더이기 때문에 블록을 위/아래로 이동하거나 핸들을 사용하여 끌어다 놓을 수 있습니다.

오른쪽 모서리에는 다음과 같은 몇 가지 옵션이 있습니다.

이메일 차단 복제
블록을 다른 템플릿에 복사
블록 제거

YayMail을 사용하면 테마 코드 파일을 수정하거나 워드프레스 커스터마이저를 사용하면 발생하지 않는 이메일 디자인과 레이아웃을 변경하여 무한한 사용자 정의를 만들 수 있습니다.

사례 연구: WooCommerce 주문 확인 이메일 사용자 지정

주문 확인 이메일 사용자 정의를 시작하려면 WooCommerce > 이메일 사용자 정의 > 표시할 이메일로 이동하십시오. 여기에서 처리 주문 또는 완료된 주문 을 선택할 수 있습니다.

그때부터 원하는 요소를 추가할 수 있습니다. 내가 사용할 몇 가지 요소는 다음과 같습니다.

로고 : 투명한 로고 이미지를 업로드하고 이메일 컨테이너 너비에 맞게 크기를 조정합니다.
소셜 아이콘 : 소셜 네트워크 아이콘을 쉽게 선택하고 플랫폼별 URL 추가
표제 : 표제 텍스트, 표제 글꼴, 텍스트 색상 및 배경 색상을 편집합니다.
이미지 : 사용자 정의 이미지를 추가하고 슬라이드 막대를 사용하여 너비를 조정합니다.
바닥글 : 내 계정, 고객 지원 등과 같은 웹사이트 링크를 추가합니다.

언제든지 미리보기 버튼을 클릭하면 현재 페이지를 나가거나 새로 고치지 않고도 데스크탑/모바일에서 팝업으로 이메일 모양을 볼 수 있습니다.

그런 다음 미리 보기를 쉽게 닫고 편집기로 돌아갈 수 있습니다.

작동 중인 YayMail을 보려면 이 튜토리얼 비디오를 확인하여 작업을 완료하는 데 어떻게 도움이 되는지 확인하십시오.

통합

거래 이메일은 마케팅 목적을 위한 좋은 커뮤니케이션 수단입니다. 특히 WooCommerce를 통해 구독 또는 멤버십 모델을 제공하는 경우 이메일 알림을 사용자 지정하여 브랜드 프로필을 맞춤화하고 일관성 있게 만들어야 합니다.

사례 연구 1: WooCommerce 멤버십 플러그인

기본적으로 이것은 사이트의 회원 자격이 만료될 때 청중이 받는 것입니다. 제목, 헤드 및 사용자 정의 메시지의 텍스트를 편집할 수 있습니다.

청중이 멤버십 패키지로 돌아올 수 있도록 이 이메일 템플릿을 클릭 유도문안으로 바꾸지 않으시겠습니까?

이 추가 콘텐츠의 경우 회원 만료 이메일 메시지에 여러 열 을 사용하겠습니다.

단계는 다음과 같습니다.

2열 블록을 이메일로 끌어다 놓습니다.
열 너비를 백분율로 편집합니다(예: 70/30).
배경색 또는 이미지(선택 사항)를 추가합니다. 여기서는 흰색을 배경색으로 사용합니다.
첫 번째 열의 텍스트 블록 선택
두 번째 열의 이미지 스트립 선택

이것이 내가 멤버십 이메일 메시지에 대한 다중 열 이메일 템플릿을 얻는 방법입니다.

사례 연구 2: WooCommerce 후속 이메일 플러그인

후속 조치와 같은 사용자 지정 이메일 템플릿 확장을 사용하면 특정 고객 작업이 완료된 후 추가 콘텐츠를 보낼 수 있습니다.

사용자 지정 콘텐츠가 포함된 예약된 자동 이메일을 보낼 수 있는 저장소 시나리오가 너무 많습니다.

이 섹션에서는 쿠폰을 사용한 후 보낼 이메일 템플릿을 만들고 사용자 지정하는 방법을 보여줍니다.

먼저 새로운 후속 조치를 추가하기 시작합니다.

이름, 이메일 제목 및 일부 콘텐츠 제공
후속 조치 유형 메타박스에서 이메일 구매 를 선택해야 합니다.
하단 상자에서 트리거를 "쿠폰 사용 후"로 선택합니다.
고급 옵션이 많이 제공되므로 자유롭게 탐색하십시오.

그런 다음 사용자 정의 단계로 이동해 보겠습니다.

로고 및 제목 삽입
이미지 상자 요소 추가
콘텐츠 및 소셜 아이콘 삽입

내 브랜드 색상 프로필의 톤을 설정하려고 하므로 제목 배경색과 이미지 상자 요소의 기본 이미지에 분홍빛이 도는 색상이 사용됩니다.

블록을 디자인하는 것은 쉽기 때문에 이메일 블록 사이의 패딩을 조정하여 항상 원했던 모양과 느낌을 얻기만 하면 됩니다.

빠른 참고 사항: 현재 활성화된 WooCommerce 확장 프로그램에 적합한 YayMail 애드온을 얻으려면 해당 문서를 참조하세요.

사례 연구 3: 로열티 보상 플러그인

WooCommerce용 포인트 및 보상 확장은 고객과의 접촉 기반을 위해 10개 이상의 이메일 알림을 생성할 수 있습니다.

이메일 템플릿은 사용하는 플러그인에 따라 다르지만 기본적으로는 문자 메시지처럼 보입니다. 포인트 알림 설정에서 단축 코드를 사용하여 이메일 설명 상자에 자신의 메시지를 작성할 수 있습니다.

그런 다음 변경 사항을 저장하고 WooCommerce 이메일 사용자 정의 도구로 이동하십시오. 드롭다운에서 포인트 및 리워드 이메일을 선택하여 템플릿 사용자 지정을 시작합니다.

이미지, 버튼 및 링크와 같은 미디어 요소를 추가하여 멋을 냅시다.

이 새로운 디자인은 발송될 모든 포인트 알림에 적용됩니다. 중간 알림 블록만 이전 단계에서 작성한 메시지로 대체됩니다.

결론

코딩 없이 WooCommerce 이메일 템플릿을 사용자 정의하는 몇 가지 방법이 있습니다. 소스 코드 수정을 선택하지 않은 경우 플러그인을 사용하여 이메일을 사용자 정의할 수 있습니다.

일부 플러그인은 WordPress 사용자 정의 프로그램을 활용하여 이메일 템플릿을 디자인합니다. 그러나 드래그 앤 드롭 이메일 빌더를 사용하면 고급 옵션을 사용하여 훨씬 더 유연한 레이아웃을 만들 수 있습니다.

오늘 WP 리포지토리에서 YayMail을 다운로드하여 사용해 보고 모든 WordPress 테마와 원활하게 작동하므로 위험 부담 없이 사용할 수 있습니다.