CSS风格Woocommerce单产品页面

我正在使用Woocommerce插件进行网上商店。CSS风格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; 
    }

所有这一切都不起作用。任何人都知道如何降低相关产品？

来源

2016-04-25 TLR

PHP在这里使用很少。输出HTML是必需的 –

这就是我所得到的，你需要更多的东西？ – TLR

我想我很清楚。寻求代码帮助的问题必须包含在问题本身中重现**所需的最短代码**最好在[** Stack Snippet **]中（https://blog.stackoverflow.com/2014/09/introducing-runnable） -javascript-CSS-和HTML的代码段/）。请参阅[**如何创建一个最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –

你并不需要在内容单product.php模板添加<div class="related">。请像以前一样删除它。
为什么？因为类related已用于单产品> related.php模板：
<div class="related products"> html标签在其中。

你可以做什么是标签后添加一些空间withs这个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; 
}

来源

2016-04-26 06:38:25 LoicTheAztec

好的，这个工程。但我需要更改相关产品的填充顶部，而不是标签包装。 – TLR

我会这么做的。但我展示了这张照片的问题。 ;-) – TLR

但你需要什么HTML输出？ – TLR

你需要点“。”运算符为id选择器指定CSS类选择器&散列“＃”，请尝试此代码。

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

干杯

来源

2016-04-25 14:49:49

哦，对不起，当把代码复制到这个问题时，这个点就消失了。 – TLR

但这不起作用。 – TLR

你试过给！！重要的标签吗？并删除顶级属性，你不需要那个。 –

CSS风格Woocommerce单产品页面

回答

相关问题