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

webempresa woocommerce diegol

Por defecto en WooCommerce, las imágenes de los productos que hemos añadido para comprar salen en el carrito pero no en la página de compra(donde el cliente pone la tarjeta). En ocasiones el cliente no sabe distinguir muy bien el producto seleccionado por el nombre, por lo que le ayudamos bastante a la compra si se la mostramos. Mejorando así la experiencia de usuario.

Para conseguir mostrarlas añadiremos este código al archivo functions.php de nuestro child theme o bien al plugin de funcionalidades como explico aquí.

add_filter( 'woocommerce_cart_item_name', 'dl_imagen_producto_checkout', 9999, 3 );
  
function dl_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;
}

Pasamos de este resultado en el que ni se fija el cliente:

mostrar imagenes de los productos en la pagina de pago

A este más visual y usable para nuestra tienda online:

ensenar foto del producto checkout woocommerce

Recomiendo este código para cualquier tienda online, pero sobretodo para tiendas online de ropa, complementos, dibujos, merchandising, etc.

Si quieres hacer esto mismo en la página de gracias te dejo este tutorial.

Cualquier duda como siempre en comentarios.

¡Haz clic para puntuar esta entrada!
(Votos: 5 Promedio: 5)

Especialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Curso de WooCommerce

También puedes realizar una donacion para seguir apoyando la salida de nuevos tutoriales y actualizaciones

Reader Interactions

comentarios

  1. David Vite says

    Hola, ¡excelente aporte!

    Pregunta. ¿Se puede hacer lo mismo pero para la página de Gracias al finalizar la compra?

  2. Alex says

    Hola, gracias por el tutorial, muy efectivo, me resultó muy útil este código. Tengo una pregunta ¿de que manera podría hacer para que la imagen cargada sea mayor que 100x100px? Gracias de antemano un saludo

    • Diegol says

      Hola Alex,

      Es posible, cambia en el código:

      $thumbnail = $product->get_image( array( '55', '55' ), array( 'class' => 'alignleft' ) );

      El valor de 55 son los píxeles, cámbialos por la proporción que quieras y actualiza!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.