¿Cómo mostrar una imagen de producto en tienda Woocommerce distinta a la imagen destacada?

¿Cómo mostrar en Woocommerce una imagen de producto que no sea la imagen destacada?

Por defecto, en la página de tienda, Woocommerce muestra la imagen de producto que está como destacada para cada producto. El caso que me he encontrado es que por exigencias de diseño necesitaba que apareciese una imagen de producto en la tienda y otra en la página del producto.

 

Mi solución ha sido utilizar la primera imagen de la galería del producto como imagen para mostrar en la página de tienda. En la página de producto se ve como imagen de producto principal la imagen destacada.

Para conseguir esto me he servido de las funciones sobreescribibles (pluggables) de Woocommerce. Estas funciones están hechas para poder sobrescribirlas y adaptar lo que hacen a nuestras necesidades.

 

En Woocommerce encontramos estas funciones en wp-content/plugins/woocommerce/includes/wc-template-functions.php

Para mantener todo un poco ordenado he creado en mi theme una carpeta llamada inc.
En esta carpeta he creado un archivo llamado custom_woocommerce.php donde introduciré las funciones retocadas para ajustarse a lo que necesito.

 

El siguiente paso es desde functions.php hacer una llamada a ese archivo para poder utilizar las funciones editadas:

require_once( get_template_directory() . '/inc/custom_woocommerce.php' );

 

Ahora para cambiar la imagen de producto que se muestra en cada producto de la tienda, copio la función woocommerce_get_product_thumbnail de wc-template-functions.php y la pego en mi archivo custom_woocommerce.php para modificarla

 

if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {
/**
* Get the product thumbnail, or the placeholder if not set.
*
* @subpackage Loop
* @param string $size (default: 'shop_catalog')
* @param int $deprecated1 Deprecated since WooCommerce 2.0 (default: 0)
* @param int $deprecated2 Deprecated since WooCommerce 2.0 (default: 0)
* @return string
*/
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $deprecated1 = 0, $deprecated2 = 0 ) {
global $post;
$image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );
  global $product;
  $attachment_ids = $product->get_gallery_attachment_ids();
  if( empty( $attachment_ids ) )
  {
if ( has_post_thumbnail() ) {
$props = wc_get_product_attachment_props( get_post_thumbnail_id(), $post );
return get_the_post_thumbnail( $post->ID, $image_size, array(
'title' => $props['title'],
'alt' => $props['alt'],
) );
} elseif ( wc_placeholder_img_src() ) {
return wc_placeholder_img( $image_size );
}
} else {
    return wp_get_attachment_image( $attachment_ids[0], $image_size, '', array( 'class' => 'img-responsive' ) );
  }
}
}

 

He hecho dos añadidos sobre la función original:

 

1: busco si hay imágenes en la galería de este producto.

global $product;
$attachment_ids = $product->get_gallery_attachment_ids();

 

2: si no hay imágenes le dejo mostrar la imagen destacada.

if( empty( $attachment_ids ) )

En cambio si hay imágenes en la galería utilizo como imagen de producto la primera de la galería para mostrarla.

else {
return wp_get_attachment_image( $attachment_ids[0], $image_size, '', array( 'class' => 'img-responsive' ) );
}

 

La clase img-responsive se la aplico porque trabajo sobre bootstrap normalmente.

¡Compartir mola!Share on Facebook0Share on Google+0Share on LinkedIn0Tweet about this on TwitterBuffer this pageEmail this to someone

4 comentarios sobre “¿Cómo mostrar una imagen de producto en tienda Woocommerce distinta a la imagen destacada?

  1. Funciona de 10 ***** Muchisimas gracias, llevaba días buscando esto por exactamente lo mismo que tú, me pasaron un diseño para maquetar con distintas imagenes en la ficha de producto y en la categoría.

    Salud!

  2. Hola Josu
    ¿Se puede hacer que como imagen destacada de la página de tienda de woocommerce se vea un recorte de la imagen destacada que aparecerá en la página del producto? El asunto es que tengo imágenes rectangulares diferentes de libros y CD’s y no me gusta la alineación resultante. Poniendo todas las imágenes al mismo tamaño (cuadrado) en la página tienda creo que quedaría mejor.
    Muchas gracias

    1. Buenos días, Joxhe

      utilizando este código podrías poner el recorte que quieres que se muestre como primera imagen de la galería del producto.

      Si lo que quieres utilizar es uno de los recortes que hace el propio wordpress cuando subes una imagen (“medium”, “thumbnail”) tendrías que cambiar $image_size por el tamaño que quieras:

      return wp_get_attachment_image( $attachment_ids[0], $image_size 'medium', '', array( 'class' => 'img-responsive' ) );

      Un saludo.

Deja un comentario

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