TLR TLR - 6 months ago 100
PHP Question

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:

The code:

<div class="related">
* 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' );
<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 {

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;