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

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

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:  

 

La entrada Tabs a acordeón en página de productos de WooCommerce es un artículo reciente del sitio DecodeCMS.