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'

Solution 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.relatedul.products {
    padding-top:40px!important;
}

you can try too:

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

Solution 2:

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

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

Cheers