Move product tabs to right of product image + change background color on top

Hello,

Been searching around, and the css I found didn’t work on my site.

I need help with 3 issues:

  1. Change background color on the Header Call Out (the header image). Also, make it smaller.
  2. Would like to remove the tab “description”
  3. Move up the description to the right side of product image, just below the short description…

Appreciate the help!

Best

Hi there
Hope you are having a good day and thank you for your question :slight_smile:

  1. In order to check your question i need to see your live website, please provide url and i will take a look
    2.3. unfortunately moving of description tab is not possible only with css and modification of the theme is necessary to achieve this goal :frowning:

Hello,

Best

Would it be possible to hide the Description tab and the content all together? Then i can write the description in the Product Short Description

Hello there,

I hope you are doing well today.

You can use the following CSS code to make the changes by going to Appearance > Customize > Additional CSS and pasting it there.


/*Header color*/
.bg-secondary {
    background: red;
}

/*Header height*/
.page-title-section {
    height: 177px;
}

/*Remove tab*/
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: none;
}

Best Regards,
Support

Also, would it be possible to change the font color on the description text?

Best

Hello there,

You can use this CSS code to change the font color:


/*Description font color*/
.woocommerce div.product .woocommerce-tabs .panel {
    color: black;
}

Best Regards,
Support

Thanks! Also for the short description color? Thanks for the header!

Hello there,

This should help:


/*Short description font color*/
.woocommerce-product-details__short-description {
    color: red;
}

Best Regards,
Support

Thanks! One more thing. The buttons in the view-cart is like overlapping. Can they be centered, aligned to middle?

Hello there,

We would not be able to center the buttons but we can increase their size:


.woocommerce-cart-tab-container .widget_shopping_cart .buttons .button {
    width: 100%;
    margin-bottom: 10px !important;
}

Best Regards,
Support

Nice! Thanks!

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support