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





پلتفرم رپورتاژ آگهی و بک لینک تسمینو
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

افزودن 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 که می‌خواهید می‌توانید در قسمتی که ۲ خط سی اس اس ما نوشته شده اضافه کنید.

موفق باشید.

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 وردپرس , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=55363
کلمات کلیدی پست :
مطالب مرتبط
41,763دانلود قالب فروشگاهی MegaShop برای ووکامرس تاریخ : 2015/03/13
7,116پوسته مجله خبری The League برای وردپرس تاریخ : 2018/09/28
21,898افزونه استعلام قیمت ووکامرس Request a Quote نسخه 2.37 تاریخ : 2017/02/9
21,362قالب فارسی بازی و فروشگاهی GamesDir برای وردپرس تاریخ : 2015/02/18
8,872افزونه جستجو محصولات ووکامرس WooCommerce Product Search تاریخ : 2018/07/6
7,008دانلود پوسته فروشگاهی وردپرس Junko تاریخ : 2019/05/30
8,224دانلود قالب مجله خبری SimpleMag برای وردپرس تاریخ : 2018/06/29
12,588نحوه راست چین و چپ چین کردن در ووکامرس با افزونه WooCommerce RTL تاریخ : 2018/11/20
6,796افزونه اتصال ووکامرس به میل چیمپ YITH WooCommerce Mailchimp تاریخ : 2018/11/24
10,264دانلود قالب فروشگاهی BoxShop برای وردپرس تاریخ : 2018/05/8
12,312ایجاد سیستم پرسش و پاسخ ووکامرس با افزونه YITH WooCommerce Questions and Answers تاریخ : 2018/09/2
7,632دانلود قالب وبلاگی Solien برای وردپرس تاریخ : 2019/04/18
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file