Cómo «romper» las pestañas de las páginas de productos WooCommerce

Como ya habrás comprobado si tienes una tienda online creada con WooCommerce, la información introducida en la descripción, atributos, incluso la sección de valoraciones de los productos, se muestra en pestañas separadas, con diseño diferente según el tema, pero siempre en pestañas separadas.

Ahora bien, ¿y si tú prefieres mostrar toda esa información sin pestañas? ¿te has fijado que en tiendas tan populares como Amazon esta información está toda seguida, una parte seguida de la siguiente, con continuidad, sin necesidad de que el usuario haga clics.

Habrá gustos de todo tipo, pero si quieres que toda esa información se muestre directamente al usuario, una seguida de la siguiente hasta el final, puedes «romper» las pestañas de WooCommerce y mostrar toda esa información sin interrupciones, sin que el usuario tenga que hacer clic alguno, solo desplazarse por la página del producto.

Para conseguirlo hay que añadir un par de códigos usando el método que prefieras, estos…

Primero hay que desactivar la función de WooCommerce que activa las pestañas, añadiendo este código:

/* Desactivar pestañas de info de producto de WooCommerce */
if ( ! function_exists( 'woocommerce_output_product_data_tabs' ) ) {
function woocommerce_output_product_data_tabs() {
wc_get_template( 'single-product/tabs/tabs.php' );
}
}

A continuación añadiremos este otro código, que utilice este otro método para mostrar la información del producto:

/* Info de productos WooCommerce sin pestañas */
function woocommerce_output_product_data_tabs() {
$product_tabs = apply_filters( 'woocommerce_product_tabs', array() );
if ( empty( $product_tabs ) ) return;
echo '<div class="woocommerce-tabs wc-tabs-wrapper">';
foreach ( $product_tabs as $key => $product_tab ) {
?>
<h2><?php echo $product_tab['title']; ?></h2> 
<div id="tab-<?php echo esc_attr( $key ); ?>">
<?php
if ( isset( $product_tab['callback'] ) ) {
call_user_func( $product_tab['callback'], $key, $product_tab );
}
?>
</div>
<?php 
}
echo '</div>';
}

Lo que conseguimos es pasar de esto…

A esto otro, que es lo que queríamos…

El artículo Cómo «romper» las pestañas de las páginas de productos WooCommerce lo publicó Fernando Tellado previamente en Ayuda WordPress. Lo que ves aquí es una copia de dicho contenido :/