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;
}
所有这一切都不起作用。任何人都知道如何降低相关产品?
答
你并不需要在内容单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;
}
PHP在这里使用很少。输出HTML是必需的 –
这就是我所得到的,你需要更多的东西? – TLR
我想我很清楚。寻求代码帮助的问题必须包含在问题本身中重现**所需的最短代码**最好在[** Stack Snippet **]中(https://blog.*.com/2014/09/introducing-runnable) -javascript-CSS-和HTML的代码段/)。请参阅[**如何创建一个最小,完整和可验证的示例**](http://*.com/help/mcve) –