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:

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

	<?php

	// Change template tabs.php estructure
	// Copy this file to: /wp-content/TU_THEME/woocommerce/single-product/tabs/tabs.php

	if ( ! defined( 'ABSPATH' ) ) {
	exit;
	}

	$product_tabs = apply_filters( 'woocommerce_product_tabs', array() );

	if ( ! empty( $product_tabs ) ) : ?>
	<div class="woocommerce-tabs wc-tabs-wrapper">
	<ul class="tabs wc-tabs" role="tablist">
	<?php foreach ( $product_tabs as $key => $product_tab ) : ?>
	<li class="<?php echo esc_attr( $key ); ?>_tab" id="tab-title-<?php echo esc_attr( $key ); ?>" role="tab" aria-controls="tab-<?php echo esc_attr( $key ); ?>">
	<a href="#tab-<?php echo esc_attr( $key ); ?>">
	<?php echo wp_kses_post( apply_filters( 'woocommerce_product_' . $key . '_tab_title', $product_tab['title'], $key ) ); ?>
	</a>

	<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--<?php echo esc_attr( $key ); ?> panel entry-content wc-tab" id="tab-<?php echo esc_attr( $key ); ?>" role="tabpanel" aria-labelledby="tab-title-<?php echo esc_attr( $key ); ?>">
	<?php
	if ( isset( $product_tab['callback'] ) ) {
	call_user_func( $product_tab['callback'], $key, $product_tab );
	}
	?>
	</div>
	</li>
	<?php endforeach; ?>
	</ul>

	<?php do_action( 'woocommerce_product_after_tabs' ); ?>
	</div>

	<?php endif; ?>

view raw tabs.php hosted with ❤ by GitHub

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.