نحوه تغییر قلم در دروازه پرداخت راه راه برای WooCommerce

هنگام ادغام Stripe با WooCommerce ، ممکن است متوجه شوید که قسمت های پرداخت پیش فرض از قلم استاندارد Stripe استفاده می کنند ، که ممکن است با مارک وب سایت شما مطابقت نداشته باشد. خوشبختانه ، می توانید قلم را در عناصر نوار سفارشی کنید تا از یک تجربه کاربر بدون درز اطمینان حاصل کنید.

با این حال ، یک مسئله مشترک که بسیاری از توسعه دهندگان با آن روبرو هستند خطاهای CORS (اشتراک منابع متقاطع) هنگام بارگیری فونت های سفارشی به طور مستقیم از سرورهای خود. بهترین راه برای دور زدن این مسئله توسط میزبانی قلم روی CDN (شبکه تحویل محتوا).

در این راهنما ، ما شما را از طریق فرایند کامل تغییر قلم در زمینه های پرداخت نوار ، از جمله نحوه بارگذاری قلم ها در CDN برای جلوگیری از مشکلات CORS ، طی خواهیم کرد.

مرحله 1: قلم خود را در CDN بارگذاری کنید

از آنجا که بارگیری یک قلم از سرور شخصی شما می تواند منجر شود خطاهای CORS، بهترین راه حل میزبانی آن در CDN است. شما می توانید از خدمات مانند استفاده کنید JSDELIVR ، صفحات GitHub ، Google Cloud Storage یا CloudFlare برای ذخیره و سرو پرونده های قلم خود.

نحوه بارگذاری قلم خود در JSDELIVR (با استفاده از GitHub)

1. یک مخزن GitHub ایجاد کنید (اگر یکی ندارید).
2. پرونده های قلم خود را بارگذاری کنید (به عنوان مثال ، .woffبا .woff2با .ttf).
3. مخزن را به GitHub فشار دهیدبشر
4. لینک CDN را دریافت کنید با استفاده از jsdelivr:
   • قالب: https://cdn.jsdelivr.net/gh/your-username/repository-name/path-to-font-file
   • مثال: https://cdn.jsdelivr.net/gh/chauhan07/snipshot/Reo_Sans/stylesheet-reo.css?ver=1.0.0

پس از بارگذاری فونت در CDN ، می توانید آن را در ادغام Stripe Stripe WooCommerce خود ارجاع دهید.

مرحله 2: عناصر پرداخت نوار WooCommerce را اصلاح کنید

WooCommerce Stripe اجازه می دهد تا با استفاده از فیلترها ، سبک های فرم پرداخت را شخصی سازی کنید. برای تغییر قلم ، کد PHP زیر را به خود اضافه کنید موضوع functions.php پرونده:

// Add custom font to Stripe Elements in WooCommerce
add_filter('wc_stripe_get_element_options', function ($options) {
    $options['fonts'] = [
        [
            'family' => 'Reo Sans',
            'src' => 'https://cdn.jsdelivr.net/gh/chauhan07/snipshot/Reo_Sans/stylesheet-reo.css?ver=1.0.0' // Replace with your CDN link
        ]
    ];

    $options['appearance'] = [
        'variables' => [
            'fontFamily' => '"Reo Sans", sans-serif'
        ],
        'rules' => [
            '.Input' => [
                'fontFamily' => '"Reo Sans", sans-serif',
                'fontSize' => '16px',
                'fontWeight' => '400',
                'color' => '#333333'
            ],
            '.Label' => [
                'fontFamily' => '"Reo Sans", sans-serif',
                'fontSize' => '18px',
                'fontWeight' => '400',
                'color' => '#000000'
            ]
        ]
    ];

    return $options;
});

توضیح کد

• فونت سفارشی را بارگیری می کند از CDN
• خانواده قلم را تعریف می کند برای زمینه های پرداخت راه راه.
• برچسب ها و زمینه های ورودی را تضمین می کند از قلم جدید استفاده کنید.
• خطای CORS را برطرف می کند با استفاده از CDN شخص ثالث به جای سرور محلی.

مرحله 3: حافظه پنهان و تست را پاک کنید

پس از انجام این تغییرات ، اطمینان حاصل کنید که قلم به درستی اعمال می شود:

• حافظه پنهان خود را پاک کنید (به خصوص اگر از افزونه ذخیره مانند WP Rocket استفاده می کنید).
• در یک پنجره ناشناس تست کنید برای جلوگیری از تداخل حافظه پنهان مرورگر.
• عناصر نوار را بازرسی کنید با استفاده از ابزارهای توسعه دهنده (F12 → Elements … بررسی کنید font-family).

اگر فونت تغییر نمی کند ، خود را دوبار بررسی کنید URL CDN و تأیید کنید که پرونده قلم شما در دسترس است.

افکار نهایی

با دنبال کردن این راهنما ، می توانید ضمن جلوگیری از خطاهای CORS ، قلم را در دروازه پرداخت نوار برای WooCommerce تغییر دهید. با استفاده از CDN ، فونت های شما به سرعت و ایمن بار را حفظ می کند و یک تجربه پرداخت یکپارچه را برای مشتریان خود حفظ می کند.

اگر سوالی دارید یا به کمک بیشتری نیاز دارید ، در صورت تمایل نظر خود را در زیر بگذارید!

🚀 برنامه نویسی مبارک!