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:

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.

(4 votos, promedio: 5) Valora este artículo para ayudar a mejorar la calidad del blog

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

Sobre el autor

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

  1. Qué bueno Fernando.

    Lo he utilizado y la opción de ver más no aparece, y la de información adicional y valoraciones solo aparece en algunos productos, me estoy volviendo loco encontrando el porqué pero no hay manera.

    1. Solo salen los enlaces si está activa la pestaña. O sea, si un producto no tiene descripción larga ni atributos no te salen los 2 enlaces correspondientes. O si un producto tiene inactivas las valoraciones no saldrá el enlace a las valoraciones. Es lo suyo que funcione así

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido