Cómo agregar una imagen de producto en la página de pago de WooCommerce

Publicado: 2022-01-08

Agregar imagen de producto Pago WooCommerce Si está familiarizado con WooCommerce, entonces sabe que es una excelente opción para iniciar una tienda en línea. La función de carrito de compras se destaca en comparación con otras plataformas de tiendas en línea. Sin embargo, carece de algunas funcionalidades bastante básicas que vienen listas para usar en casi cualquier otro software de comercio electrónico, por ejemplo, una imagen del producto en la página de pago.

Si ve la página de pago, verá que la tabla de revisión de pedidos muestra el título del producto, el inventario y el precio, pero no muestra la imagen de cada producto. Si es propietario de una tienda WooCommerce, debe saber que la página de pago predeterminada no está muy optimizada.

Optimice la experiencia del cliente de WooCommerce Checkout

Esto, por lo tanto, implica que la página de pago de WooCommerce necesita mucha personalización para que sea más fácil de convertir y aumente sus conversiones.

Si está personalizando la experiencia de usuario de sus clientes en el pago de WooCommerce, también puede consultar este artículo sobre cómo crear una redirección de WooCommerce después del pago y posiblemente usar este complemento: Redireccionamiento de WooCommerce después del complemento de pago para mejorar la experiencia de pago del cliente.

Página de pago predeterminada de WooCommerce

Este es el aspecto predeterminado de la página de pago: aspecto predeterminado de los detalles del pedido

Aquí es donde entro yo; Te daré una solución experta que te ayudará a aumentar la conversión de la página de pago.

Este breve tutorial le mostrará cómo agregar la imagen del producto en la página de pago sin anular las plantillas . Algunas soluciones lo ayudan a anular la plantilla, pero esto puede crear un conflicto con un tema. Se puede hacer fácilmente usando un filtro.

Pasos para agregar imágenes de productos en la página de pago de su tienda WooCommerce.

Estos son los pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema donde agregaremos la función que mostrará la imagen del producto en la página de pago.
Agregue el siguiente código al archivo php :

 /**
 * @snippet WooCommerce Mostrar imagen del producto en la página de pago
*/

add_filter('woocommerce_cart_item_name', 'ts_product_image_on_checkout', 10, 3);

function ts_product_image_on_checkout ($nombre, $cart_item, $cart_item_key) {  

    /* Volver si no es la página de pago */
    si (! es_pago()) {
        devolver $nombre;
    }

    /* Obtener el objeto del producto */
    $_producto = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );

    /* Obtener la miniatura del producto */
    $miniatura = $_producto->get_image();

    /* Agrega un envoltorio a la imagen y agrega algo de css */
    $imagen = '<div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">'
                . $miniatura .
            '</div>';

    /* Anteponer imagen al nombre y devolverla */
    devolver $imagen. $nombre;

}

Para ver el resultado de este código, debe actualizar la página de pago y debería ver esto:

Ahora debería poder ver todas las imágenes del producto como se muestra arriba.

Además, puede optar por agregar las imágenes a la página de pago del pedido después de que los usuarios hayan realizado el pedido. Este es el valor predeterminado de la página de pago del pedido :

Esto se puede hacer para optimizar la página y los usuarios pueden ver una imagen de lo que han comprado, además de la breve descripción. Es muy simple hacer esto y solo necesitas seguir estos pasos.

Pasos para agregar imágenes de productos en la página de pago del pedido de su tienda WooCommerce.

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del editor de temas, busque el archivo de funciones del tema donde agregaremos la función que mostrará la imagen del producto en la página de pago del pedido.
Agregue el siguiente código al archivo php :

 /**
* @snippet WooCommerce Mostrar imagen del producto en la página de pago del pedido
*/

add_filter('woocommerce_order_item_name', 'ts_product_image_on_order_pay', 10, 3);

function ts_product_image_on_order_pay ($nombre, $artículo, $extra) {

/* Volver si no es la página de pago */

si (! es_pago()) {

devolver $nombre;

}

$product_id = $item->get_product_id();

/* Obtener el objeto del producto */

$_producto = wc_get_product ($ producto_id);

/* Obtener la miniatura del producto */

$miniatura = $_producto->get_image();

/* Agrega un envoltorio a la imagen y agrega algo de css */

$imagen = '<div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">'

. $miniatura .

'</div>';

/* Anteponer imagen al nombre y devolverla */

devolver $imagen. $nombre;

}

Para ver el resultado de este código, debe actualizar la página Ordenar pago y debería ver esto:

Conclusión

En esta publicación, he resaltado dos áreas donde puede agregar la imagen del producto, que es la página de pago del pedido y la página de pago. No recomiendo anular el tema, ya que esto puede crear un conflicto con un tema. Es recomendable usar un filtro para hacer esto como se muestra en los sencillos pasos anteriores.