控制台可运行JS在WordPress页面失效，无法禁用加入购物车按钮

我来帮你搞定这个问题~ 你遇到的核心矛盾是代码执行时机不对，咱们一步步拆解原因，再给你靠谱的解决方案：

为什么之前的方法失效？ #

1. 直接在wp_head里执行代码：wp_head输出的脚本会在页面头部加载，这时候浏览器还没渲染<body>里的按钮元素，document.getElementsByClassName返回的集合是空的，list[0]就是undefined，自然没法设置disabled属性。
2. 给按钮加load事件：load事件只针对图片、脚本、样式表这类资源型元素，普通按钮元素不会触发这个事件，所以你的disable函数根本不会运行。

靠谱解决方案 #

方案1：等待DOM完全加载后执行（适合放wp_head）

给脚本套上DOMContentLoaded事件，确保浏览器渲染完所有DOM元素后再执行代码：

add_action( 'wp_head', function () { ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 用querySelector更简洁，还能避免集合操作的麻烦
    const addToCartBtn = document.querySelector('.single_add_to_cart_button.button.alt');
    // 加个判断，防止页面没有该按钮时控制台报错
    if (addToCartBtn) {
        addToCartBtn.disabled = true;
    }
});
</script>
<?php } );

方案2：把脚本放到页面底部（更直接）

用wp_footer钩子代替wp_head，这个钩子会在页面底部输出内容，此时所有DOM元素已经渲染完毕，不需要额外等待：

add_action( 'wp_footer', function () { ?>
<script>
const addToCartBtn = document.querySelector('.single_add_to_cart_button.button.alt');
if (addToCartBtn) {
    addToCartBtn.disabled = true;
}
</script>
<?php } );

方案3：用WordPress内置jQuery（如果主题加载了jQuery）

大部分WordPress主题会默认加载jQuery，用它的ready方法更省心：

add_action( 'wp_footer', function () { ?>
<script>
jQuery(document).ready(function($) {
    // jQuery会自动处理元素存在性，不用额外判断
    $('.single_add_to_cart_button.button.alt').prop('disabled', true);
});
</script>
<?php } );

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