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

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

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

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

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

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

کد نمایش پاپ آپ هشدار 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. طراحی زیبا: پاپ آپ با انیمیشن نرم، طراحی ریسپانسیو و دکمه جذاب ارائه می‌شود.

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

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

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

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

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

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

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

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

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

نتیجه‌گیری

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