تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده

تبلیغات
تبلیغات تبلیغات

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

مقالات,آموزش,ترفند , وردپرس

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

 

این کار را به ۲ روش می‌توان انجام داد. روش اول استایل دهی به تمام ایمیل‌های ووکامرس هست و روش دوم استایل دهی به یک ایمیل خاص در ووکامرس. بیایید قدم به قدم هر دو روش را بررسی کنیم.

 

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

برای افزودن CSS به ایمیل‌های ووکامرس کافیست کد زیر را در فایل functions.php قالب سایت خود بعد از <?php در خط دوم قرار دهید:

add_filter( 'woocommerce_email_styles', 'bistscript_add_css_to_emails', 9999, 2 );
function bistscript_add_css_to_emails( $css, $email ) {
$css .= '
body { color: #333 }
h2 { font-size: 30px }
';
return $css;
}

در کد بالا یک تابع به نام bistscript_add_css_to_emails ساختیم. در این تابع مشخص کردیم که دو خط CSS یعنی body { color: #333 } و h2 { font-size: 30px } را Return کن. سپس با فیلتر woocommerce_email_styles این سی اس اس‌ها را به ایمیل‌های ووکامرس اضافه کردیم.

به همین راحتی 🙂

حالا بیایید سی اس اس دلخواه خود را به یک ایمیل خاص از ووکامرس اضافه کنیم.

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

برای اینکار باید کد زیر را در فایل توابع یا همان functions.php قالب سایت اضافه کنیم:

add_filter( 'woocommerce_email_styles', 'bistscript_add_css_to_emails', 9999, 2 );
function bistscript_add_css_to_emails( $css, $email ) {
if ( $email->id == 'new_order' ) {
$css .= '
body { color: #333 }
h2 { font-size: 30px }
';
}
return $css;
}

اما این کد با کد قبلی یک تفاوت اساسی دارد. در بخش if ( $email->id == ‘new_order’ ) مشخص کردیم که اگر آیدی ایمیل برابر با new_order یعنی ایمیل سفارش جدید بود، سپس سی اس اس ها را اضافه کن.
 

به همین راحتی توانستیم با دو روش بالا، CSS دلخواه خود را به ایمیل‌های ووکامرس اضافه کنیم. هر تعداد خط CSS که می‌خواهید می‌توانید در قسمتی که ۲ خط سی اس اس ما نوشته شده اضافه کنید.

موفق باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
انتقال و خرید دامنه 5000 تومان! | کد تخفیف: limoo-ir-5s ثبت دامنه >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=55363
کلمات کلیدی پست :
مطالب مرتبط
5,900افزونه نمایش تصاویر مرتبط با محصولات ووکامرس از طریق Instagram تاریخ : 2018/07/19
5,396پوسته فروشگاهی و چند فروشندگی TopDeal برای وردپرس تاریخ : 2018/09/4
7,863پوسته فروشگاه ووکامرس The Retailer فارسی تاریخ : 2014/01/17
4,736ایجاد واترمارک در فایل های PDF در ووکامرس با افزونه PDF Watermark تاریخ : 2018/07/18
3,628بازگشت به نسخه قبلی ووکامرس یا حذف کامل WooCommerce تاریخ : 2020/01/11
10,544افزونه تسویه حساب چند مرحله‌‌ای در ووکامرس YITH WooCommerce Multi-step Checkout تاریخ : 2018/07/12
4,108پوسته مجله خبری CrazyBlog برای وردپرس تاریخ : 2018/10/26
3,744ارسال ایمیل یادآوری برای فاکتورهای پرداخت نشده در ووکامرس تاریخ : 2019/01/15
6,972دانلود قالب فروشگاهی ShopKit برای وردپرس تاریخ : 2018/04/2
127,436دانلود افزونه ووکامرس همکاری در فروش AffiliateWP فارسی نسخه 2.8.2 تاریخ : 2021/12/28
4,156پوسته سایت بازاریابی و خدمات سئو Seosight برای وردپرس تاریخ : 2019/12/19
2,624مشخصات هاست مورد نیاز برای راه اندازی ووکامرس تاریخ : 2019/06/20
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
شرکت سئو سایت
شرکت سئو سایت
تبلیغات
هاست دانلود
تبلیغات