Woolentor产品加入购物车按钮出现异常边框问题求助

• 先排查浏览器默认焦点样式
  这是最常见的原因——浏览器会给获取焦点的元素添加默认outline边框（属于无障碍设计）。如果要去掉或替换，直接加自定义CSS：

  .wl-product-add-to-cart-button:focus {
    outline: none !important;
    /* 要是需要自定义焦点样式，替换成这个： */
    /* box-shadow: 0 0 0 2px #你的目标颜色; */
  }
  

• 检查插件/主题的CSS冲突
  WL Product或者当前主题可能给按钮硬加了多余的border样式。按F12打开浏览器开发者工具，选中按钮元素，在「Styles」面板里找border相关属性，定位到来源的CSS规则，然后用自定义CSS覆盖：

  .wl-product-add-to-cart-button {
    border: none !important;
    /* 要是只是边框颜色/宽度问题，单独调整对应属性： */
    /* border-color: transparent !important; */
  }
  

• 自定义CSS的添加位置
  两种方式：一是在Elementor编辑器里选中产品模块，到「高级」选项卡的「自定义CSS」里粘贴代码；二是到WordPress后台「外观」→「自定义」→「额外CSS」里全局添加。

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