نمایش پاپ آپ هشدار روشن بودن VPN در صفحه پرداخت ووکامرس + (کد آماده)

نمایش پاپ آپ هشدار روشن بودن VPN / فیلترشکن در صفحه پرداخت ووکامرس (کد آماده)

اگر فروشگاه اینترنتی شما با ووکامرس (WooCommerce) راه‌اندازی شده، حتماً می‌دانید که یکی از مشکلات رایج کاربران هنگام خرید، روشن بودن فیلترشکن یا VPN است. بسیاری از درگاه‌های بانکی و سرویس‌های پرداخت آنلاین، به دلیل موقعیت مکانی کاربر، تراکنش‌ها را رد می‌کنند و همین موضوع می‌تواند باعث اختلال در فرایند پرداخت و نارضایتی مشتریان شود.

برای جلوگیری از این مشکل، می‌توانید به‌سادگی یک پاپ آپ هشدار روشن بودن VPN در ووکامرس نمایش دهید تا کاربر پیش از تکمیل خرید، فیلترشکن خود را خاموش کند. در این مقاله روش انجام این کار به همراه کد آماده را توضیح می‌دهیم.

چرا نمایش پاپ آپ هشدار فیلترشکن در ووکامرس مهم است؟

• جلوگیری از خطا در تراکنش بانکی

• کاهش احتمال ناموفق بودن خرید کاربران

• افزایش رضایت مشتریان

• بهبود امنیت و دقت پرداخت‌ها

بسیاری از کاربران ایرانی هنگام استفاده از ووکامرس از VPN یا فیلترشکن استفاده می‌کنند که ممکن است باعث اختلال در فرآیند پرداخت شود. نمایش یک پاپ آپ جذاب و کاربرپسند می‌تواند کاربران را به خاموش کردن VPN تشویق کند و تجربه خرید را بهبود بخشد. این کد به‌صورت اختصاصی برای صفحات سبد خرید و پرداخت طراحی شده و با استفاده از API رایگان ip-api.com، موقعیت مکانی کاربر را بررسی می‌کند.

ویژگی‌های این کد

• هدفمند: فقط در صفحات سبد خرید و پرداخت ووکامرس نمایش داده می‌شود.
• کاربرپسند: طراحی زیبا با انیمیشن و پیام واضح.
• سبک و سریع: استفاده از API رایگان و بهینه برای بررسی موقعیت کاربر.
• ریسپانسیو: سازگار با تمامی دستگاه‌ها (موبایل و دسکتاپ).

کد نمایش پاپ آپ هشدار VPN در ووکامرس

برای پیاده‌سازی این قابلیت، کد زیر را به فایل functions.php قالب وردپرس خود اضافه کنید. این کد به‌صورت خودکار بررسی می‌کند که آیا کاربر از VPN استفاده می‌کند یا خیر و در صورت نیاز، پاپ آپ هشدار را نمایش می‌دهد.

// نمایش پاپ آپ فقط در سبد خرید و صفحه پرداخت
add_action('wp_footer', 'check_user_country_and_show_popup');
function check_user_country_and_show_popup() {
    if ( ! function_exists('is_checkout') || ! function_exists('is_cart') ) return;

    // فقط در سبد خرید و پرداخت
    if ( !is_cart() && !is_checkout() ) return;

    // گرفتن آی پی کاربر
    $user_ip = $_SERVER['REMOTE_ADDR'];

    // دریافت کشور از API (free ip-api.com)
    $response = wp_remote_get("http://ip-api.com/json/{$user_ip}?fields=status,countryCode");
    if (is_wp_error($response)) return;

    $data = json_decode(wp_remote_retrieve_body($response));
    if ($data && $data->status === 'success') {
        if ($data->countryCode !== 'IR') { 
            ?>
            <div id="vpn-warning-popup">
                <div class="vpn-popup-content">
                    <img src="https://fileimarket.com/wp-content/uploads/2025/08/3d-icon-internet-cyber-crime-vpn-png.webp?text=VPN+Warning" alt="VPN Warning" style="max-width:50%;border-radius:12px;">
                    <p>کاربر گرامی، در صورتی که فیلترشکن روشن دارید بهتر است آن را خاموش کنید تا خللی در روند پرداخت انجام نشود.</p>
                    <button class="vpn-close btn-clo">باشه</button>
                </div>
            </div>

            <style>
                #vpn-warning-popup {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: fixed;
                    z-index: 9999999999999999999999;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0,0,0,0.6);
                }
                .vpn-popup-content {
                    background: #fff;
                    padding: 20px;
                    border-radius: 15px;
                    max-width: 450px;
                    width: 90%;
                    text-align: center;
                    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
                    position: relative;
                    animation: popupAnim 0.4s ease;
                }
                .vpn-popup-content p {
                    font-weight: 400;
                    text-align: center;
                    font-size: 15px;
                    line-height: 1.6;
                    margin-top: 15px;
                }
                .btn-clo {
                    font-size: 15px;
                    padding: 15px 50px;
                    background-color: #0ec34c;
                    border-radius: 12px;
                    margin-top: 20px;
                }
                @keyframes popupAnim {
                    from { transform: scale(0.7); opacity: 0; }
                    to { transform: scale(1); opacity: 1; }
                }
            </style>

            <script>
                document.addEventListener("DOMContentLoaded", function(){
                    document.querySelector(".vpn-close").addEventListener("click", function(){
                        document.getElementById("vpn-warning-popup").style.display = "none";
                    });
                });
            </script>
            <?php
        }
    }
}

نحوه کارکرد کد

1. بررسی صفحات: کد فقط در صفحات سبد خرید (is_cart()) و پرداخت (is_checkout()) اجرا می‌شود.
2. دریافت آی‌پی کاربر: با استفاده از $_SERVER['REMOTE_ADDR'] آی‌پی کاربر دریافت می‌شود.
3. بررسی موقعیت مکانی: از API رایگان ip-api.com برای شناسایی کشور کاربر استفاده می‌شود.
4. نمایش پاپ آپ: اگر کاربر از کشوری غیر از ایران (کد کشور IR) باشد، پاپ آپ با پیامی کاربرپسند و دکمه بستن نمایش داده می‌شود.
5. طراحی زیبا: پاپ آپ با انیمیشن نرم، طراحی ریسپانسیو و دکمه جذاب ارائه می‌شود.

مزایای استفاده از این پاپ آپ

• بهبود تجربه کاربری: کاربران با پیام واضح و محترمانه تشویق به خاموش کردن VPN می‌شوند.
• کاهش خطای پرداخت: جلوگیری از مشکلات پرداخت ناشی از استفاده از VPN.
• افزایش اعتماد: طراحی حرفه‌ای پاپ آپ حس اعتماد را به کاربران منتقل می‌کند.
• سئو شده: این آموزش با کلمات کلیدی هدفمند نوشته شده تا در نتایج گوگل رتبه بهتری کسب کند.

نکات مهم برای پیاده‌سازی

• آدرس تصویر: تصویر استفاده‌شده در کد را با آدرس تصویر دلخواه خود جایگزین کنید.
• تست API: مطمئن شوید که API ip-api.com در دسترس است و محدودیت درخواست روزانه آن را رعایت کنید.
• سازگاری با قالب: اگر قالب شما استایل‌های خاصی دارد، CSS پاپ آپ را با آن هماهنگ کنید.
• بک‌آپ: قبل از افزودن کد به functions.php، از سایت خود بک‌آپ بگیرید.

سوالات متداول

۱. آیا این کد روی همه قالب‌های ووکامرس کار می‌کند؟

بله، این کد با اکثر قالب‌های استاندارد ووکامرس سازگار است، اما بهتر است در محیط تستی بررسی شود.

۲. اگر API از کار بیفتد چه اتفاقی می‌افتد؟

در صورت خطا در API، کد به‌صورت خودکار متوقف می‌شود و پاپ آپ نمایش داده نمی‌شود.

۳. چگونه می‌توانم استایل پاپ آپ را تغییر دهم؟

می‌توانید بخش CSS کد را ویرایش کنید تا رنگ، فونت یا انیمیشن را به دلخواه تغییر دهید.

نتیجه‌گیری

با استفاده از این کد، می‌توانید به‌راحتی یک پاپ آپ هشدار VPN در صفحات پرداخت و سبد خرید ووکامرس نمایش دهید. این راهکار نه‌تنها تجربه کاربری را بهبود می‌بخشد، بلکه با کاهش خطاهای پرداخت، فروش شما را افزایش می‌دهد. اگر سوالی دارید یا نیاز به سفارشی‌سازی بیشتر دارید، در بخش نظرات بپرسید!