WooCommerce添加购物车按钮hover背景颜色修改CSS求助

可以通过自定义CSS代码修改添加购物车按钮的hover背景色，以下是适配不同场景的方案：

通用适配代码 #

适用于大多数WooCommerce主题的基础样式，替换颜色值即可使用：

/* 覆盖添加购物车按钮的hover背景色 */
.woocommerce button.button.add_to_cart_button:hover,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce input.button.add_to_cart_button:hover {
    background-color: #ff5722 !important; /* 替换为你需要的颜色代码，比如#2196f3 */
    border-color: #ff5722 !important; /* 可选：同步修改按钮边框颜色，保持视觉统一 */
    color: #ffffff !important; /* 可选：调整文字颜色，确保与背景色对比度足够 */
}

针对特定主题的自定义方案 #

如果通用代码不生效，可能是主题自带样式优先级更高。你可以按下F12打开浏览器开发者工具，定位按钮的专属类名（比如部分主题会添加product_type_simple类），示例代码如下：

/* 示例：针对特定主题类名的hover样式 */
.button.product_type_simple.add_to_cart_button:hover {
    background-color: #4caf50;
}

使用说明 #

1. 将代码复制到WordPress后台「外观 → 自定义 → 额外CSS」面板中
2. 替换代码中的颜色值为你需要的十六进制、RGB或颜色名称
3. 保存后刷新页面即可生效

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