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





آخرین ارسال های تالار مشاهده انجمن
محدودیت در فرم های گریوتی فرم 0 پاسخ 0 بازدید آپدیت نسخه نال شده افزونه یواست سئو 1 پاسخ 88 بازدید قرار دادن افزونه wp Carousel pro 1 پاسخ 803 بازدید افزونه تبلیغات حرفه ای 5 پاسخ 3108 بازدید نصب اسکریپت play tube 0 پاسخ 3214 بازدید کپی محصولات ووکامرس 2 پاسخ 4167 بازدید راستچین کردن قالب مدیریتی HTML 0 پاسخ 2243 بازدید افزونه VitePos 0 پاسخ 3547 بازدید فروش ربات تلگرامی با 40K ممبر فعال (فروشگاهی) 0 پاسخ 4253 بازدید آپدیت افزونه alkit 1 پاسخ 4221 بازدید
اپوفایننس

افزودن 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
کلمات کلیدی پست :
مطالب مرتبط
7,888افزونه بزرگنمایی تصاویر محصولات ووکامرس YITH WooCommerce Zoom Magnifier تاریخ : 2018/07/22
6,356راه‌اندازی فروشگاه اینترنتی: حلقه ترجمه در ووکامرس تاریخ : 2018/12/5
36,684افزودن دکمه تماس برای اطلاع از قیمت محصولات ووکامرس با افزونه WC Call For Price تاریخ : 2019/11/18
7,208دانلود قالب فروشگاهی ShopIsle ووکامرس تاریخ : 2020/05/22
5,804دانلود قالب چندمنظوره TheCraft برای وردپرس تاریخ : 2018/09/26
6,728افزونه ضمانت بهترین قیمت در ووکامرس YITH Best Price Guaranteed تاریخ : 2018/10/3
7,976پوسته فروشگاهی و چندمنظوره UpStore برای ووکامرس تاریخ : 2019/02/7
8,020ایجاد صورت‌حساب در ووکامرس با افزونه YITH WooCommerce PDF Invoice تاریخ : 2018/09/5
6,556پوسته سایت بازاریابی و خدمات سئو Seosight برای وردپرس تاریخ : 2019/12/19
7,176پوسته فروشگاهی Airi برای ووکامرس تاریخ : 2018/11/20
9,812نمایش پیام به خریداران محصولات در ووکامرس با افزونه Woo Already Bought تاریخ : 2018/06/3
6,276ایجاد فرم نظرسنجی در ووکامرس با افزونه YITH WooCommerce Advanced Reviews تاریخ : 2018/12/13
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file