WooCommerce: desplácese a la pestaña Producto en la página de un solo producto

Dependiendo de su tema, la simple creación de un enlace href anclado a una pestaña de producto podría o no funcionar, es decir, es posible que no se desplace a él ya que actualmente está cerrado.

Aquí viene una forma de crear enlaces href que no solo se desplazan a la pestaña, sino que también la abren en caso de que esté cerrada (esto garantizará que el ancla se desplace a la pestaña). Además, un poco de "animación" de jQuery proporcionará un desplazamiento suave y mejorará la experiencia de usuario. ¡Espero que lo disfrutes!

Cree enlaces para desplazarse sin problemas a cualquier pestaña de producto de WooCommerce

Fragmento de PHP: Cree enlaces personalizados para desplazarse a las pestañas del producto en la página de un solo producto

/**
 * @snippet       Scroll to tab - WooCommerce Single Product
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'woocommerce_single_product_summary', 'bbloomer_scroll_to_and_open_product_tab', 21 );
  
function bbloomer_scroll_to_and_open_product_tab() {
    
   global $post, $product;   
    
   // LINK TO SCROLL TO DESC TAB
   if ( $post->post_content ) {
      echo '<p><a class="jump-to-tab" href="#tab-description">' . __( 'Read more', 'woocommerce' ) . ' &rarr;</a></p>';
   }
    
   // LINK TO SCROLL TO ADDITIONAL INFO TAB
   if ( $product && ( $product->has_attributes() || apply_filters( 'wc_product_enable_dimensions_display', $product->has_weight() || $product->has_dimensions() ) ) ) {
      echo '<p><a class="jump-to-tab" href="#tab-additional_information">' . __( 'Additional information', 'woocommerce' ) . ' &rarr;</a></p>';
   }
    
   // LINK TO SCROLL TO REVIEWS TAB
   if ( comments_open() ) {
      echo '<p><a class="jump-to-tab" href="#tab-reviews">' . __( 'Reviews', 'woocommerce' ) . ' &rarr;</a></p>';
   }
    
   ?>
      <script>
      jQuery(document).ready(function($){
         $('a.jump-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
    
}

Deja una respuesta Cancelar la respuesta

WooCommerce: desplácese a la pestaña Producto en la página de un solo producto

Fragmento de PHP: Cree enlaces personalizados para desplazarse a las pestañas del producto en la página de un solo producto

(adsbygoogle = window.adsbygoogle || []).push({});