更改单个产品页面woocommerce上的利润

Question

我一直在对单个产品页面进行一些自定义，一切都很好。 但是，标题，价格，变色，按钮等之间有很大的间距。在移动设备上，情况甚至更糟，您几乎需要滚动整个页面，然后才能将产品添加到购物车。 我需要有更少的空间，以便在价格和颜色变化之间以及颜色变化和添加到购物车按钮之间调整边距。

我使用了适用于开发人员的chrome工具检查了页面上的元素。 我选择了一些东西，我可以看到里面什么也没有。参见图片上的橙色框。我尝试了如下所示的代码来调整边距，可惜它们无法正常工作。

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

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

即使我使用chrome上的检查器工具检查了类或ID，我还是认为我可能使用了错误的类或ID。事实是，我不是魔术师，除非获得领先，否则我永远也不会解决。如果有人对我的代码有任何提示或调整，我将非常乐意尝试。

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 {
}