Como colocar logos e iconos en las formas de pago de WooCommerce

Queridos lectores el artículo de hoy lo escribo porque estoy desarrollando una tienda en línea para una fotógrafa de Guayaquil, Ecuador, Gianna Ode.  Y se necesitaba resaltar la opción de pago de tarjetas de crédito colocando los logos de las tarjetas.

WooCommerce es el servicio de código abierto que te permite la creación de carritos de compras para tiendas en línea que se construyan en Wordpress.  WooCommerce es muy popular y versátil, lo cual permite muchas personalizaciones, alguna ya vienen dentro de la herramienta y para otras es necesario recurrir a PlugIn externos para funciones más especificas.

Sin embargo para el motivo de este artículo que es colocar el logotipo de las tarjetas de crédito no necesitarás ningún PlugIn aunque está opción no viene dentro de las opciones de la herramienta.

Aquí te dejo el paso a paso:

1. Debes subir la imagen al servidor que contenga los logos o iconos que deseas colocar en tu forma de pago. Para hacer esto primero selecciona la imagen que deseas usar. Como esta por ejemplo: 
   
2. En tu panel de Wordpress da clic en la opción medios selecciona Añadir nuevo, y luego da clic en el botón que dice "Añadir nuevo", "Seleccionar Archivos", y sube la imagen que has escogido. 
   
3. Copia el enlace o la dirección URL que corresponde a la imagen que has subido. 
   
4. Luego en el panel de Worpress selecciona la opción Woocommerce y Ajustes. Y da clic en la pestaña "Pagos". 
   
5. Luego baja hasta encontrar las opciones de pago que tienes configuradas en tu tienda en línea. Y aunque el ejemplo es para las tarjetas de crédito, este procedimiento es igual para cualquiera de las otras. Luego da clic en "Gestionar" en la opción de pago que deseas incluir la imagen, logotipo o icono.
   
6. Al ingresar a esta opción vas a encontrar una opción que dice "Titulo", este es el texto que se muestra en tu opción de pago, lo puedes personalizar editando el texto.
   
7. Este es el proceso más importante colocar el siguiente código: <img src="esto deberás reemplazarlo por la URL de la imagen que obtuviste en el punto 3" > 
8. La ubicación del código determinara si la imagen va antes o después del texto. Luego da clic en "Guardar Cambios".

Y listo con estos simples pasos habrás logrado que aparezca los logos de las tarjetas de crédito en tu opción de pago.

Si deseas personalizar el tamaño de la imagen puedes optar por usar el siguiente código en el cual puedes definir el ancho y alto de tu imagen en pixeles reemplazando los valores de width y height.

<img src="esto deberás reemplazarlo por la URL de la imagen que obtuviste en el punto 3"  width="300" height="150">  

Todos los detalles cuentan a la hora de pensar en la usabilidad y experiencia de usuario, has que la compra en tu carrito de compras online sea lo más sencilla para aumentar las ventas.

¡Nos vemos pronto! 

Por Marcel Pazos