• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Tabs a acordeón en página de productos de WooCommerce

Tabs a acordeón en página de productos de WooCommerce

Tabs a acordeón en página de productos de WooCommerce

[ 21 octubre 2021 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Woocommerce por defecto tiene un diseño de tabs para mostrar información adicional del producto, sin embargo en este artículo veremos cómo con unos pocos cambios a nivel de código PHP y CSS podemos convertir los tabs en acordeón.

 

Resultado final

Al final queremos lograr algo similar a lo que se muestra en la siguiente imagen:

Cambiar tabs por acordeón en WooCommerce

 

Reemplazando archivo de WooCommerce

Para tener una estructura HTML más adecuada para un acordeón, vamos a realizar un reemplazo del archivo tabs.php realizando una sobrescritura del archivo a nivel del tema.

Copiamos el siguiente código en un archivo llamado tabs.php que lo puedes colocar en la siguiente ruta:

wp-content/themes/TUTHEME/woocommerce/single-product/tabs/tabs.php

El código también lo puedes descargar desde este enlace:

 

Agregando estilos CSS

Adicional al cambio de estructura de los tabs, usaremos el siguiente código CSS que puedes agregarlo como parte de tu tema o tema hijo.

.woocommerce-tabs ul.tabs {
  width: 100%;
  float: none;
}
.woocommerce-tabs ul.tabs div.panel {
  width: 100%;
  float: none;
  border: 1px solid #95588a;
  padding: 20px;
}

.woocommerce-tabs ul.tabs > li > a {
  background-color: #eee;
  padding: 15px 20px;
  outline: none !important;
}

.woocommerce-tabs ul.tabs .active > a {
  background-color: #95588a;
  color: white !important;
}

.woocommerce-tabs ul.tabs li::after {
  display: none;
}

.woocommerce-tabs ul.tabs div.panel .stars a {
  display: inline-block;
}

 

Conclusión

Como has podido comprobar, podemos realizar cambios al comportamiento de los tabs que se generan por defecto en la página de producto de WooCommerce, lo hemos realizando cambiando la estructura del archivo tabs.php y agregando código CSS.

 

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Productos de ejemplo en WooCommerceProductos de ejemplo en WooCommerce
  • Agregar el campo de cantidad en la lista de productos de WooCommerceAgregar el campo de cantidad en la lista de productos de WooCommerce
  • agregar Tabs personalizados en WooCommerceAgregar Tabs personalizados en WooCommerce sin plugins
  • Modificar elementos en página de producto de WooCommerceModificar elementos en página de producto de WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Gustavo

    4 febrero, 2022

    Hola, gracias por este tutorial, estaría muy bien si lo llegas a aplicar a las formas de pago del checkout, luego con algunos template se ve muy mal y en acordeón mejora la experiencia de usuario al saber que está clickeando, saludos.

    • Jhon Marreros Guzmán

      6 febrero, 2022

      Hola, por defecto los métodos de pago se ven en acordeón, ¿podrías indicar algún tema en específico en donde no suceda eso?

  2. jose

    17 septiembre, 2022

    Hola, me quedan siempre abiertas las pestañas y no me permite cerrarlas, como hago para que se puedan abrir y cerrar como un acordeon?

    • Jhon Marreros Guzmán

      17 septiembre, 2022

      Hola, por lo que comentas debes tener un error javascript, revisa en el inspector de código de tu navegador, en el tab consola. Es posible que sea debido a un conflicto con algún plugin o con tu tema. Saludos.

  3. Anonimo

    25 abril, 2023

    Hola Jhon, me gustaria crear el efecto de acordeon en los campos que hay que rellenar en el formulario del Checkout de Woo. Tienes algun tutorial para crear eso?

    • Jhon Marreros Guzmán

      4 mayo, 2023

      Hola, es poco común ese comportamiento en el checkout, evaluaré lo que comentas.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Consultar dudas de produtos por Whatsapp en WooCommerce

Personalizar nube de etiquetas en WordPress

Mostrar la fecha de actualización en las entradas de WordPress

Subcategorías en formato horizontal en página de categorías de WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados