[Resolved] Cambiar estilo de pestañas de WooCommerce

Home Forums Support [Resolved] Cambiar estilo de pestañas de WooCommerce

Home Forums Support Cambiar estilo de pestañas de WooCommerce

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1314791
    Pedro

    Hola! Me gustaría cambiar el estilo de las pestañas de WooCommerce (Por defecto vienen horizontal en GP)

    Me gustaría que el estilo de las pestaña fuera vertical, como lo indica este artículo: https://matttanguay.com/best-practices/74-avoid-horizontal-tabs/

    #1314798
    Leo
    Staff
    Customer Support

    Hi there,

    You can give this CSS a shot change the tabs to a column:

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-direction: column;
    }

    Adding arrows/accordion style requires some custom development which is outside the scope of this forum unfortunately.

    #1315739
    Pedro

    Hola Leo! Gracias por responder.

    Y tú podrías ayudarme con esa personalización? Yo lo pagaré no hay problema.

    #1315813
    Leo
    Staff
    Customer Support

    Unfortunately we don’t offer custom development here.

    You can try a service like https://codeable.io/

    #1319911
    Pedro

    Hola Leo! Gracias por el código.

    Mientras consigo a un desarrollador que me ayude con esta personalización. ¿Podrías ayudarme con algo?

    Sucede que solo la pestaña “Descripción” tiene bordes en todos los lados.

    Las demás pestañas no tienen borde al lado izquierdo, y la última no tiene en la parte inferior.

    ¿Podrías ayudarme a colocar el borde a todas las pestañas?

    ¡Muchas gracias!

    #1320022
    Leo
    Staff
    Customer Support

    Looks normal to me?
    https://www.screencast.com/t/TgKqkMMTv

    They have shared borders.

    #1320652
    Pedro

    Hola Leo! Tienes la versión cacheada, por favor refresca el sitio.

    #1321023
    Leo
    Staff
    Customer Support

    Try this:

    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        border-width: 1px 1px 0;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li:last-child {
        border-bottom: 1px solid rgba(0,0,0,.08);
    }
    #1321251
    Pedro

    Hola Leo! Funcionó perfectamente, muchas gracias!

    #1321257
    Leo
    Staff
    Customer Support

    No problem 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.