php - CSS 风格的 Woocommerce 单品页面

Question

我正在使用插件 Woocommerce 创建一个网上商店。

我现在正在为我的网站设计单个产品页面的样式。我已经改变了钩子(Hook)的顺序。所以“相关产品”现在位于选项卡屏幕上方。但它太高了。我试图用它周围的 div 来改变它。但这不起作用。

我的问题的照片:

http://i.stack.imgur.com/EhVO0.jpg

代码:

<div class="related">
<?php
    /**
    * woocommerce_after_single_product_summary hook.
    *
    * @hooked woocommerce_output_product_data_tabs - 10
    * @hooked woocommerce_upsell_display - 15
    * @hooked woocommerce_output_related_products - 20
    */
    do_action( 'woocommerce_after_single_product_summary' );
?>
</div>
<meta itemprop="url" content="<?php the_permalink(); ?>" />

我已经尝试过 CSS:

.related {
   top: 40px;
   margin-top: 40px;
   padding-top: 40px;
  }

这一切都行不通。谁知道如何降低相关产品的价格？

Answer 1

您不需要添加 <div class="related">在 content-single-product.php 模板中。请像以前一样将其删除。
为什么？因为上课 related已在 single-product > related.php 模板中使用:
<div class="related products"> html 标签。

您可以使用以下 CSS 规则在制表符后添加一些空格:

div.woocommerce-tabs.wc-tabs-wrapper {
    padding-bottom:40px;
}

当您想在 wooCommerce 页面上重叠现有定义的 CSS 规则时，有时您需要在 CSS 值属性的末尾添加 !important .最好的办法是不先测试 CSS 规则，如果需要，可以这样测试:

div.woocommerce-tabs.wc-tabs-wrapper {
    padding-bottom:40px !important;
}

----(编辑)----

这是您上次询问的 CSS 规则(也可以先不使用 !important):

.woocommerce .products.related ul.products {
    padding-top:40px !important;
}

你也可以试试:

.woocommerce .products.related ul.products {
    margin-top:40px !important;
}