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.
Índice
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.
Puse el codigo primero y me fue de maravilla.
Muchas gracias por el aporte
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
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!