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

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:

¿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.