Cómo agregar la imagen del producto al pago de WooCommerce

¿Desea agregar una imagen de producto al pago de WooCommerce en un intento por mejorar la experiencia de compra de su cliente? Te tenemos cubierto. En este artículo, le mostraremos cómo agregar una imagen de producto al pago de WooCommerce.

Pero, antes de sumergirnos en eso, es importante tener una comprensión clara de por qué necesitamos agregar imágenes de productos a la página de pago de WooCommerce. ¿También es fundamental conocer sus beneficios y cómo impacta en las ventas? Entonces, averigüémoslo primero.

¿Por qué debería agregar una imagen de producto a la caja?

Su página de pago se encuentra en las páginas más importantes de su tienda WooCommerce. Es donde el usuario finaliza su compra y confirma su pedido. Por lo tanto, su página de pago debe estar optimizada para una mejor experiencia de usuario y ser fácil de seguir.

Al mirar la página de pago predeterminada, notará rápidamente que no está optimizada para la experiencia del usuario. Por ejemplo, la sección de pedidos en el proceso de pago solo muestra los títulos de los productos sin las imágenes. Esto dificulta que el cliente verifique si ha obtenido los productos correctos.

Por naturaleza, los humanos somos mejores con las imágenes en comparación con el texto sin formato. Es mucho más fácil para nosotros reconocer una imagen que leer un texto sin formato. Al agregar imágenes de productos además de títulos, puede hacer que sea mucho más fácil para sus clientes reconocer los productos y asegurarse de que obtuvieron los productos correctos al finalizar la compra.

Mientras que, sin la imagen del producto, tendrán que recordar los títulos exactos de los productos o volver a la tienda y verificar nuevamente si tienen los productos correctos al momento de pagar. Claramente, esto no es una señal de una buena experiencia de usuario. Es hacer que el cliente tome algunos pasos adicionales.

Nuestro objetivo es reducir el número de pasos y hacer que el proceso de compra sea más sencillo y rápido para el cliente. Recuerde, una mejor experiencia de usuario da como resultado un cliente satisfecho y, por lo tanto, mejores ventas. Entonces, avancemos ahora y veamos cómo podemos agregar una imagen de producto al pago de WooCommerce.

Cómo agregar la imagen del producto al pago de WooCommerce

Para agregar una imagen de producto al pago de WooCommerce, usaremos fragmentos de código personalizados. No se preocupe, no necesita tener experiencia en programación para hacer esta parte. Es bastante simple y directo. Simplemente síguelo y verás lo simple que es en realidad.

Adición de fragmentos de código

Antes de pasar a los fragmentos de código, le recomendamos que cree una copia de seguridad completa de su sitio y use un tema secundario para editar el archivo fun ctions.php . Como referencia, consulte nuestra guía sobre cómo crear un tema secundario o use cualquiera de estos complementos de temas secundarios.

Una vez que haya configurado su tema secundario, vaya a Panel de administración de WP > Apariencia > Editor de temas. Seleccione su tema hijo y vaya al archivo functions.php . Aquí, puede agregar sus fragmentos de código personalizados al final del archivo y actualizarlos después para que los cambios surtan efecto.

Alternativamente, el complemento Code Snippets también se puede usar en caso de que no se sienta cómodo con la idea de modificar los archivos principales de WordPress. Puede instalar el complemento desde el repositorio de WordPress.

Una vez que el complemento esté instalado y activado, vaya a la configuración del complemento desde su panel de WordPress y haga clic en Agregar nuevo fragmento. Con este complemento, puede agregar tantos fragmentos como desee.

Con el complemento Code Snippets, no necesita un tema secundario, ya que el complemento se encarga de los fragmentos de código por sí solo. Sin embargo, siempre recomendamos tener uno en caso de que algo salga mal.

Ahora que sabemos cómo agregar fragmentos de código a su sitio, veamos los fragmentos de código para agregar una imagen de producto al pago de WooCommerce.

Fragmentos para agregar la imagen del producto al pago de WooCommerce

Tenemos dos fragmentos personalizados aquí para usted. El primero muestra la imagen del producto en línea con el título del producto. Mientras que el segundo muestra la imagen y el título en líneas separadas. Veamos a los dos en acción.

Agregue la imagen del producto al pago en estilo en línea

Use el siguiente fragmento de código para agregar la imagen del producto a la página de pago en estilo en línea .

 add_filter('woocommerce_cart_item_name', 'quadlayers_product_image_checkout', 9999, 3); 
function 'quadlayers_product_image_checkout' ( $nombre, $cart_item, $cart_item_key ) {
    si ( ! es_pago() ) 
        {retornar $nombre;}
    $producto = $cart_item['datos'];
    $miniatura = $producto->get_image( array( '50', '50' ), array( 'class' => 'alignleft' ) ); 
    /*Arriba puede cambiar el tamaño de la miniatura cambiando los valores de la matriz, por ejemplo, matriz('100', '100') y también cambiar la alineación para alinear a la derecha*/
    devolver $miniatura . $nombre;
}

Se actualiza en la interfaz tan pronto como usted o su cliente obtengan una vista previa de la página de pago.

Agregue la imagen del producto y los títulos en líneas separadas

De manera similar, puede usar el siguiente fragmento de código para mostrar la imagen y el título del producto en líneas separadas . Esto puede ser excelente si los títulos de los productos son largos y no hay suficiente espacio para que quepan la imagen y el título en una sola línea.

 add_filter('woocommerce_cart_item_name', 'quadlayers_product_image_checkout', 9999, 3);
función quadlayers_product_image_checkout ($nombre, $cart_item, $cart_item_key) {
    si ( ! es_pago() ) 
        {retornar $nombre;}
    $_producto = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
    $miniatura = $_producto->get_image();
    $imagen = '<div class="quadlayers_product_image_checkout">'
                . $miniatura .
            '</div>'; 
    /* Arriba puedes cambiar el ancho, el alto y la alineación de la imagen como quieras*/
    devolver $imagen. $nombre;
}

La imagen del producto y los títulos se mostrarán en líneas separadas después de actualizar la página de pago.

¡Eso es! ¡Felicidades! Ahora ha agregado con éxito imágenes de productos al pago de WooCommerce. Sin embargo, hay algo más. Una vez que el cliente hace clic en el botón Realizar pedido , se le lleva a la página Pedido-Pago o Detalles del pedido , donde debe realizar los pagos.

Veamos cómo se ve la página Order-Pay, de forma predeterminada, y cómo podemos mejorarla también.

Fragmento para agregar la imagen del producto a la página WooCommerce Oder-Pay

Al llegar a la página Order-Pay, aquí es donde sus clientes realizan sus pagos. La página Order-Pay muestra todos los detalles del pedido, incluido el título del producto, la cantidad, el precio y el precio total del pedido. Así es como se ve la página por defecto.

Como puede ver, al igual que en la página de pago predeterminada, las imágenes de los productos tampoco se muestran aquí. Entonces, arreglemos eso. Nuestro objetivo es agregar imágenes de productos a la página Order-Pay.

Para agregar imágenes de productos a la página Order-Pay, puede usar el siguiente fragmento de código. Simplemente agréguelo a su sitio usando su método preferido, como se explicó anteriormente.

 add_filter('woocommerce_order_item_name', 'quadlayers_product_image_orderpay', 9999, 3);
función quadlayers_product_image_orderpay ($nombre, $artículo, $extra) {
    si ( ! es_pago() ) 
        {retornar $nombre;}
    $product_id = $item->get_product_id();
    $_producto = wc_get_product ($ producto_id);
    $miniatura = $_producto->get_image();
    $imagen = '<div class="quadlayers_product_image_orderpay">'
                . $miniatura .
            '</div>'; 
    /* Arriba puedes cambiar el ancho, la altura y la alineación de la imagen como quieras*/
    devolver $imagen. $nombre;
} 

¡Bravo! Ahora puede agregar con éxito una imagen de producto a las páginas de WooCommerce Checkout y Order-Pay. Sus clientes seguramente estarán encantados con la experiencia de usuario mejorada.

Hasta ahora, hemos visto cómo agregar una imagen de producto a las páginas de WooCommerce Checkout y Order-Pay. Veamos algunas otras formas de personalizar la página de pago para que sea más fácil de usar. Vamos a sumergirnos en eso.

Bonificación: personalice la página de pago con el complemento Checkout Manager

La forma más fácil de personalizar su página de pago de WooCommerce es a través de complementos de terceros. Para fines de demostración, utilizaremos Checkout Manager para el complemento WooCommerce desarrollado por QuadLayers. Es uno de los mejores complementos para personalizar su página de pago con más de 90,000 instalaciones activas.

Checkout Manager para WooCommerce es un complemento rico en funciones que le permite administrar todos sus campos de pago para que pueda personalizarlos según sus requisitos. Siga nuestra página de productos para ver todas las valiosas funcionalidades que ofrece esta herramienta.

Veamos ahora cómo el complemento nos permite personalizar la página de pago de WooCommerce.

Instalación del complemento Checkout Manager para WooCommerce

En primer lugar, debe instalar y activar el complemento. Simplemente vaya a su panel de administración de WordPress y vaya a Complementos > Agregar nuevo. Busque Checkout Manager para el complemento WooCommerce de QuadLayers y haga clic en el botón Instalar ahora . Una vez que el complemento esté instalado, presione Activar . Esto activará el complemento en su sitio.

Entonces, el complemento ahora está instalado y listo para usar. Pasemos a personalizar nuestra página de pago usando el complemento Checkout Manager. Si desea la versión premium, también puede agregarla a su sitio web. Pero deberá instalar el complemento manualmente en su sitio web de WooCommerce.

Agregar, editar y eliminar campos de pago

Una vez que tenga el complemento activo en su sitio, simplemente vaya al Panel de administración de WordPress y navegue hasta WooCommerce> Pago. Allí encontrará todas las configuraciones para el Checkout Manager.

En la pestaña Pagar, tendrá diferentes menús para diferentes secciones de la página Pagar. Puede administrar los campos de envío, facturación, pedido y correo electrónico. Además, también puede agregar sus propios campos personalizados. Dentro de cada menú, encontrará los campos relevantes que puede administrar según sus requisitos.

Cada campo tiene múltiples parámetros que controlan la forma en que se comporta un campo en particular. Al modificar estos parámetros, puede alterar su comportamiento y así obtener un mayor control sobre su página de Checkout. Echemos un vistazo a los diferentes parámetros de campo y veamos qué hacen.

• Reposicionar: Mover un campo, hacia arriba o hacia abajo, es posible con las flechas hacia arriba y hacia abajo. Simplemente haga clic en uno y el campo se moverá un paso hacia arriba o hacia abajo, respectivamente. Alternativamente, puede hacer clic y arrastrar las tres líneas horizontales para cambiar la posición de un campo a la posición deseada.
• Obligatorio: al activar el parámetro obligatorio, el campo es obligatorio. Sus clientes no podrán saltarse un campo marcado como obligatorio.
• Posición: el parámetro de posición básicamente le permite alinear un campo según sus deseos. Puede optar por alinear un campo a la izquierda o a la derecha o hacerlo de ancho completo.
• Borrar: Activar el parámetro borrar restringirá cualquier otro campo en línea con este campo en particular.
• Deshabilitar: como su nombre lo indica, el parámetro de deshabilitar, cuando está encendido, deshabilita un campo para que no aparezca en el pago.
• Editar y Eliminar: Puede editar o eliminar un campo usando el botón respectivo. Vale la pena señalar que el botón Eliminar aparece solo para campos personalizados. No puede eliminar los campos predeterminados, solo deshabilitarlos

Entonces, todo se trataba de administrar sus campos ajustando los parámetros de campo. A continuación, veremos cómo agregar un campo de carga personalizado a WooCommerce Checkout.

Agregue un campo de carga personalizado en WooCommerce Checkout

Vaya a su panel de administración de WordPress y navegue hasta WooCommerce > Pago. En la pestaña Pago , abra el menú Campos adicionales .

NOTA: Agregar campos personalizados no se limita solo a campos adicionales. Puede agregar campos personalizados a otras secciones de la página de Pago, como Facturación, Envío, etc. Simplemente navegue hasta el menú correspondiente dentro de la pestaña Pago para agregar nuevos campos a su área deseada.

Una vez dentro del menú Campos adicionales, haga clic en el botón Agregar nuevo campo para crear un nuevo campo. Además, puede ajustar la posición de la sección de campos adicionales desde el menú desplegable en la esquina derecha. Puede colocarlos antes o después de los formularios de facturación o las notas de pedido.

Te llevará a una nueva página con un formulario para crear un nuevo campo. Dado que estamos interesados ​​en agregar un botón de carga de archivos, configure el Tipo como Archivo y asígnele una etiqueta y un texto de botón. Presiona guardar para guardar tu nuevo campo.

¡Eso es todo! Es tan simple como eso. Ahora puede navegar a su página de pago para verificar los cambios. Allí verá el botón Cargar archivo en acción.

Así de simple, hay varias formas de personalizar su página de pago. Para obtener un tutorial completo, consulte nuestra guía completa sobre cómo personalizar la página de pago de WooCommerce.

Conclusión

Con todo, su pago es uno de los pasos más cruciales en el proceso de compra de su cliente. En este momento, el cliente ya ha decidido finalizar su compra. Por lo tanto, no desea que nada vaya mal aquí para arruinar una buena venta. Es por eso que necesita optimizar su página de pago para una mejor experiencia de usuario. Para que sea más probable que su cliente finalice su compra y realice su pedido.

La página de pago predeterminada es bastante básica y no está optimizada para la experiencia del usuario. Por ejemplo, solo muestra los títulos de los productos y no sus imágenes. Desde el punto de vista del cliente, el título solo no es suficiente para verificar si obtuvieron los artículos correctos al finalizar la compra. Mostrar la imagen del producto en el proceso de pago de WooCommerce puede ser muy útil aquí, ya que confirmará al usuario final que tiene el producto correcto al momento del pago.

En este artículo, hemos visto cómo agregar una imagen de producto al pago de WooCommerce usando fragmentos de código personalizados. Hemos visto dos opciones para mostrar imágenes de productos, en línea y en líneas separadas en la página de pago. Además, también hemos visto cómo podemos agregar imágenes de productos a la página de pago de pedidos de WooCommerce usando un código personalizado. Además, vimos diferentes formas de personalizar la página de pago usando el complemento Checkout Manager para WooCommerce.

Si esta guía le resultó útil, aquí hay algunos artículos más que podrían interesarle:

• Cómo comprimir imágenes en WordPress (con y sin complementos)
• Los mejores complementos para agregar etiquetas ALT a las imágenes (gratis y de pago)
• Cómo solucionar problemas de tamaño de imagen de WooCommerce

¿Alguna vez ha intentado agregar imágenes de productos al pago de WooCommerce? ¿Qué solución te funcionó? ¿Cuánta diferencia crees que hace? Háganos saber en los comentarios a continuación.