WooCommerce短代码问题：如何在价格与加入购物车按钮间加间距

你可以通过短代码的style参数直接添加内联样式解决间距问题，同时还能顺手去掉按钮默认边框，给你两种简单可行的方案：

• 给价格加右边距：直接在style里针对价格元素设置间距，数值可以根据你的视觉需求调整

  [add_to_cart id="xx" style=".woocommerce-Price-amount { margin-right: 15px; }" show_price="true" quantity="1"]
  

• 给按钮加左边距+移除默认边框：如果更倾向于调整按钮的位置，还能把去边框的样式一并写进去，不用单独留空style=""

  [add_to_cart id="xx" style=".single_add_to_cart_button { margin-left: 15px; border: none; }" show_price="true" quantity="1"]
  

要是内联样式不生效，就去WordPress后台「外观-自定义-额外CSS」里添加这段全局样式，所有使用该短代码的地方都会自动应用：

.woocommerce-add-to-cart .woocommerce-Price-amount {
    margin-right: 15px;
}
.woocommerce-add-to-cart .single_add_to_cart_button {
    border: none;
}

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