如何使用HTML CSS移除加入购物车按钮hover效果，使其固定显示

当前你的主题默认是将加入购物车按钮设置为默认隐藏，仅在hover商品卡片时触发显示的逻辑，按照以下操作即可实现按钮常驻显示：

• 进入网站后台的自定义CSS配置页，路径通常为「外观」-「自定义」-「额外CSS」，也可以直接编辑主题目录下的style.css文件
• 写入以下自定义样式代码覆盖原有规则：

/* 取消hover显示限制，让加入购物车按钮默认展示 */
.product-grid .product-item .add-to-cart {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

• 若样式未生效，右键点击页面上的加入购物车按钮，选择「检查」选项，在开发者工具中查看按钮对应的实际类名，替换上述代码中的.product-grid .product-item .add-to-cart选择器即可。
• 如果需要取消按钮的hover动效，可以在上述代码块中额外添加一行transition: none !important;。

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