CSS style Woocommerce Single Product page

问题:

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?

回答1:

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;
}

回答2:

you need dot "." operator to specify the CSS class selector & hash "#" for id selector, try this code.

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

Cheers