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

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

mejoras

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.

Valora este artículo : (2 votos, promedio: 5,00 de 5)

Cargando...