Mostrar las imágenes de los productos en el checkout de WooCommerce

En este corto artículo te voy a enseñar cómo puedes mostrar las imágenes de los productos en el checkout de WooCommerce. Es una forma sencilla y efectiva de darle a tus clientes una mejor experiencia de compra.

Primero que nada, te recomiendo hacer una copia de seguridad de tu sitio web antes de hacer cualquier cambio en el código. Es mejor prevenir que lamentar.

Ahora sí, vamos al grano. Para mostrar las imágenes de los productos en el checkout de WooCommerce, necesitamos agregar un fragmento de código al archivo functions.php de nuestro tema. Pero no te preocupes, no es nada complicado.

Paso 1: Abre el archivo functions.php

Para empezar, abre el archivo functions.php de tu tema. Puedes hacerlo desde el panel de control de WordPress, en Apariencia > Editor. O, si lo prefieres, puedes usar un programa FTP como FileZilla para acceder al archivo directamente en tu servidor.

Paso 2: Agrega el fragmento de código

Ahora, copia y pega el siguiente fragmento de código al final del archivo functions.php:

add_filter( 'woocommerce_cart_item_name', 'imagen_producto_checkout', 9999, 3 );
  
function imagen_producto_checkout( $name, $cart_item, $cart_item_key ) {
    if ( ! is_checkout() ) return $name;
    $product = $cart_item['data'];
    $thumbnail = $product->get_image( array( '55', '55' ), array( 'class' => 'alignleft' ) );
    return $thumbnail . $name;
}

Este código utiliza un filtro de WooCommerce para agregar la imagen del producto al nombre del producto en el checkout. Es decir, la imagen se mostrará junto al nombre del producto en la página de pago.

Paso 3: Guarda los cambios

Una vez que hayas agregado el fragmento de código, guarda los cambios en el archivo functions.php y actualiza la página de checkout para ver los cambios en acción.

Y eso es todo. Ahora tus clientes podrán ver las imágenes de los productos en el checkout de WooCommerce. ¡Espero que esta información te sea útil!