Mostrar imágenes de la galería en el catálogo de WooCommerce

LucusHost, el mejor hosting

El otro día un cliente me pidió mostrar más fotos del producto en el catálogo, es decir cuando vemos todos los productos. Quería mostrar que tenía más colores del mismo, ya que si hacía un producto para cada color sería malo para el posicionamiento SEO de su tienda.

Esto se podría hacer fácilmente mostrando una paleta de colores abajo, pero el quería mostrar el producto para que vean una imagen más visual del mismo. Así que vamos a ver cómo mostrarlas sin plugin.

Implementar esta función

Añade este código al archivo functions.php bien a tu plugin de utilidades como explico en este tutorial.

add_action('woocommerce_shop_loop_item_title','dl_galeria_fuera_en_tienda', 5);
function dl_galeria_fuera_en_tienda() {
	if ( is_shop() ) {
		global $product;
		$attachment_ids = $product->get_gallery_attachment_ids();
		echo '<div class="dl-producto-img">';
		foreach( array_slice( $attachment_ids, 0,3 ) as $attachment_id ) {
		  	$thumbnail_url = wp_get_attachment_image_src( $attachment_id, 'thumbnail' )[0];
		  	echo '<img class="dl-img" src="' . $thumbnail_url . '">';
		}
		echo '</div>';
	}
 }

También añade este código css en apariencia o bien en el archivo style.css:

.dl-producto-img {
  display: block!important;
  overflow: auto!important;
  margin: 10px 0!important;
  width :100%!important;
}

.dl-producto-img .dl-img {
  float: left!important;
  margin-bottom: 10px!important;
  width: 30%!important;
}

.dl-producto-img .dl-img:nth-child(2) {
  margin: 0 5%!important;
}

Conseguirás el siguiente resultado en tu catálogo:

Imágenes de la galería de productos en la página de la tienda WooCommerce

¿Mola no? Con esta acción conseguimos:

  • Incitar más al click en el catálogo, debido a que el cliente tiene una imagen más visual.
  • Mostrar más beneficios o utilidades del producto.
  • Una apariencia diferente en nuestra tienda.

Por otro lado si lo que quieres es ajustar bien las imágenes para que salgan todas en el mismo tamaño en tu tienda virtual con WooCommerce te dejo este tutorial.

Todas estas funcionalidades y otras que ves en los tutoriales puedes conseguirlas con mi servicio de Mantenimiento WooCommerce. Cualquier duda a través de comentarios o bien en contactar.

¡Haz clic para puntuar esta entrada!
(Votos: 3 Promedio: 5)
mailerlite diegol

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 Curso de WooCommerce

También puedes realizar una donacion para seguir apoyando la salida de nuevos tutoriales y actualizaciones

mailerlite diegol

Reader Interactions

Deja una respuesta

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