Problem whit Tab in WooCommerce

  • Resolved Hector

    (@hecktoras)


    4 years ago

    Hi,

    Problem whit tabs for WooCommerce.
    The content of each Tab is cut in mobile devices, I have applied some changes with CSS but it doesn’t take it even with !important.

    I ask this question because I have tried the plugin with another theme and I have not had problems

    The style, if I’m not mistaken, is controlled by the “TabWoo – Extra Tabs Plugin for WooCommerce” plugin. I’ve already contacted them, but while waiting for the answer I decided to ask around to see if they could help me.

    The code I used is:

    /* Estilos de Tabs Movil */
.woocommerce div.product .tw-main-outer-wrapper.tw-tab-template-template10 .woocommerce-tabs .panel.wc-tab {
    background-color: #eff0f2;
}
.woocommerce div.product .tw-main-outer-wrapper .woocommerce-tabs .panel.wc-tab {
    padding: 20px !important;
}

@media screen and (max-width: 768px)
.woocommerce div.product .tw-accordion_enabled .woocommerce-tabs .panel {
    margin-bottom: 0;
}
media="(max-width: 768px)"
.woocommerce div.product .woocommerce-tabs .panel {
    margin-top: 0 !important;
}

media="(max-width: 768px)"
.woocommerce div.product .woocommerce-tabs .panel, .woocommerce div.product .woocommerce-tabs ul.tabs {
    float: none;
    width: 90px !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
    margin: 0 0 2em;
    padding: 0;
}

    I will continue to look for the solution to this problem. If I find it, I will share it.

    • This topic was modified 4 years ago by Hector.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • David

    (@diggeddy)

    Hi there,

    this occurs because you’re adding padding to an element that has set width, which increases its overall size.

    Try including box-sizing: border-box; in your CSS eg.

    .woocommerce div.product .woocommerce-tabs .panel.wc-tab {
    box-sizing: border-box;
}
    Thread Starter Hector

    (@hecktoras)

    Hi,

    I have included box-sizing: border-box; in the CSS and the problem has been solved.

    Thank you very much David.

    David

    (@diggeddy)

    You’re welcome

    Thread Starter Hector

    (@hecktoras)

    Hi,

    I come back with another little problem.

    I hid the WooCoomerce tabs with the following code:

    // Remove all tabs from WooCommerce
add_filter( 'woocommerce_product_tabs', 'ayudawp_woo_remove_product_tabs', 98 );

function ayudawp_woo_remove_product_tabs( $tabs ) {

    unset( $tabs['reviews'] ); 			// quita la pesta?a valoraciones
    unset( $tabs['additional_information'] );  	// quita la pesta?a información adicional

    return $tabs;

}

    To be able to add new tabs easily I installed a plugin called TabWoo – Extra Tabs Plugin for WooCommerce

    Now the tabs I hid are shown but without the information

    Conclusion: I would like those tabs (reviews and additional information) not to be seen.

    Web Site with problem: https://highmove.kreathors.com/producto/remera-algodon/

    Leo

    (@leohsiang)

    I would recommend checking with the plugin’s support team and ask them how to best handle this.

    The theme itself has no control over this.

    Hope this helps ??

    Thread Starter Hector

    (@hecktoras)

    I’ll see what I can do, I already sent a message to the add-on support but still no response.

    I will try to find a solution on my own.

    Thank you! ??

    Leo

    (@leohsiang)

    No problem ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Problem whit Tab in WooCommerce’ is closed to new replies.