More product page design

Hello

1/ As you can see in my product page, under the black header, there is a white row with arrows and links. Where can I customize it (Background color, text and arrows color, height) ?

2/ At the present time, the background shows on the top and I don’t like. How can I make the central column (white background with photos and text) stick the to top without any space ?

3/ I would like to insert a padding top before the product name (Le caramel du bocage). It is too close to the top at the present time. How can I do that ?

4/ The whole text block moves just a little bit when I scroll, like a parallax effect.
– How can I make it scroll completely as I get down in the page?
or
-How can I make it static ?

… 4/ … not usefull if I have an answer to 3/
🙂

Hello there,

1. There is no such custom options in Theme Settings. If you want provide us a screenshot or instruction how you want them to be look like and we will provide you with custom CSS code.

2. Use this code snippet

.single-breadcrumbs-wrapper {
    margin-bottom: 0;
}

3. No problem

.single-product-content .entry-title {
    padding-top: 30px;
}

Regards

Hi
The snippets you gave me are working fine, thanks.

1/ I would like the row :
– 25px height
– black background
– white arrows, white house picto, white textlink
– red active link.

5/ On the bottom of the page, there is a white row between background, central column and the footer. Can you tell me what this row is and how to remove it ?

1. Here is a custom code

.single-breadcrumbs-wrapper {
    padding-top:0;
    padding-bottom:0;
    background: black;
}
.single-breadcrumbs-wrapper .basel-back-btn,
.basel-products-nav .product-btn>a {
    line-height:25px;
}
.single-breadcrumbs-wrapper .basel-back-btn>span,
.single-breadcrumbs-wrapper .basel-back-btn>span:after,
.single-breadcrumbs-wrapper .basel-products-nav .product-btn>a span {
    background: white;
}
.single-breadcrumbs-wrapper .basel-back-btn>span:before,
.single-breadcrumbs-wrapper .basel-products-nav .product-btn>a span:before,
.single-breadcrumbs-wrapper .woocommerce-breadcrumb a{
    color:white;
}
.single-breadcrumbs-wrapper .woocommerce-breadcrumb {
    color:rgba(255,255,255,0.8);
}

5. Code snippet to hide white space on your product tabs

.single-product-content .product-tabs-wrapper {
    padding: 0;
}

Perfect ! Now I can custmize as I want.
I have only had to change the red color in “#dd3333” because RGBA color was not recognized.

Thanks a lot !

Great, you are welcome!

[Author]

Posts