如何修改WooCommerce中禁用状态下“加入购物车”按钮的颜色？

方案1：添加自定义CSS（最简便） #

直接在站点后台添加样式覆盖默认规则即可，操作步骤如下：

• 进入WordPress后台，依次点击「外观」→「自定义」→「额外CSS」
• 粘贴以下CSS代码：

/* 固定加入购物车按钮禁用状态样式 */
.single-product .single_add_to_cart_button:disabled,
.single-product .single_add_to_cart_button.disabled {
    background-color: #000000 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    cursor: pointer !important;
}
/* 可选：同步禁用状态的hover样式 */
.single-product .single_add_to_cart_button:disabled:hover,
.single-product .single_add_to_cart_button.disabled:hover {
    background-color: #222222 !important;
}

• 点击「发布」保存设置，清除站点缓存后即可生效。

方案2：主题样式文件修改（适合自定义主题用户） #

如果使用子主题避免样式被主题更新覆盖，可以将上述CSS代码直接添加到子主题的style.css文件末尾即可。

注意事项 #

• 如果代码不生效，可以通过浏览器右键点击加入购物车按钮选择「检查」，查看按钮实际的class属性，替换代码中的.single_add_to_cart_button为对应class即可。
• 修改后请同时清理浏览器缓存、站点缓存插件缓存、CDN缓存，确保新样式正常加载。

内容的提问来源于stack exchange，提问作者Marta Díaz