更改单个产品页面 woocommerce 上的边距

Question

我一直在定制一点单品页面，一切都很好。 但是，标题、价格、变体颜色、按钮等之间有很大的空间。在移动设备上更糟糕的是，您几乎需要滚动整个页面才能将产品添加到购物车。 我需要更少的空间，从而调整价格和颜色变化之间以及颜色变化和添加到购物车按钮之间的边距。

我使用面向开发人员的 chrome 工具检查了页面上的元素。 我选择了一些东西，我可以看到里面没有任何东西。请参阅图片上的橙色框。我尝试了下面显示的代码来调整边距，遗憾的是它们不起作用。

.form.variations_form.cart {
margin-top: -5% !important;
}

.woocommerce-variation single_variation {
margin-bottom: -9px;
}

我认为我可能有错误的类或 ID，即使我使用 chrome 上的检查器工具检查了它。事实是我不是魔术编码员，除非我得到领导，否则我永远不会解决这个问题。如果有人对我的代码有任何提示或调整，我很乐意尝试。

Answer 1

有几件事，你在这些元素上有边距：

//margin top of the cart section
.woocommerce div.product form.cart, .woocommerce div.product p.cart {
  margin-top: 2.45em;
}

//margin bottom under variations table
.woocommerce div.product form.cart .variations {
  margin-bottom: 1em;
}

//hidden description section, causes a tiny gap above quantity box
.single_variation {
  margin-right: 1em;
}

你在这个元素上有 padding-top 内联：

<div id="wc-stripe-payment-request-wrapper" style="clear:both;padding-top:1.5em;">
  <div id="wc-stripe-payment-request-button" style="display: none;">
    <!-- A Stripe Element will be inserted here. -->
  </div>
</div>

去掉边距和内边距就可以了

更新：

如果 div 来自插件，您可以尝试通过以下方式覆盖它：

#wc-stripe-payment-request-wrapper {
  padding-top: 0!important;
}

对于描述部分，你也有一些边距：

.woocommerce div.product div.summary {
  margin-bottom: 2em;
}

.woocommerce div.product form.cart {
  margin-bottom: 2em;
}

当在移动设备上时，你有这个边距底部：

@media screen and (max-width: 768px) {
  .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.images, .woocommerce div.product div.summary {
    float: none;
    width: 100%;
    margin-bottom: 1em;
  }
}

你有这个没有内容的类，但也占用了一些空间，不是那么重要，但如果你不需要它，可以尝试删除它：

.product-share-wrap {
}