¿Cómo mostrar una imagen de producto en tienda Woocommerce distinta a 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.
Perikazo
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!
JSoleguia
Me alegra mucho que te haya sido útil 😉
Joxhe
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
JSoleguia
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.
ALEX GARCES
Buenos días,
He probado tu solución, en functions.php de mi child-theme y me sale el error siguiente:
Los cambios en tu código PHP se han revertido debido a un error en la línea 9 del archivo C:\xampp\htdocs\midominio\wp-content\themes\shopkeeper-child\functions.php. Por favor, arréglalo y trata de guardar de nuevo.
require_once(): Failed opening required ‘wp-content/themes/shopkeeper/inc/custom_woocommerce.php’ (include_path=’C:\xampp\php\PEAR’)
Si lo hago directamente desde la theme, me da el siguiente error:
Sabes donde esta el problema?
JSoleguia
Hola, Alex
tengo 2 teorías:
1) el problema es que te has saltado 2 pasos.
Para tener el código un poco organizado yo hago una carpeta «inc» y dentro hago un archivo «custom_woocommerce.php» con el código.
Después llamo a ese archivo desde functions.php con
require_once( get_template_directory() . '/inc/custom_woocommerce.php' );2) has creado el archivo «custom_woocommerce.php» pero no has puesto al principio del archivo.
Un saludo.
ALEX GARCES
Hola,
Gracias por tu respuesta. He hecho las dos cosas, pero no desde la carpeta del theme, sino desde la carpeta del Child-theme. No se si pude venir de aquí el problema. Es como si no cogiese bien la ruta…de toda manera comprobaré lo que me comentas.
Tengo dos consultas más:
1-Es posible hacer lo mismo, pero con la segunda foto de la galeria en lugar de con la primera?
2-En mi plantilla, tengo varios diseños de página de producto simple, de manera, que en función del producto, le asigno un diseño u otro. Es posible aplicar el código únicamente a uno de los diseños de página de producto?
Saludos.
JSoleguia
Hola, Alex
para tu primera consulta te diré que con cambiar, casi al final de la función, en $attachment_ids[0] ese 0 por un 1 ($attachment_ids[1]) debería funcionar siempre que tengas una segunda imagen. Esto se podría controlar con un if para evitar que te pueda saltar un error si no existiese esa segunda imagen.
Para la segunda te diré que sí se puede si tienes algún parámetro que permita diferenciar cuándo lleva un diseño y añadiendo una condición para que en ese caso active el código.
Un saludo.
ALEX GARCES
Hola,
Gracias por tus respuesta. He comprobado todo lo que me has sugerido y me continua dando el mismo error.
Warning: require_once(C:\xampp\htdocs\midominio/wp-content/themes/shopkeeper/inc/custom_woocommerce.php): failed to open stream: No such file or directory in C:\xampp\htdocs\midominio\wp-content\themes\shopkeeper-child\functions.php on line 10
Fatal error: require_once(): Failed opening required ‘C:\xampp\htdocs\midominio/wp-content/themes/shopkeeper/inc/custom_woocommerce.php’ (include_path=’C:\xampp\php\PEAR’) in C:\xampp\htdocs\midominio\wp-content\themes\shopkeeper-child\functions.php on line 10
Es como si buscase el custom_woocommerce.php, en el directorio de shopkeeper/inc , en lugar de en shopkeeper-child/inc , que es donde esta el archivo.
No se si debo copiar el custom_woocommerce.php, en el directotio inc de la plantilla, en lugar de en el inc de la child.
Saludos
ALEX GARCES
Hola de nuevo,
En mi functions.php tengo el siguinte código:
function woocommerce_get_product_thumbnail( $size = ‘product_small_thumbnail’, $placeholder_width = 0, $placeholder_height = 0 ) {
global $post;
if ( has_post_thumbnail() ) {
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘shop_catalog’ );
return get_the_post_thumbnail( $post->ID, $size, array(‘data-src’ => $image_src[0], ‘class’ => ‘lazyOwl’) );
//return »;
} elseif ( wc_placeholder_img_src() ) {
return wc_placeholder_img( $size );
}
}
Puede ser que genere conflicto con el custom_woocommerce.php?
Saludos.