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





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

افزودن 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 کلیک کنید >
ثبت نام در بروکر فارکس با قابلیت واریز و برداشت به صورت ریالی کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=55363
کلمات کلیدی پست :
مطالب مرتبط
7,616دانلود قالب عکاسی Novo برای وردپرس تاریخ : 2019/09/24
2,536تشخیص خرید مشکوک در ووکامرس با افزونه YITH WooCommerce Anti-Fraud تاریخ : 2019/10/6
4,680افزونه جدول سفارش محصولات ووکامرس Woo Products Table Pro تاریخ : 2019/03/19
5,008افزونه جستجو محصولات ووکامرس WooCommerce Product Search تاریخ : 2018/07/6
3,508آموزش ایجاد آدرس افزودن به سبد خرید در ووکامرس تاریخ : 2019/11/20
3,684دانلود پوسته فروشگاهی وردپرس Junko تاریخ : 2019/05/30
4,764مخفی کردن قیمت محصولات ناموجود در ووکامرس تاریخ : 2018/05/11
3,308آموزش افزودن برچسب انرژی به محصولات ووکامرس تاریخ : 2019/07/8
4,852دانلود قالب عکاسی Whizz برای وردپرس تاریخ : 2018/07/23
3,684قالب سایت موزیک SoundRise برای وردپرس تاریخ : 2019/05/5
10,795افزونه پرداخت آنلاین ووکامرس پارسی سیستم پی لاین تاریخ : 2014/06/22
5,110کاهش مراحل فرآیند خرید در ووکامرس تاریخ : 2018/02/23
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
شرکت سئو سایت
شرکت سئو سایت
تبلیغات
تبلیغات
تبلیغات