Weglot Translation 无法翻译 checkout payment 区域

结论

WooCommerce 的 checkout payment 区域会在结账页加载后通过 AJAX 多次刷新。如果 Weglot 只扫描服务器首次返回的 HTML，后续生成或替换的支付方式名称、说明和提示文本就可能没有被翻译。

建议先将支付区域的 CSS 选择器加入 Weglot 的“动态内容翻译”配置：

#payment

如果需要缩小匹配范围，可以使用：

.woocommerce-checkout-payment
.payment_methods
.payment_box

保存配置后，清除 WordPress、Weglot、CDN 和浏览器缓存，再重新打开结账页测试。如果未翻译的内容位于第三方支付服务的跨域 iframe 中，Weglot 无法直接处理，只能使用支付网关提供的语言设置。

原因

WooCommerce 会监听结账页中的地址、配送方式、优惠券和订单金额等变化，然后通过 update_order_review 请求刷新订单信息和支付区域。刷新时，原有的支付节点可能会被整段替换。

常见情况包括：

• 页面其他区域已经由 Weglot 翻译；
• 支付区域在 Weglot 首次扫描后才由 AJAX 插入；
• 用户切换配送方式后，WooCommerce 再次替换支付区域；
• 支付网关通过 JavaScript 或 iframe 输出内容；
• 支付方式的标题或说明来自 WooCommerce 后台配置，而非主题语言包。

这类问题通常与 WooCommerce 翻译文件无关，主要取决于内容何时生成，以及内容来自哪里。

解决步骤

1. 将支付区域标记为动态内容

进入 Weglot 的 WordPress 插件设置或项目设置，找到“动态内容”“Dynamic content”或“动态元素选择器”等选项。不同版本的界面名称可能稍有差异。

先添加：

#payment

如果仍有部分内容无法识别，再分别添加：

.woocommerce-checkout-payment
.payment_methods
.payment_box

不要一开始就使用范围过大的选择器，例如：

body
.woocommerce

范围过大可能导致重复扫描，拖慢结账页。

2. 触发支付区域的所有状态

打开目标语言的结账页，依次执行可能触发支付方式刷新的操作：

• 修改国家、省份或邮政编码；
• 切换配送方式；
• 使用或移除优惠券；
• 切换不同的支付方式；
• 等待订单摘要刷新完成。

有些文本只有在对应的支付方式展开后才会出现在页面中。先触发这些状态，Weglot 才有机会收集相关字符串。

完成后进入 Weglot 的翻译列表，搜索支付方式的标题或说明原文，确认这些字符串是否已经被检测到。

3. 检查支付方式后台配置

在 WooCommerce 的支付设置中检查支付方式的标题和说明。这类文本通常由商店管理员填写并保存在数据库中，例如：

Direct bank transfer
Pay securely using your credit card

它们不一定来自 WooCommerce 的 .po 或 .mo 语言文件，所以仅安装 WordPress 语言包可能不起作用。Weglot 检测到字符串后，可以在翻译列表中补充或修正翻译。

4. 清除各层缓存

修改配置后，需要清除：

• WordPress 缓存插件缓存；
• 主机或反向代理缓存；
• CDN 缓存；
• 浏览器缓存；
• Weglot 的翻译或 URL 缓存，如果当前套餐和界面提供相关操作。

还要确认缓存系统没有缓存结账页。WooCommerce 的购物车、结账和“我的账户”等动态页面通常不适合使用整页缓存。

必要时增加稳定的 HTML 容器

如果主题或结账插件修改了 WooCommerce 的默认结构，页面中可能没有稳定的 #payment 节点。此时可以通过 WooCommerce 钩子在支付区域外增加一个容器，再将这个容器设为 Weglot 的动态选择器。

add_action('woocommerce_review_order_before_payment', function () {
    echo '<div id="weglot-checkout-payment">';
}, 5);

add_action('woocommerce_review_order_after_payment', function () {
    echo '</div>';
}, 100);

然后在 Weglot 中添加：

#weglot-checkout-payment

这段代码应放在子主题的 functions.php 中，或通过自定义代码插件加载。上线前要在测试环境中确认生成的 HTML 标签正确闭合，因为部分主题或结账编辑器可能会改变 WooCommerce 钩子的执行位置。

如果默认结账模板中已有稳定的 #payment 节点，就不需要添加这段代码。

判断内容是否位于 iframe

使用浏览器开发者工具检查未翻译的文本。如果文本位于类似下面的结构中：

<iframe src="https://payment-provider.example/..."></iframe>

并且 src 指向另一个域名，说明内容由支付服务商控制。由于浏览器同源策略的限制，Weglot 无法读取或修改跨域 iframe 内的文字。

这种情况需要：

• 在支付网关插件中设置语言或 locale；
• 确认网关能否根据 WordPress、WooCommerce 或当前页面语言自动切换语言；
• 按照支付服务商的文档向其 SDK 传入语言参数；
• 联系支付网关插件开发者，确认支持的多语言兼容方式。

不要尝试使用 JavaScript 强行访问跨域 iframe，浏览器会阻止这种操作。

进一步排查

如果添加动态选择器后仍然无效，可以暂时切换到 WooCommerce 默认主题，并停用结账增强类插件进行对比。排查时重点检查：

• 浏览器控制台中是否有 JavaScript 错误；
• AJAX 请求是否成功返回；
• 支付区域刷新后，页面语言是否被切回默认语言；
• Weglot 是否排除了结账页或支付节点；
• Cookie 同意、性能优化或脚本延迟插件是否阻止 Weglot 执行；
• 未翻译的内容是普通 DOM 文本、图片中的文字，还是跨域 iframe 内容。

建议先为 #payment 配置动态翻译。只有在页面结构中确实找不到这个节点时，才需要增加自定义容器。如果内容来自跨域支付组件，则需要通过支付网关的本地化设置解决。

备注：内容仅供参考。