Change the placement of Product Tabs

  • Hi everyone,
    Using the StoreFront theme with WooCommerce,
    It was suggested to me to make a change to my product pages by moving the Product tabs “Description, Additional Information, Reviews (#)” from the left side of the Product description to above it horizontally. Therefore making the Product description a little wider and easier to read whats written here.

    I am hoping someone here could help me make that change.

    Now I am not that great with CSS but do understand how to find a functions.php file to edit it.

    Thanks a ton in advance.

Viewing 1 replies (of 1 total)

  • Add the following custom css to your child theme or customizer section:

    .woocommerce-tabs ul.tabs li {
    display: inline-block;
    margin: 0;
    padding: 0px 1em;
}
.woocommerce-tabs ul.tabs li.active:after {
    display: none;
}
@media screen and (min-width: 768px) {
    .woocommerce-tabs ul.tabs {
        width: 100%;
        float: none;
        margin-right: 0;
    }   
    .woocommerce-tabs .panel {
        width: 100%;
        float: none;
    } 
}
Viewing 1 replies (of 1 total)
  • The topic ‘Change the placement of Product Tabs’ is closed to new replies.