به این مطلب امتیاز دهید
تغییر نماد پولی تومان در ووکامرس
در این آموزش به شما خواهیم گفت که چگونه نماد واحد پولی تومان در ووکامرس را با یک SVG دلخواه جایگزین کنیم و کد PHP ارائهشده را گامبهگام بررسی، توضیح و نحوه استفاده آن را در سایتهایی که با المنتور ساخته شدهاند توضیح میدهد ، همچنین شما می توانید فایل svg آن را دانلود کنید ، این روش در طراحی کارت محصول ، صفحه محصول با ووکامرس نیز کار می کند.
|
1 2 3 4 5 6 7 8 9 10 |
<?php // کد تغییر تومان به متن یا المان دلخواه که باید در functions.php گذاشته شود add_filter('woocommerce_currency_symbol', function($currency_symbol, $currency) { if ($currency === 'IRT') { $currency_symbol = '<svg width="13" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.32 6.118c.315-.154.552-.308.789-.539l.473-.692c.079-.308.158-.616.158-.924h7.492c.473 0 .867-.154 1.183-.385.236-.308.394-.692.394-1.231V.5h-1.025v1.77c0 .385-.237.616-.631.616H3.74V2.5c0-.385-.08-.616-.158-.924 0-.23-.158-.461-.316-.615a1.654 1.654 0 0 0-.473-.308C2.557.577 2.32.5 2.163.5c-.316 0-.553.077-.79.154C1.217.808.98.884.9 1.116c-.157.154-.315.307-.315.538-.079.231-.158.462-.158.693 0 .23 0 .462.08.693.078.23.157.384.236.538.157.077.315.231.552.308.236.077.473.077.867.077h.631c0 .154-.079.308-.079.462-.079.154-.236.308-.315.462-.079.076-.237.153-.473.23a1.515 1.515 0 0 1-.631.154H.27V6.35h1.025c.394-.077.71-.154 1.025-.231zm-.158-3.232c-.315 0-.473 0-.63-.154-.08-.077-.158-.231-.158-.462 0-.23.079-.462.157-.539.158-.077.316-.154.552-.154.237 0 .395.077.552.231.158.154.158.385.158.693v.462h-.63v-.077z" fill="#021959"/><path d="M10.442.5H7.445v.923h2.997V.5zM12.73 8.504c-.08-.231-.158-.385-.316-.539-.157-.154-.315-.308-.552-.385a1.515 1.515 0 0 0-.63-.154c-.237 0-.474.077-.71.154-.237.077-.395.231-.552.385-.158.154-.237.308-.316.539-.079.23-.079.462-.079.692v.231c0 .231-.079.308-.158.462-.157.077-.315.154-.552.154H8.55a.61.61 0 0 1-.394-.154c-.08-.154-.158-.308-.158-.462V5.733H6.973v3.848c0 .308 0 .539.079.693.078.154.157.308.315.462.158.076.237.23.473.23.158.077.316.077.552.077h.552c.158 0 .395-.077.552-.153.158-.078.395-.231.474-.462.157.23.315.384.552.461.236.077.473.154.788.154.473 0 .947-.153 1.183-.461.316-.308.473-.77.473-1.309a9.513 9.513 0 0 0-.236-.77zM11.23 9.966c-.236 0-.394-.077-.473-.154-.236-.154-.236-.308-.236-.539 0-.23.078-.384.157-.538.08-.154.316-.231.552-.231.237 0 .474.077.552.23.08.155.158.309.158.54-.079.461-.315.692-.71.692zM4.923 8.504c0 .23 0 .384-.08.615l-.236.462c-.158.154-.315.23-.473.308a1.607 1.607 0 0 1-.71.154h-.71c-.236 0-.473 0-.71-.077-.157-.154-.315-.231-.394-.385-.079-.154-.236-.308-.236-.462-.08-.154-.08-.384-.08-.615v-.847H.27v.924c0 .77.236 1.385.63 1.847.395.461.947.692 1.735.692h.79c.393 0 .709-.077 1.024-.23.316-.155.552-.309.789-.54.237-.23.394-.538.473-.846.08-.308.158-.616.158-1v-2.77l-1.025-.078.079 2.848z" fill="#021959"/><path d="M3.74 7.426H2.557v1.077H3.74V7.426z" fill="#021959"/></svg>'; } return $currency_symbol; }, 10, 2); |
خلاصه کاری که کد انجام میدهد
کد یک فیلتر به نام woocommerce_currency_symbol اضافه میکند که نماد پیشفرض یک ارز مشخص (در اینجا IRT) را با یک مقدار دلخواه جایگزین میکند. این مقدار دلخواه یک قطعه SVG است که بهصورت رشتهی HTML بازگردانده میشود تا در نمایش قیمتها در قالب و ووکامرس بهعنوان نماد واحد پول نشان داده شود.
بررسی خط به خط کد
- add_filter(‘woocommerce_currency_symbol’, …): این خط فیلتر ووکامرس را hook میکند. این فیلتر هر زمان که ووکامرس میخواهد نماد یک ارز را نشان دهد اجرا میشود.
- function($currency_symbol, $currency): تابعی ناشناس (closure) تعریف شده که دو آرگومان میگیرد:
- $currency_symbol: مقدار نماد فعلی (که معمولاً رشتهای مثل “تومان” یا “IRR” است).
- $currency: کد ارز (مثلاً ‘USD’، ‘EUR’ یا در حالت شما ‘IRT’).
- if ($currency === ‘IRT’) { … }: اگر کد ارز برابر ‘IRT’ بود، مقدار نماد جایگزین میشود. شما میتوانید این شرط را برای دیگر کدهای ارز یا چند ارز تغییر دهید.
- $currency_symbol = ‘<svg …>…</svg>’; بهجای نماد متنی، یک رشته HTML شامل عنصر SVG قرار داده شده است. این SVG همان تصویری است که در قیمتها نمایش داده میشود.
- return $currency_symbol; مقدار (ممکن است تغییر یافته) نماد برگردانده میشود تا ووکامرس از آن برای رندر قیمت استفاده کند.
- , 10, 2: عدد 10 اولویت اجرای فیلتر است و عدد 2 نشان میدهد این callback دو پارامتر دریافت میکند.
نکات فنی و بهترین روشها
- محل قرارگیری کد: این کد را داخل functions.php قالب فرزند (child theme) یا در یک پلاگین اختصاصی قرار دهید تا با آپدیت قالب از بین نرود.
- مراقب خروجی HTML در مکانهای مختلف باشید: وقتی نماد به شکل SVG بازگردانده میشود، قالب یا افزونهای که خروجی قیمت را escape میکند ممکن است SVG را به عنوان متن نادیده بگیرد یا sanitize کند. اگر SVG نمایش نشد، بررسی کنید فیلترها یا توابع قالب خروجی را تغییر نمیدهند.
- بهینهسازی و حجم SVG: اگر SVG پیچیده یا بزرگ است، بهتر است آن را بهینه کنید تا حجم صفحه کم شود. اگر چند بار در صفحه استفاده میشود، میتوانید SVG را به صورت inline تعریف نکنید و از sprite یا <use> یا background-image با فایل خارجی استفاده کنید.
- سازگاری با RTL و CSS: ممکن است نیاز داشته باشید با CSS، موقعیت و فاصلهی SVG نسبت به قیمت را تنظیم کنید (مثلاً margin یا vertical-align).