Desea vincular automaticamente la descripcion a las diferentes pestañas

¿Desea vincular automáticamente la descripción a las diferentes pestañas de una página de producto de WooCommerce fácilmente? ¿Y abrirlos si no están abiertos?

Bueno, veamos cómo hacerlo con PHP y JavaScript , este es el codigo:

add_action( 'woocommerce_single_product_summary', 'wphelp_scroll_tabs_products', 21 );

function wphelp_scroll_tabs_products() {

global $post, $product;

if ( $post->post_content ) {

echo '<p><a class="go-to-tab" href="#tab-description">' . __( 'Read more', 'woocommerce' ) . ' →

';

}

if ( $product && ( $product->has_attributes() || apply_filters( 'wc_product_enable_dimensions_display', $product->has_weight() || $product->has_dimensions() ) ) ) {

echo '<p><a class="go-to-tab" href="#tab-additional_information">' . __( 'Additional information', 'woocommerce' ) . ' →</a></p>';

}

if ( comments_open() ) {

echo '<p><a class="go-to-tab" href="#tab-reviews">' . __( 'See reviews', 'woocommerce' ) . ' →</a></p>';

}

if ( $post->post_content ) { echo '<p><a class="go-to-tab" href="#custom-tab">' . __( 'Instructions', 'woocommerce' ) . ' →</a></p>'; }

?>

<script>

jQuery(document).ready(function($){

$('a.go-to-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 Pongo El Sr. Código?

Como de costumbre, puede agregar el código a diferentes lugares:

  • Al final del archivo functions.php del tema activo.
  • Creando un complemento solo para esta funcionalidad.
  • En su complemento de personalizaciones o complemento mu.
  • Guarde los cambios y el código funcionará.

¿Qué Hace El Sr. Code?

Lo mejor de este código es que no tiene que hacer nada en sus productos WooCommerce, una vez creado, automáticamente agrega enlaces a las diversas pestañas que siguen el contenido de la descripción breve de su producto.

Cada sección relativa al enlace que se creará a la pestaña correspondiente indica la clase de la pestaña (# revisiones de pestaña, # descripción de pestaña, etc.), que son definidas por WooCommerce .

Además, si tiene pestañas adicionales , haga clic derecho sobre ellas en su navegador y luego haga clic en el enlace "Inspeccionar" y le mostrará la clase de pestaña (# pestaña-lo que sea), y puede agregar otro enlace a esa pestaña como bueno, usando el modelo de la primera pestaña, como puedes ver en el código de arriba.

Por supuesto, puede personalizar los textos que se mostrarán para vincular a cada pestaña.

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

Gracias por visitar este sitio, espero que te haya gustado y vuelvas proximamente, compartela en las redes sociales, gracias

Compartir en Facebook Compartir en twitter

Semrush sigue a tu competencia

Fecha actualización el 2021-02-16. Fecha publicación el 2021-02-16. Categoría: wordpress Autor: Oscar olg Mapa del sitio Fuente: wphelp