Imagen de producto en página de pedido o de gracias de WooCommerce

[…]


por

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.

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

  1. Descarga el archivo review-order.php por FTP que se encuentra en wp-content/plugins/woocommerce/templates/checkout/
  1. 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 ) . '&nbsp;'; 
?>
  1. Crea en la siguiente carpeta de tu theme o child theme: themes/tu-tema-activo/woocommerce/checkout
  2. 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:

  1. Descarga el archivo order-details-item.php por FTP que se encuentra en wp-content/plugins/woocommerce/templates/orders/
  2. 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( '&times; %s', $item->get_quantity() ) . '</strong>', $item );
  1. Crea en la siguiente carpeta de tu theme o child theme: themes/tu-tema-activo/woocommerce/orders
  2. Sube el archivo order-details-item.php a la carpeta creada
Foto producto pagina pedido

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»

  1. Avatar de Ivan

    |

    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 😉

    1. Avatar de esther

      |

      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!

      1. Avatar de Ivan

        |

        Que bueno, lo estaré esperando con ansias 😉

  2. Avatar de Lluis

    |

    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

    1. Avatar de esther

      |

      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!

  3. Avatar de Tomás

    |

    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.

    1. Avatar de esther

      |

      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!

      1. Avatar de Tomás

        |

        Muchas gracias Esther,
        Has sido muy amable, gracias de nuevo por la pronta respuesta.
        Saludos!!!

  4. Avatar de Tomás

    |

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

    1. Avatar de esther

      |

      Muchas gracias Tomás! Me alegra que te haya servido :))
      Por supuesto, si necesitas soporte para tu web puedes contactarme cuando quieras.

      Un abrazo!

  5. Avatar de Andrés

    |

    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.

    1. Avatar de Andrés

      |

      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);
      ?>

      1. Avatar de esther

        |

        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!

      2. Avatar de Ramón López

        |

        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.

  6. Avatar de Joan

    |

    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/

    1. Avatar de esther

      |

      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!

  7. Avatar de Javier

    |

    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.

    1. Avatar de esther

      |

      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!

  8. Avatar de Javier

    |

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

    1. Avatar de esther

      |

      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!

      1. Avatar de Javier

        |

        Muchas gracias Esther!

        Ojala puedas encontrar el porque! Muchas gracias de antemano!!

        Saludos
        Javier

  9. Avatar de David B.

    |

    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

    1. Avatar de esther

      |

      Hola David! Gracias, me alegro que te haya sido útil 🙂
      Podrías probar a añadir una clase a la imagen en miniatura:

      < img src='{$thumb}' width='100px' class='img-pedido' / > 

      y jugar con el CSS para ajustar la alineación a tu gusto.

      Saludos!
      esther