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:

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.

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: 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

Interacciones del lector

Deja un comentario

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