CSS 样式 Woocommerce 单个产品页面 [英] CSS style Woocommerce Single Product page

问题描述

我正在使用插件 Woocommerce 制作网店.

我现在正在为我的网站设计单一产品页面的样式.我已经改变了钩子的顺序.所以相关产品"现在位于标签屏幕上方.但是实在是太高了.我试图用它周围的 div 来改变它.但这不起作用.

我的问题照片:

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

代码:

<?php/*** woocommerce_after_single_product_summary 钩子.** @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');?>
<meta itemprop="url" content="<?php the_permalink(); ?>"/>

CSS 我已经尝试过:

.related {顶部:40px；边距顶部:40px；填充顶部:40px；}

所有这些都不起作用.有人知道如何降低相关产品的价格吗?

解决方案

content-single-product 不需要添加<div class="related">.php 模板.请像以前一样删除它.
为什么?因为 related 类已经在 single-product > related.php 模板中使用了:
<div class="related products"> html 标签.

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

div.woocommerce-tabs.wc-tabs-wrapper {填充底部: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 {边距顶部:40px！重要；}

I'm making a webshop with the plugin Woocommerce.

What I'm doing now is styling the single product page for my site. I already changed the order of the hooks. So "related products" is now above the tab screens. But it's way too high. I tried to change it with a div around it. But that doesn't work.

Photo of my problem:

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

The code:

<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 i already tried:

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

All of this doesn't work. Anyone knows how to get related products lower?

解决方案

You don't need to add <div class="related"> in content-single-product.php template. Please remove it as before.
Why? Because the class related is already used in single-product > related.php template with:
<div class="related products"> html tag in it.

What you can do is to add some space after tabs withs this CSS rule:

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

When you want to overlap an existing defined CSS rule on wooCommerce pages, sometimes you need to add at the end of a CSS value attribute !important. The best thing is to test a CSS rule without first and if needed with it as this:

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

---- (Edit) ----

Here is the CSS rule you asked last (try also without !important first):

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

you can try too:

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

这篇关于CSS 样式 Woocommerce 单个产品页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！