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:
A este más visual y usable para nuestra tienda online:
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.
Excelente Diego, muchísimas gracias. Tiempo atrás buscaba como loco este snippet, ¡te la rifaste!
Hola, ¡excelente aporte!
Pregunta. ¿Se puede hacer lo mismo pero para la página de Gracias al finalizar la compra?
Hola David,
Ya tengo preparado el tutorial, saldrá el 4 de julio, así que atento 🙂
Un saludo!
me resultoo , se ve muy lindo y sutil el resultado
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
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!
Hola Diego, mil gracias por el código ¿Sabrías cómo hacerlo para la página de carrito con el plugin elementor pro que se esconde? Por ejemplo, en el segundo 7:37 de este vídeo https://www.youtube.com/watch?v=QkpDYEmjv48
Un saludo enorme