WooCommerce: أضف CSS لطلب رسائل البريد الإلكتروني

بخلاف قالب وورد بريس الخاص بك ، لا يمكنك فقط إضافة CSS إلى style.css لتخصيص مظهر رسائل البريد الإلكتروني لـ WooCommerce .

لذلك فإن مقتطف PHP العملي هذا هو الحل الوحيد القابل للتطبيق. إنه أمر صعب بعض الشيء ولكن بمجرد أن تحصل على الفكرة ، فإن إضافة CSS إلى Order Emails يعد أمرًا سهلاً.

WooCommerce: تخصيص CSS للبريد الإلكتروني

WooCommerce: تخصيص البريد الإلكتروني CSS

مقتطف PHP # 1: أضف CSS إلى جميع رسائل WooCommerce الإلكترونية

/**
 * @snippet       Add CSS to WooCommerce Emails
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    Woo 4.6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_email_styles', 'bbloomer_add_css_to_emails', 9999, 2 );
 
function bbloomer_add_css_to_emails( $css, $email ) { 
   $css .= '
      h2 { color: red }
      h3 { font-size: 30px }
   ';
   return $css;
}

مقتطف PHP # 2: أضف CSS إلى بريد إلكتروني WooCommerce محدد

ملاحظة – يمكنك العثور على قائمة بمعرفات البريد الإلكتروني (يستخدم المقتطف “new_order” على سبيل المثال) هنا: https://www.businessbloomer.com/woocommerce-add-extra-content-order-email/

/**
 * @snippet       Add CSS to Specific WooCommerce Email
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    Woo 4.6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_email_styles', 'bbloomer_add_css_to_new_order_email', 9999, 2 );
 
function bbloomer_add_css_to_new_order_email( $css, $email ) { 
   if ( $email->id == 'new_order' ) {
      $css .= '
         h2 { color: red }
         h3 { font-size: 30px }
      ';
   }
   return $css;
}

المنشورات ذات الصلة:

WooCommerce: أضف محتوى إلى بريد إلكتروني لطلب معين

WooCommerce: أضف طريقة دفع لطلب رسائل البريد الإلكتروني

WooCommerce: أضف الاسم الأول لطلب موضوع البريد الإلكتروني

WooCommerce: إزالة الارتباط إلى Product @ Order Table

WooCommerce: تعطيل WooCommerce CSS الافتراضي

WooCommerce: تعطيل البريد الإلكتروني لطلب العميل للطلبات المجانية

WooCommerce: أرسل بريدًا إلكترونيًا مخصصًا عند تغيير حالة الطلب

WooCommerce: إخفاء “شكرًا على التسوق معنا” @ Emails

WooCommerce: أضف إلى: نسخة إلى: نسخة مخفية الوجهة: مستلمو البريد الإلكتروني

WooCommerce: إضافة إعداد مخصص لـ وورد بريس

أين تضيف هذا المقتطف؟

يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”

هل هذا المقتطف (لا يزال) يعمل؟

يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.

إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂

هل تحتاج إلى مساعدة في WooCommerce؟

تحقق من دروس الفيديو المجانية هذه. يمكنك تعلم كيفية تخصيص WooCommerce بدون مكونات إضافية غير ضرورية ، وكيفية تكوين إعدادات البرنامج المساعد WooCommerce بشكل صحيح وحتى كيفية إتقان استكشاف أخطاء WooCommerce في حالة حدوث خطأ!