Removing the top spacing on the product page

[Jesper Billeskov]

Hi Swift,

Is it possible to remove the top spacing on the product page? I want the product pictures to be on the same “level” as the product search button/field on my webshop. I have attached two pictures that I think will help you understand what I mean. The first picture is what it looks like now, and the second is what I want it to look like. I have added a red line to show that the product pictures are on the same “level” as the product search button/field.

Don’t know if you need it, but this is what I have got in the custom css so far:

.woocommerce-count-wrap, .woocommerce-count-wrap {
display: none!important;
}

.page-content {
margin-top: -50px!important;
}

I’m looking forward to your reply.

Cheers
Jesper

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-
.woocommerce .products ul, .woocommerce ul.products, .woocommerce-page .products ul, .woocommerce-page ul.products{padding-top:0px !important}
Thanks 🙂
With Best Regards
Mohammad

[Jesper Billeskov]

Hi Mohammad,

Thanks for your quick response!

As you can see here it looks just the way I wanted: http://skateshop.se/produkt-kategori/kompletta/

However, when you click on one of the brands in the “Sort by brand” function (which is “Filtrera på varumärken” in Swedish) it looks like the custom css has taken a bite of the product pictures. How do I avoid this? I have attached a screenshot.

In case you need it, this is what I have currently got in the custom css field:

.page-content {
margin-top: -50px!important;
}

.woocommerce .products ul, .woocommerce ul.products, .woocommerce-page .products ul, .woocommerce-page ul.products{padding-top:0px !important}

I’m looking forward to your reply.

Cheers
Jesper

Attachments:

You must be logged in to view attached files.

[laranz – SUPPORT]

Hi,

Edit the style that you placed in your child theme to,

.page-content {
margin-top: -42px !important;
}

Let us know,

Thanks,
laranz.

[Jesper Billeskov]

Thanks!

Yeah I know that changing it to -42px in stead of -50px would make it look good when you’re using the “Sort by brand” (“Filtrera på varumärken”). However, if I change it to -42px it will not look the way I wanted it to according to my first question, that Mohammad replied to.

I hope you know what I mean. I put it at -50px because that would look good when you’re browsing the product categories (for example the category “Kompletta”). If I change it to -42px it will not look good and not the way I wanted according to my first question.

Best regards
Jesper

[laranz – SUPPORT]

Hi,

Remove that page-content Custom CSS and try this.

.woocommerce-count-wrap, .woocommerce-ordering { display: none; }
.inner-page-wrap { margin-top: 0; }
.archive .tax-product_cat .push-right { margin-top: 52px; }

Let us know,

Thanks,
laranz.

[Jesper Billeskov]

It worked!

Thanks a lot 🙂

[laranz – SUPPORT]

Hi,

Glad it works 🙂

Let us know, if you have any other questions.

Thanks,
laranz.