Wordpress
Cómo resaltar un elemento de menú con CSS
Cómo ocultar el título de las entradas y las páginas en el Tema Astra
Cómo eliminar el precio de los productos WooCommerce de los resultados de google
Como activar la pantalla completa del editor de Bloques de WordPress
Porque no es una buena idea realizar demasiadas personalizaciones en los sitios de sus clientes
Como hacer que los campos de pago obligatorios u opcionales con WooCommerce
Cómo eliminar JavaScript para responder a comentarios en WordPress si no lo necesita
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
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