افزودن CSS به ایمیل‌های ووکامرس با ۲ روش ساده

بعد از هر خرید، ووکامرس ایمیل‌هایی مثل تأیید سفارش، فاکتور و ارسال کالا رو برای مشتری می‌فرسته. مشکل اینجاست که ظاهر پیش‌فرض این ایمیل‌ها خیلی ساده‌ست. ممکنه فونت، رنگ‌ها و لوگوی اون‌ها با هویت فروشگاهتون هماهنگ نباشه و نتیجه هم چندان حرفه‌ای به نظر نرسه. از طرفی، در تنظیمات ایمیل ووکامرس گزینه مستقیمی برای نوشتن CSS سفارشی ندارید.

با چند خط کد می‌تونید ظاهر این ایمیل‌ها رو تغییر بدید. در این مقاله دو روش رو با هم پیش می‌بریم. در روش اول، یک استایل مشترک روی همه ایمیل‌های ووکامرس قرار می‌گیره. روش دوم هم وقتی به کارتون میاد که بخواید فقط ظاهر یک ایمیل مشخص، مثل سفارش جدید یا فاکتور، متفاوت باشه.

چرا ایمیل‌های ووکامرس به استایل سفارشی نیاز دارن؟

ایمیل‌های مربوط به خرید معمولاً جزو اولین پیام‌هایی هستن که مشتری بعد از پرداخت از فروشگاهتون می‌گیره. اگه این ایمیل فونت نامناسب و رنگ‌بندی ناهماهنگی داشته باشه، ظاهر فروشگاهتون یکدست به نظر نمی‌رسه. در مقابل، استفاده از لوگو، رنگ‌های برند و یک فونت خوانا کمک می‌کنه مشتری راحت‌تر ایمیل رو بخونه و سریع‌تر اطلاعات سفارشش رو پیدا کنه.

ووکامرس باید ایمیل‌ها رو طوری بسازه که در سرویس‌هایی مثل جیمیل، یاهو و اوت‌لوک درست نمایش داده بشن. برای همین، استایل پیش‌فرضش ساده و محدود طراحی شده. این ظاهر برای بعضی فروشگاه‌ها کافیه، ولی اگه هماهنگی ایمیل‌ها با برندتون براتون مهمه، بهتره رنگ‌ها، فونت و دکمه‌ها رو خودتون تنظیم کنید.

روش اول: افزودن CSS به همه ایمیل‌های ووکامرس

اگه می‌خواید ایمیل سفارش جدید، فاکتور، لغو سفارش و بقیه ایمیل‌های ووکامرس ظاهر یکسانی داشته باشن، این روش انتخاب ساده‌تریه. کد رو فقط یک بار اضافه می‌کنید و استایل روی همه ایمیل‌ها قرار می‌گیره. برای بیشتر فروشگاه‌ها همین روش کافیه.

کد زیر رو به فایل functions.php پوسته فعال سایتتون اضافه کنید. اگه فایل با علامت <?php شروع شده، کد باید بعد از اون قرار بگیره. اگه از قبل کدهای دیگه‌ای در فایل دارید، این بخش رو در انتهای فایل و قبل از ?>، در صورت وجود، بذارید. قبل از تغییر فایل هم حتماً یک نسخه پشتیبان بگیرید.

add_filter( 'woocommerce_email_styles', 'mihanwp_add_css_to_all_emails', 9999, 2 );

function mihanwp_add_css_to_all_emails( $css, $email ) { 
   $css .= '
      body {
         background-color: #f7f7f7;
         font-family: Arial, Helvetica, sans-serif;
         color: #333333;
         line-height: 1.6;
      }
      h1, h2, h3 {
         color: #2c3e50;
         font-weight: bold;
         margin-bottom: 16px;
      }
      .button {
         background-color: #3498db;
         border: none;
         padding: 10px 24px;
         color: white !important;
         text-decoration: none;
         border-radius: 5px;
         display: inline-block;
         font-weight: bold;
      }
      .button:hover {
         background-color: #2980b9;
      }
      .email-body {
         background-color: #ffffff;
         padding: 30px;
         border-radius: 8px;
      }
   ';
   return $css;
}

در این کد، تابع mihanwp_add_css_to_all_emails چند قانون CSS رو به استایل ایمیل‌ها اضافه می‌کنه. پس‌زمینه کلی خاکستری روشن می‌شه، فونت Arial برای متن در نظر گرفته می‌شه و تیترها رنگ آبی تیره می‌گیرن. دکمه‌ها هم آبی، گوشه‌گرد و خواناتر می‌شن. می‌تونید رنگ‌ها و اندازه‌ها رو با ظاهر برندتون هماهنگ کنید.

عدد 9999 اولویت اجرای فیلتر woocommerce_email_styles رو مشخص می‌کنه. این اولویت کمک می‌کنه CSS سفارشی بعد از استایل‌های قبلی اجرا بشه و در مواردی که قانون‌ها یکسان هستن، شانس بیشتری برای اعمال شدن داشته باشه.

روش دوم: افزودن CSS به یک ایمیل خاص در ووکامرس

گاهی نمی‌خواید همه ایمیل‌ها یک ظاهر داشته باشن. برای نمونه، شاید بخواید ایمیل تأیید پرداخت سبز باشه و ایمیل لغو سفارش رنگ متفاوتی داشته باشه. در این حالت باید شناسه ایمیل رو بررسی کنید و CSS رو فقط وقتی اضافه کنید که همون ایمیل در حال ساخته شدنه.

کد زیر رو به فایل functions.php اضافه کنید:

add_filter( 'woocommerce_email_styles', 'mihanwp_add_css_to_specific_email', 9999, 2 );

function mihanwp_add_css_to_specific_email( $css, $email ) { 
   // بررسی می‌کنیم که آیا ایمیل مورد نظر، ایمیل "سفارش جدید" است یا خیر
   if ( $email->id == 'new_order' ) {   
      $css .= '
         body {
            background-color: #e8f4fd;
            font-family: "Verdana", sans-serif;
         }
         h2 {
            font-size: 24px;
            color: #2980b9;
         }
         .button {
            background-color: #27ae60;
         }
      ';
   }
   return $css;
}

تفاوت اصلی این کد با روش قبلی، شرط if ( $email->id == 'new_order' ) هست. این شرط بررسی می‌کنه که شناسه ایمیل new_order باشه؛ یعنی همون ایمیل سفارش جدیدی که برای مدیر فروشگاه فرستاده می‌شه. اگه شناسه ایمیل چیز دیگه‌ای باشه، این CSS به اون اضافه نمی‌شه.

شناسه یا ID چند مورد از ایمیل‌های ووکامرس رو در فهرست زیر می‌بینید:

• new_order – ایمیل سفارش جدید برای مدیر فروشگاه
• customer_processing_order – ایمیل تأیید سفارش برای مشتری
• customer_completed_order – ایمیل تکمیل سفارش برای مشتری
• customer_cancelled_order – ایمیل لغو سفارش برای مشتری
• customer_invoice – ایمیل فاکتور مشتری
• customer_note – ایمیل یادداشت مشتری
• customer_reset_password – ایمیل بازیابی رمز عبور

نکات پیشرفته و رفع مشکلات رایج

چطور لوگو رو به ایمیل ووکامرس اضافه کنیم؟ خود تصویر لوگو فقط با CSS به ایمیل اضافه نمی‌شه. برای تنظیمش به مسیر ووکامرس > پیکربندی > ایمیل‌ها برید و بخش مربوط به قالب ایمیل رو پیدا کنید. در اونجا می‌تونید آدرس تصویر سربرگ یا لوگوی فروشگاهتون رو وارد کنید. اگه این گزینه رو در نسخه یا رابط فعلی ووکامرس پیدا نکردید، کد زیر هم امکان تعیین آدرس تصویر سربرگ رو بهتون می‌ده:

add_filter( 'woocommerce_email_header_image', 'mihanwp_email_logo', 10, 2 );
function mihanwp_email_logo( $image, $email ) {
    return 'https://yourwebsite.com/wp-content/uploads/logo.png';
}

چرا تغییرات در ایمیل دیده نمی‌شه؟

سرویس‌هایی مثل جیمیل و اوت‌لوک از همه قانون‌های CSS پشتیبانی نمی‌کنن و ممکنه بعضی استایل‌ها رو نمایش ندن. CSS درون‌خطی یا inline یعنی استایل مستقیماً داخل تگ HTML قرار می‌گیره و معمولاً سازگاری بهتری با برنامه‌های ایمیل داره. افزونه‌هایی مثل Email Customizer for WooCommerce یا YayMail هم برای طراحی ایمیل‌های ووکامرس ساخته شدن. بعد از هر تغییر، یک ایمیل آزمایشی بفرستید و نتیجه رو در چند سرویس مختلف مثل جیمیل، یاهو، اوت‌لوک و سرویس ایمیلی که مشتری‌هاتون بیشتر استفاده می‌کنن بررسی کنید.

جمع‌بندی و توصیه نهایی

برای افزودن CSS به ایمیل‌های ووکامرس دو راه دارید. اگه یک ظاهر هماهنگ برای همه ایمیل‌ها می‌خواید، روش اول مناسب‌تره. اگه فقط یک ایمیل مشخص باید استایل متفاوتی داشته باشه، می‌تونید با شرط $email->id همون ایمیل رو هدف بگیرید. لوگو هم از تنظیمات قالب ایمیل یا با فیلتر مربوط به تصویر سربرگ قابل تنظیمه.

بهتره کدها رو اول در یک نسخه آزمایشی از سایتتون امتحان کنید. قبل از تغییر فایل functions.php هم نسخه پشتیبان بگیرید تا اگه خطایی پیش اومد، بتونید سایت رو سریع به حالت قبل برگردونید. در آخر، فقط به پیش‌نمایش بسنده نکنید و حتماً یک ایمیل واقعی برای خودتون بفرستید.

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.