Cómo enlazar automáticamente a las pestañas de producto de WooCommerce desde la descripción corta

¿Quieres enlazar automáticamente desde la descripción a las distintas pestañas de la página de un producto WooCommerce fácilmente? ¿y abrirlas si no están abiertas?

Pues vamos a ver cómo hacerlo con un poco de PHP y JavaScript, este:

El código mágico

/* Enlazar a las pestañas de WooCommerce */
add_action( 'woocommerce_single_product_summary', 'ayudawp_scroll_tabs_productos', 21 );
function ayudawp_scroll_tabs_productos() {
global $post, $product; 
// ENLACE A LA PESTAÑA DE DESCRIPCIÓN
if ( $post->post_content ) {
echo '<p><a class="ir-a-la-tab" href="#tab-description">' . __( 'Ver más', 'woocommerce' ) . ' &rarr;</a></p>';
}

// ENLACE A LA PESTAÑA DE INFORMACIÓN ADICIONAL
if ( $product && ( $product->has_attributes() || apply_filters( 'wc_product_enable_dimensions_display', $product->has_weight() || $product->has_dimensions() ) ) ) {
echo '<p><a class="ir-a-la-tab" href="#tab-additional_information">' . __( 'Información adicional', 'woocommerce' ) . ' &rarr;</a></p>';
}

// ENLACE A LA PESTAÑA DE VALORACIONES
if ( comments_open() ) {
echo '<p><a class="ir-a-la-tab" href="#tab-reviews">' . __( 'Ver valoraciones', 'woocommerce' ) . ' &rarr;</a></p>';
}

// ENLACE A PESTAÑA PERSONALIZADA
if ( $post->post_content ) { echo '<p><a class="ir-a-la-tab" href="#tab-personalizada">' . __( 'Instrucciones', 'woocommerce' ) . ' &rarr;</a></p>'; }
?>
<script>
jQuery(document).ready(function($){
$('a.ir-a-la-tab').click(function(e){
e.preventDefault();
var tabhash = $(this).attr("href");
var tabli = 'li.' + tabhash.substring(1);
var tabpanel = '.panel' + tabhash;
$(".wc-tabs li").each(function() {
if ( $(this).hasClass("active") ) {
$(this).removeClass("active");
}
});
$(tabli).addClass("active");
$(".woocommerce-tabs .panel").css("display","none");
$(tabpanel).css("display","block");
$('html,body').animate({scrollTop:$(tabpanel).offset().top}, 750);
});
});
</script>
<?php
}

¿Dónde meto el código?

Como suele ser habitual, puedes añadir el código a distintos sitios:

• Al final del archivo functions.php del tema activo.
• Creando un plugin solo para esta funcionalidad.
• En tu plugin de personalizaciones o mu plugin.

Guardas los cambios y ya funcionará el código.

¿Qué hace el código?

Lo mejor de este código es que no tienes que hacer nada en tus productos de WooCommerce, una vez creado añade automáticamente enlaces a las distintas pestañas a continuación del contenido de tu descripción corta del producto.

Cada sección relativa al enlace que se creará a la pestaña correspondiente indica la clase de la pestaña (#tab-reviews, #tab-description, etc.), que vienen definidas por WooCommerce.

Es más, si tienes alguna pestaña adicional, haz clic derecho en ella en tu navegador, y luego pulsa el enlace de «Inspeccionar» y te mostrará la clase de la pestaña (#tab-loquesea), y podrás añadir otro enlace también a esa pestaña, usando el modelo de la primera pestaña, como puedes ver en el código de arriba.

Puedes, por supuesto, personalizar los textos que se mostrarán para enlazar a cada pestaña.

Cuando lo tengas a tu gusto, verás que en la página del producto aparecen automáticamente nuevos enlaces, que llevan directamente a las correspondientes pestañas.

Además, las pestañas se abrirán si estuviesen cerradas, todo además con un efecto de scroll suave, como puedes ver en el siguiente vídeo…

Espero que te haya gustado este truco, añade una personalización muy interesante para cualquier tienda online, que hará tus páginas de producto mucho más interactivas, fáciles de navegar y atractivas para tus clientes.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación hace 3 años o más que no se actualiza. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te sirvió?, pues entonces nada :-)