WooCommerce 根据访客 IP 显示支付提示

接口说明

浏览器端调用检测访客 IP，返回的是访客的 IP、国家、地区和城市信息，适合地区化内容展示。

{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}

应用场景

这些场景都能体现 IP 信息接口价值，并明确区分服务器 IP 与访客 IP。

• 根据国家显示地区化内容
• 显示不同购买、客服或支付提示
• 切换落地页 CTA 或活动模块
• 引导用户进入合适的支持入口
• 不创建多套页面也能优化地区体验

实现逻辑

实现前先确认请求发起方：服务器发起请求得到服务器 IP，浏览器发起请求得到访客 IP。

• 先输出默认内容
• 浏览器请求 https://my.ipin.io/info
• 读取返回的 country、region、city、ip
• 根据 country 从映射表选择内容或链接
• 接口失败时保留默认内容

代码示例

以下代码都直接使用 https://my.ipin.io/info，注释和界面文字均已本地化。

functions.php / plugin

function ipin_geo_payment_notice_html() {
    $box_id = 'ipin-payment-notice-' . wp_generate_uuid4();
    ob_start();
    ?>
    <div id="<?php echo esc_attr($box_id); ?>" class="woocommerce-info ipin-payment-notice">欢迎访问本站，这是默认内容。</div>
    <script>
    (async function () {
      const el = document.getElementById("<?php echo esc_js($box_id); ?>");
      const defaultText = "欢迎访问本站，这是默认内容。";
const contentMap = { TW: "台湾地区用户内容", US: "美国地区用户内容", JP: "日本地区用户内容" };
try {
  // 浏览器调用 /info：识别访客 IP。
  const info = await fetch("https://my.ipin.io/info").then(res => res.json());
  el.textContent = contentMap[info.country] || defaultText;
} catch (e) {
  // 接口异常时保留默认内容。
  el.textContent = defaultText;
}
    })();
    </script>
    <?php
    return ob_get_clean();
}
add_action('woocommerce_review_order_before_payment', 'ipin_geo_payment_notice');
function ipin_geo_payment_notice() { echo ipin_geo_payment_notice_html(); }
add_shortcode('geo_payment_notice', 'ipin_geo_payment_notice_shortcode');
function ipin_geo_payment_notice_shortcode() { return ipin_geo_payment_notice_html(); }

Shortcode

[geo_payment_notice]

SEO 与体验建议

默认内容应完整可读，地区化内容作为增强体验出现。这样搜索引擎可以抓取稳定内容，接口失败时用户也能继续使用页面。

常见错误

以下问题会影响文章准确性、代码可运行性和接口介绍可信度。

• 不要删除默认内容
• 不要把服务端调用当成访客 IP 判断
• 不要缓存最终个性化 HTML 给所有人
• 多个模块应使用唯一 ID 或 class
• 必须处理接口失败和网络超时

总结

该场景的重点是访客 IP 地区化。浏览器端调用接口能获得访客所在地区，并在默认内容基础上增强页面体验。

常见问题

下面的问答围绕本文场景单独整理，问题和答案都与当前文章直接相关。