WooCommerce Storefront主题分类搜索页加入购物车按钮样式异常如何修复

适用场景 #

解决首页加购按钮样式正常，店铺页、商品分类页、搜索结果页等归档页面加购按钮仅显示为文字链接的样式不一致问题。

操作步骤 #

• 进入WordPress后台，依次点击外观→自定义→额外CSS
• 将以下CSS代码粘贴到输入框中，保存发布即可生效：

/* 适配所有WooCommerce归档页、搜索结果页的加购按钮 */
.woocommerce.archive .add_to_cart_button,
.woocommerce.search-results .add_to_cart_button,
.woocommerce.tax-product_cat .add_to_cart_button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #2d2d2d; /* 可替换为你首页按钮的背景色 */
  color: #ffffff; /* 可替换为你首页按钮的文字颜色 */
  border-radius: 4px; /* 可替换为你首页按钮的圆角数值 */
  text-decoration: none;
  transition: background-color 0.3s ease;
}
/* 按钮hover效果，和首页保持一致即可 */
.woocommerce.archive .add_to_cart_button:hover,
.woocommerce.search-results .add_to_cart_button:hover,
.woocommerce.tax-product_cat .add_to_cart_button:hover {
  background-color: #444444; /* 可替换为你首页按钮的hover背景色 */
  color: #ffffff;
}
/* 移除默认的前置购物篮图标，不需要移除可以删掉这段 */
.woocommerce.archive .add_to_cart_button::before,
.woocommerce.search-results .add_to_cart_button::before,
.woocommerce.tax-product_cat .add_to_cart_button::before {
  display: none;
}

注意事项 #

• 代码里的颜色、圆角、内边距数值可以根据你首页正常按钮的实际样式调整，右键首页按钮选择「检查」即可查看对应样式参数
• 如果使用子主题，也可以将上述代码直接添加到子主题的style.css文件末尾，优先级更高
• 若修改后样式未生效，可在属性值末尾加!important强制生效，例如background-color: #2d2d2d !important;

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