[Support request] Custom CSS WooCommerce Product Tabs

Home Forums Support Custom CSS WooCommerce Product Tabs

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1371774
    David

    Hello!

    I’m looking to customize the Individual Product Tabs.

    I think it is something important and it should be implemented in the design tabs > woocommerce.

    – Change padding and margin between blocks
    – Change background and tab colors

    Is this possible to do?

    I have marked the margins in red (they should be wider). And in blue, the areas that I want to change color

    Thank you

    IMAGE: https://ibb.co/0DCvjjf

    #1371856
    David
    Staff
    Customer Support

    Hi there,

    Tabs – the text colors can be changed in Customizer > Colors > Woocommerce. Make sure you have the Woocommerce module enabled.

    To adjust the tab padding and background colors you can use this CSS:

    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        padding: 0.5em 2.5em;
        background-color: red;
    }
    
    .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
        background-color: green;
    }

    The margin between tab content titles and text are inherited from Customizer > Typography > Body / Headings

    If you want to adjust them separately you can do this to add margin below a H2:

    .woocommerce-tabs h2 {
        margin-bottom: 2em;
    }

    And this CSS will add top margin to a H2 that comes after a paragraph:

    .woocommerce-tabs p + h2  {
        margin-top: 2em;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.