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:
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
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.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando...
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.
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?
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?
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.
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?
Hola, es poco común ese comportamiento en el checkout, evaluaré lo que comentas.