تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
اسکریپت vfm 1 پاسخ 48 بازدید افزونه ساخت شماره مجازی 10 پاسخ 573 بازدید مشکل در اسکریپت مچ فرم 0 پاسخ 141 بازدید واگذاری سرویس هاست اختصاصی ووکامرس 0 پاسخ 207 بازدید به هم ریختگی سایت بعد از نصب قالب 0 پاسخ 186 بازدید درخواست قالب با سبک کندو 0 پاسخ 209 بازدید اسکریپت نال شده 1 پاسخ 246 بازدید اسکریپت droppy 1 پاسخ 246 بازدید درخواست طراحی قالب وبلوتین 4 پاسخ 634 بازدید از کجا دامین ارزان خرید کنم لطفا معرفی کنید 1 پاسخ 389 بازدید
تبلیغات
تبلیغات تبلیغات

افزودن 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
کلمات کلیدی پست :
مطالب مرتبط
4,080محاسبه هزینه ارسال بر اساس وزن در ووکامرس با افزونه WooCommerce Weight Based Shipping تاریخ : 2019/05/11
11,289دانلود قالب چندمنظوره TheGem برای وردپرس تاریخ : 2018/01/14
13,016افزونه فارسی همکاری در فروش ووکامرس YITH WooCommerce Affiliates Premium تاریخ : 2018/06/20
5,532پوسته مهدکودک Fable برای وردپرس تاریخ : 2018/07/29
5,256پوسته خدمات کشاورزی The Landscaper برای وردپرس تاریخ : 2018/08/7
15,572افزونه فروش لایسنس و کارت شارژ در ووکامرس License Manager for Woocommerce نسخه 5.4 تاریخ : 2018/11/12
6,380دانلود قالب فروشگاهی ووکامرس firezy تاریخ : 2019/05/26
9,276کد تخفیف ووکامرس به شرط اشتراک گذاری با افزونه Social Share Discount Coupon تاریخ : 2017/05/22
4,244دانلود قالب چندمنظوره Wanium برای وردپرس تاریخ : 2019/06/7
5,840آموزش افزایش سئو و رتبه ووکامرس در گوگل تاریخ : 2018/12/4
6,388افزونه نمایش اطلاعات دستگاه مشتری در ووکامرس Customer Device Info تاریخ : 2017/11/8
10,852ایجاد اپلیکیشن موبایل برای فروشگاه ووکامرس با افزونه TM Store تاریخ : 2018/06/27
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
تبلیغات
تبلیغات