Mostrar imágenes de los productos en la página de checkout en WooCommerce

En WooCommerce, el resumen del pedido en la página de checkout muestra el nombre, cantidad y precio de los productos, pero no incluye imágenes por defecto. Agregar imágenes mejora la experiencia del usuario y brinda una referencia visual rápida de los productos seleccionados.

En este artículo, aprenderás a insertar imágenes de los productos en el resumen del pedido en la página de checkout mediante un fragmento de código en tu tema o plugin personalizado.

Agregar imágenes de productos al resumen del pedido.

Para lograrlo, usaremos el filtro woocommerce_cart_item_namepara modificar la visualización del nombre del producto e incluir la imagen antes del texto.

Añade el siguiente fragmento de código en el archivo functions.phpde tu tema hijo o en un plugin personalizado:

<?php
function addProductImageToCheckout( $productName, $cartItem, $cartItemKey ) {
    $product = $cartItem['data'];  
    $thumbnail = $product->get_image( array( 50, 50 ) ); // Tamaño 50x50 píxeles  

    return $thumbnail . ' ' . $productName;
}
add_filter( 'woocommerce_cart_item_name', 'addProductImageToCheckout', 10, 3 );

1. Obtenemos el objeto del producto desde el array $cartItem['data'].
2. Generamos la imagen del producto usando $product->get_image(), especificando un tamaño de 50×50 píxeles.
3. Concatenamos la imagen con el nombre del producto y devolvemos el resultado.
4. Aplicamos el filtro woocommerce_cart_item_name para modificar el contenido mostrado en el resumen del pedido.

Después de agregar este código, en la página de checkout, los productos en el resumen del pedido se mostrarán con su imagen, mejorando la presentación visual.

Tip: Si deseas cambiar el tamaño de la imagen, puedes modificar los valores en get_image( array( ancho, alto ) ).