WordPress WooCommerce无法添加加入购物车按钮文本问题

针对你遇到的仅移动端可见、颜色模糊问题，直接给你修复方案：

• 修复仅移动端可见的问题
  大概率是桌面端的主题或WooCommerce默认样式隐藏了伪元素，给伪元素强制添加显示属性，提升样式优先级：

  /* 正常状态的加购按钮 */
  button.single_add_to_cart_button.button.alt.wooaddtocart-shopping-cart:before{
      content: "加入购物车";
      display: inline-block; /* 强制让文本显示 */
      color: #333; /* 换成你需要的清晰颜色 */
      font-weight: 600; /* 加粗增强清晰度 */
      text-shadow: none; /* 清除可能导致模糊的阴影 */
  }
  
  /* 未选变体的禁用状态按钮 */
  button.single_add_to_cart_button.button.alt.wooaddtocart-shopping-cart.disabled.wc-variation-selection-needed:before{
      content: "加入购物车";
      color: red;
      display: inline-block;
      font-weight: 600;
      text-shadow: none;
  }
  

• 解决颜色模糊问题

  • 移除可能存在的text-shadow属性，避免文字发虚
  • 给文字加font-weight（比如600/700），让线条更硬朗
  • 尽量用实色（如#333、red），别用半透明rgba值，减少模糊概率

• 极端情况的优先级兜底
  如果还是被其他样式覆盖，可临时加!important强制生效（尽量少用，优先优化选择器优先级）：

  button.single_add_to_cart_button.button.alt.wooaddtocart-shopping-cart:before{
      content: "加入购物车" !important;
      display: inline-block !important;
      color: #333 !important;
      font-weight: 600 !important;
  }
  

内容的提问来源于stack exchange，提问作者Min Su Wai