WooCommerce结账页Stripe支付表单标签使用Weglot无法翻译如何解决？

Stripe支付字段默认通过跨域iframe嵌入WooCommerce结账页，Weglot的前端翻译规则和普通jQuery DOM操作都无法直接访问iframe内的元素，这是翻译失效的核心原因。

方案1：配置Weglot动态翻译规则 #

• 进入站点后台Weglot插件设置页，找到「翻译规则」下的「动态内容翻译」模块
• 按需要翻译的字段对逐一添加规则：
  • 原文：Carte bancaire → 译文：信用卡
  • 原文：Giropay → 译文：Giropay（可按需本地化调整）
  • 原文：Numéro de carte → 译文：卡号
  • 原文：Expire le → 译文：有效期至
• 保存规则后清空站点缓存、浏览器缓存后测试。

方案2：通过代码钩子直接修改字段标签（稳定性更高） #

将以下代码添加到当前激活主题的functions.php文件，或通过Code Snippets插件插入：

add_filter( 'wc_stripe_payment_fields_args', 'custom_translate_stripe_fields', 10, 1 );
function custom_translate_stripe_fields( $args ) {
    // 检测当前语言为中文时替换字段内容
    if ( function_exists('weglot_get_current_language') && weglot_get_current_language() === 'zh' ) {
        $args['card']['label'] = '信用卡';
        $args['card']['placeholders']['number'] = '卡号';
        $args['card']['placeholders']['expiry'] = '有效期至';
        // Giropay字段翻译
        if ( isset( $args['giropay'] ) ) {
            $args['giropay']['label'] = 'Giropay';
        }
    }
    return $args;
}

• 代码在Stripe字段渲染前直接修改输出内容，不受跨域iframe限制，修改后清空缓存即可生效。

注意事项 #

• 若使用新版Stripe Elements支付界面，可在Weglot设置中添加Stripe容器的CSS选择器到「忽略翻译」列表，避免规则冲突。
• 每次调整规则或代码后，需清空WooCommerce缓存、CDN缓存和浏览器缓存再测试，避免旧内容干扰。

内容的提问来源于stack exchange，提问作者kantsverma