DevKinsta本地WordPress站点WooCommerce结账页异常问题咨询

使用DevKinsta创建WordPress站点的本地副本。

当前本地站点副本除结账页外其余功能均运行正常：可正常将商品加入购物车，但结账页仅显示“输入账单详情”标题，无任何支付选项或输入字段。
在浏览器中右键选择「检查」->「控制台」时，出现以下报错：

• 结账URL返回GET 500错误
• Uncaught TypeError: Cannot read properties of undefined (reading 'setDefaults')

Uncaught TypeError: Cannot read properties of undefined (reading 'setDefaults')
    at HTMLDocument.<anonymous> (ajax.js:2:22)
    at i (jquery.js:2:27362)
    at Object.fireWith [as resolveWith] (jquery.js:2:28121)
    at Function.ready (jquery.js:2:29914)
    at HTMLDocument.J (jquery.js:2:30276)

• Uncaught TypeError: Cannot read properties of undefined (reading 'addMethod')

Uncaught TypeError: Cannot read properties of undefined (reading 'addMethod')
    at HTMLDocument.<anonymous> (custom.js:176:22)
    at fire (jquery.js:3187:31)
    at Object.fireWith [as resolveWith] (jquery.js:3317:7)
    at Function.ready (jquery.js:3536:13)
    at HTMLDocument.completed (jquery.js:3552:9)

WooCommerce官方排查指引提到，主题与插件是引发WooCommerce JavaScript错误的常见原因，但生产环境使用完全相同的插件与主题时运行正常、无同类报错，因此判定问题出在本地副本的配置环节。

• 检查SSL/HTTPS配置：DevKinsta自带的SSL/HTTPS选项可在浏览器中正常注册生效。
• 替换数据库与WordPress文件中的全部URL引用。

macOS系统，Chrome/Safari浏览器

经排查确认问题与自定义主题相关：切换为WordPress默认主题后，支付输入字段可正常显示。另发现DevKinsta的最低支持PHP版本为7.2，而生产环境运行的PHP版本为7.0，现咨询自定义主题中需重点排查问题的具体位置。

按优先级从高到低排查以下位置：

1. 主题覆写的WooCommerce结账模板
   定位主题目录下woocommerce/checkout/文件夹，这是主题自定义覆盖的结账页模板，重点检查两项：
   • 脚本加载逻辑：确认模板正确通过wp_enqueue_script挂载WooCommerce结账依赖的wc-checkout、jquery-validate脚本，不存在硬编码输出脚本、错误调整脚本加载优先级的写法。你遇到的setDefaults、addMethod都是jQuery validate库的内置方法，报错的直接原因是自定义的ajax.js、custom.js执行时，jQuery validate库还未完成加载。
   • PHP语法兼容性：逐行检查模板文件是否存在PHP7.2废弃/移除的语法，包括create_function用法、未做键存在判断就直接读取数组值、用each()函数遍历数组、parse_str不传第二个参数等写法，这类语法会直接触发PHP致命错误，刚好对应结账接口返回500的现象——接口500会导致前端拿不到WooCommerce输出的全局配置变量，连锁触发后续JS报错。
2. 主题功能文件
   检查主题functions.php以及inc/目录下的自定义功能文件：
   • 搜索所有和WooCommerce结账、支付网关相关的挂载钩子，排查上述PHP7.2不兼容语法。
   • 搜索是否存在wp_dequeue_script、wp_deregister_script相关代码，确认没有误移除WooCommerce默认加载的jQuery validate、wc-checkout核心脚本，没有错误修改脚本依赖关系。
3. 主题自定义JS文件
   直接定位到custom.js第176行、ajax.js第2行，查看$.validator.setDefaults、$.validator.addMethod调用前是否加了存在性判断。注意这部分报错大概率是PHP端500错误引发的连锁反应，优先修复PHP报错后再验证JS问题。

快速定位技巧 #

不需要逐行盲查，先开启WordPress调试模式直接定位错误位置：
在站点根目录的wp-config.php文件中加入以下配置：

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

访问一次触发500的结账接口，之后打开wp-content/debug.log文件，就能看到具体的PHP致命错误信息、报错文件路径和行号，直接对应修复即可。
临时验证模板问题可以把主题目录下的woocommerce文件夹重命名，如果重命名后结账页恢复正常，就100%是主题覆写的WooCommerce模板兼容问题，对照当前版本WooCommerce的官方模板文件更新对应覆写模板即可。

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