Quitar el Zoom, ligthbox o carrusel en los productos de Woocommerce

Por defecto Woocommerce en las imágenes de los productos añade: un zoom interactivo, visión en mesa de luces y un carrusel. Estas funcionalidades no siempre las necesitamos, sobretodo el zoom. Ya que no todos los productos necesitamos que se vean en detalle.

Es por eso que en este tutorial vamos a ver cómo quitar cada funcionalidad a través de código para que no ralentice la web, ayudando así al SEO de nuestra tienda online. Ya que esto disminuye las solicitudes de CSS y Javascript en la página de producto.

Eliminar el Zoom en las imágenes de Woocommerce

Añade este código en tu plugin de funcionalidades o en el functions.php de tu theme:

add_action( 'after_setup_theme', 'dl_eliminar_zoom', 99 );
function dl_eliminar_zoom() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}

Esta es la única función de las tres que recomiendo eliminar, ya que la mesa de luces sirve para que al cliente le sea más fácil salir de la fotografía. Sino para salir tendría que pulsar atrás y le será mucho más difícil.

Por otro lado si quieres que salgan todas las imágenes al mismo tamaño en tu catálogo de WooCommerce entra aquí.

Quitar la Ligthbox en las imágenes de Woocommerce

No lo recomiendo, pero al igual que antes os dejo el código para eliminarlo:

add_action( 'after_setup_theme', 'dl_eliminar_ligthbox', 99 );
function dl_eliminar_ligthbox() {
    remove_theme_support( 'wc-product-gallery-lightbox' );
}

Suprimir el carrusel en la galería de Woocommerce

Para eliminar esta función al igualq ue las anteriores añadir el siguiente código:

add_action( 'after_setup_theme', 'dl_eliminar_carrusel', 99 );
function dl_eliminar_carrusel() {
    remove_theme_support( 'wc-product-gallery-slider' );
}

Quitar el Zoom en Generatepress

Aviso: Estos códigos no funcionan en todas las plantillas, ya que no usan los mismos ganchos o hooks, por ejemplo en el tema Generatepress no funciona. Para quitar el zoom en Generatepress necesitarías el siguiente código:

function remove_image_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );

Ya sabes que si quieres seguir optimizando tu Woocommerce en la sección de Snippets tienes muchos más! También recordarte que en mi servicio de gestión de Woocommerce van incluidas estas optimizaciones.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)

Especialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Contactar

También puedes suscribirte a mi newsletter para no perderte ninguna novedad

Reader Interactions

comentarios

  1. Roberto says

    Se me había olvidado,

    al pulsar sobre la imagen (ahora ya no se ve el zoom, gracias a ti 😉 ) se puede ver esa imagen ampliadoa. Yo no deseo que se pueda ampliar. Hay algún códifo para evitar que al pulsar sobre la imagen se pueda ver ampliada esa imagen.?

    Muchas gracias

    • Diegol says

      Hola Roberto!

      Me imagino que también habrás quitado la Ligthbox y ahora al hacer clic en la imagen te lleva a la url de la misma en una ventana aparte. Para esto es necesario quitar la url de las imágenes, para que no redirija a la misma. Cosa que no recomiendo ya que afecta al SEO de las imágenes, aún así te dejo el snippet por si te ayuda:

      add_action(‘admin_init’, ‘dl_eliminar_link_imagen’, 10);
      function dl_eliminar_link_imagen() {
      $image_set = get_option( ‘image_default_link_type’ );

      if ($image_set !== ‘none’) {
      update_option(‘image_default_link_type’, ‘none’);
      }
      }

      Con eso ya no te llevará la url a la foto del Producto en WordPress y WooCommerce.

      Muchas gracias por tu comentario.

      Un saludo!

Deja una respuesta

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