Si utilizas WooCommerce, estarás de acuerdo en que la página de revisión de pedido y la de gracias una vez confirmada y/o pagada la compra, dejan mucho que desear.
Un pequeño detalle que podemos modificar fácilmente para mejorarla (además de ajustar un poco los CSS correspondientes), es añadir la foto del producto para que aparezca junto a los detalles de los elementos del pedido.
A. Si queremos añadir la imagen en la página de checkout o de revisión de pedido:
Para hacerlo, hemos de realizar una modificación en el archivo review-order.php de WooCommerce siguiendo los pasos que te indico a continuación:
- Descarga el archivo review-order.php por FTP que se encuentra en wp-content/plugins/woocommerce/templates/checkout/
- Edítalo y añade el siguiente código justo antes de donde se muestra el nombre:
<?php
$thumbnail = apply_filters( 'woocommerce_in_cart_product_thumbnail', $_product->get_image(), $values, $cart_item_key );
echo $thumbnail;
?>
<?php
echo apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ) . ' ';
?>- Crea en la siguiente carpeta de tu theme o child theme: themes/tu-tema-activo/woocommerce/checkout
- Sube el archivo review-order.php a la carpeta creada
B. Si queremos añadir la imagen en la página de gracias
Para hacerlo, hemos de realizar una modificación en el archivo order-details-item.php de WooCommerce siguiendo los pasos que te indico a continuación:
- Descarga el archivo order-details-item.php por FTP que se encuentra en wp-content/plugins/woocommerce/templates/orders/
- Edítalo y añade el siguiente código justo antes de donde se muestra el nombre:
$is_visible = $product && $product->is_visible();
$product_permalink = apply_filters( 'woocommerce_order_item_permalink', $is_visible ? $product->get_permalink( $item ) : '', $item, $order );
//Comprobamos si es una variación para mostrar su imagen
$id_variacion = $item->get_variation_id();
if($id_variacion) {
$thumb = get_the_post_thumbnail_url($id_variacion, 'shop_catalog');
} else {
$thumb = get_the_post_thumbnail_url($item['product_id'], 'shop_catalog');
}
if(!empty($thumb)) {
echo "<img src='{$thumb}' width='100px' />";
}
echo apply_filters( 'woocommerce_order_item_name', $product_permalink ? sprintf( '<a href="%s">%s</a>', $product_permalink, $item->get_name() ) : $item->get_name(), $item, $is_visible );
echo apply_filters( 'woocommerce_order_item_quantity_html', ' <strong class="product-quantity">' . sprintf( '× %s', $item->get_quantity() ) . '</strong>', $item );- Crea en la siguiente carpeta de tu theme o child theme: themes/tu-tema-activo/woocommerce/orders
- Sube el archivo order-details-item.php a la carpeta creada
De esta forma, con algo de código y ajustando un poco el CSS, podremos ir mejorando las páginas de nuestra tienda online para darle un diseño más cuidado y ajustado a la imagen corporativa y al estilo del resto de la web.
¿Eres implementador o desarrollador WordPress?
En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:
ACCEDER AHORA
Comentarios
23 respuestas a «Imagen de producto en página de pedido o de gracias de WooCommerce»
|
Muchas gracias por el artículo, la verdad que me ayuda mucho!!!
Da gusto encontrar escritos claros y con ejemplo. Perfecto!!!
Me gustaría preguntarle, como se podría hacer, para añadir también el campo «Peso» del producto en la página de checkout o de revisión de pedido.
Y también (ya que estoy preguntando) como poder añadir el TOTAL de los pesos de los productos añadidos.
Gracias de antemano por su ayuda o cualquier aclaración será bien recibida 😉
|
Hola Ivan!
Me alegra que te haya sido útil! Me apunto el tema de los pesos individuales y total para un próximo tutorial.
Saludos!
|
Que bueno, lo estaré esperando con ansias 😉
|
Gracias Esther por el artículo.
Mi pregunta es la siguiente, ¿cuál sería la modificación para que el tamaño de la imagen del producto en la página de checkout o revisión fuera también de 100px tal como pones para la página de gracias?
Un saludo y gracias anticipadas
|
Hola Lluis!
En el caso de la página de checkout o revisión, podemos especificar el tamaño según los que existen en la plantilla. Por defecto, en la línea 2 donde indica «$_product->get_image()», por defecto está cogiendo el woocommerce_thumbnail ($_product->get_image(‘woocommerce_thumbnail’);. Puedes indicar allí el nombre del tamaño que quieras en lugar de ese, por ejemplo ‘thumbnail’ sería el tamaño de miniatura estándar de WordPress, pero tu theme puede tener otros tamaños creados o puedes crear tu mismo uno específico.
Espero haberte ayudado!
|
Gracias Esther,
Yo solo tengo una duda. Es que se me hace un poco escueto esto:
añade el siguiente código justo antes de donde se muestra el nombre:
No sé exactamente donde tengo que insertar el código, es justo al inicio de la plantilla??
Reciba un cordial saludo.
|
Hola Tomás!
En ambos casos has de buscar en el código la parte que muestra el nombre del producto (que aparece también en el código de ejemplo):
echo apply_filters( ‘woocommerce_order_item_name’…. etc.
Como aparece en los ejemplos, justo encima de esta línea es donde has de añadir el código para mostrar la imagen.
Saludos!
|
Muchas gracias Esther,
Has sido muy amable, gracias de nuevo por la pronta respuesta.
Saludos!!!
|
Al final me atreví a hacerlo. Todo genial, incluso con el CSS que tuve que añadir. El único «inconveniente», es, que la descripción del producto aparece duplicado, supongo que, la que escoge el propio checkout, y, la que arrastra la imagen.
De todas maneras 1.000 gracias!!! Esther, por tu información altruista, por este blog y atención, que es mucho más que otros ofrecen.
Igual, si te interesa te puedo contratar de vez en cuando para ciertos cambios en mi web. Yo realmente no me dedico a esto, y a veces me veo tan solo y tan perdido…
Recibe un fuerte abrazo!!
|
Muchas gracias Tomás! Me alegra que te haya servido :))
Por supuesto, si necesitas soporte para tu web puedes contactarme cuando quieras.
Un abrazo!
|
Hola,
Gracias por compartir!
Este código funciona para mostrar el thumbnail genérico del post ¿sabes qué podría hacer para mostrar el thumbnail pero de una variante de producto? Actualmente si uso el código, al seleccionar un producto de otro color, me sigue mostrando sólo el genérico, no el dela variante.
|
Ya lo resolví, dejo el código por si a alguien le sirve:
get_image(), $item, $order);
if (!$product->is_visible())
echo $thumbnail;
else
printf(‘%s‘, $product->get_permalink(), $thumbnail);
?>
|
Genial! Muchas gracias Andrés! no me has dado tiempo ni ha buscar la respuesta.
La añadiré al post para completarlo por si alguien más lo necesita.
Saludos!
|
Hola Andres. Intento usar este snipe en otro lugar pero con la idea de que cumpla la misma función. ¿me puedes decir donde se coloca exactamente o en sustitución de que otro código? Intento encajarlo en los ejemplos que da Esther en este tutorial pero no soy capaz.Muchas gracias por adelantado.
|
Hola Esther!
Muchas gracias por el articulo! Únicamente comentarte que en el apartado A. Si queremos añadir la imagen en la página de checkout o de revisión de pedido:, indicas una ubicación del archivo order-details-item.php (wp-content/plugins/woocommerce/templates/checkout/) que entiendo debería ser wp-content/plugins/woocommerce/templates/order/
|
Hola Joan!
Muchas gracias, el error era el nombre del archivo, no la ubicación. En el punto A el archivo a modificar es review-order.php, que está en la carpeta checkout. Ya lo he corregido 🙂
Saludos!
|
Hola, he revisado los comentarios, Andrés dejó un código para mostrar las variaciones de los productos, pero no consigo que me funcione, lo necesito para mostrar las variaciones en mi página de agradecimiento. Ya muestra las imágenes, gracias a ti, ¿podrías ayudarme a mostrar también las variaciones? Muchas gracias.
|
Hola Javier!
Para mostrar las imágenes de las variaciones, puedes adaptar el código del tutorial con un condicional para saber si es una variación, y en ese caso recoger su imagen correspondiente:
$id_variacion = $item->get_variation_id();
if( $id_variacion ) {
$thumb = get_the_post_thumbnail_url($id_variacion, ‘shop_catalog’);
} else {
$thumb = get_the_post_thumbnail_url($item[‘product_id’], ‘shop_catalog’);
}
y luego continuas mostrando la imagen igual…
Modificaré el artículo para añadir esta opcion y que se entienda mejor.
Saludos!
|
Buenas noches!
Excelente web con infinidad de información muy útil!!
Segui los pasos para agregar la imagen del producto en la revision del pedido y salio todo perfecto. Lo unico, como lo han comentado, es que se duplica el nombre del producto. Existe alguna manera de quitarlo??
Muchas gracias de antemano!!
|
Muchas gracias Javier, me alegra que te guste la web y te sea útil!
Revisaré el código a ver cual puede ser el problema y porqué se te duplica el nombre del producto.
Saludos!
|
Muchas gracias Esther!
Ojala puedas encontrar el porque! Muchas gracias de antemano!!
Saludos
Javier
|
Hola, excelente tutorial, tú sabes cual sería el código css para que la miniatura me aparezca al lado izquierdo y al lado derecho el nombre y las variantes del producto?
Gracias
|
Hola David! Gracias, me alegro que te haya sido útil 🙂
Podrías probar a añadir una clase a la imagen en miniatura:
y jugar con el CSS para ajustar la alineación a tu gusto.
Saludos!
esther