Question

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

我现在正在做的是为我的网站设计单个产品页面。我已经改变了钩子的顺序。所以“相关产品”现在位于标签屏幕之上。但它太高了。我尝试用它周围的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

你需要点“。”运算符指定CSS类选择器＆amp;对于id选择器，使用hash“＃”，尝试此代码。

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

干杯

Answer 2

您不需要在 content-single-product.php 模板中添加<div class="related">。请像以前一样将其删除为什么？因为类related已经用于单品＆gt; 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;
}

CSS样式Woocommerce单一产品页面

2 个答案: