Personalizando las imágenes de los medios de pago

Personalizando las imágenes de los medios de pago

Hace un par de días le pedíamosJesús Ángel del Pozo Domínguez, desarrollador del plugin para WooCommerce WooCommerce Sermepa payment gateway que añadiera una opción en su plugin gratuito para poder personalizar la imagen del medio de pago. Apenas tardó unas horas en responder y en añadir un nuevo filtro llamado wc_redsys_icon que nos permite personalizar la imagen desde el archivo functions.php de nuestro tema padre o hijo.

Pues bien, gracias a este nuevo filtro hemos modificado completamente la apariencia de los medios de pago de nuestra propia tienda online, y aprovechamos para explicaros cómo hacerlo por si queréis replicarlo en vuestras propias tiendas virtuales.

Lo primero que hemos hecho ha sido crear tres imágenes PNG de 150x30 píxeles con las imágenes corporativas de Cajamar, PayPal e ING Direct, las entidades bancarias que necesitábamos:

  1. Cajamar
  2. PayPal
  3. ING

En segundo lugar hemos añadido el código PHP aportado por Óscar Estepa Pontes en el propio hilo de soporte que habíamos abierto y al que le hemos añadido otros dos filtros que necesitábamos en nuestro caso particular, woocommerce_paypal_icon y woocommerce_bacs_icon, lo que nos deja el siguiente código PHP en nuestro archivo functions.php:

En tercer, y último lugar, hemos añadido un par de reglas en nuestra hoja de estilo CSS para lograr que la imagen quede alineada a la izquierda del botón de radio y éste quede centrado con la propia imagen. Concretamente hemos utilizado este código CSS:

Y para evitar que en los dispositivos móviles se perdiera la imagen debajo de la descripción del medio de pago hemos optado por eliminar la propiedad flotante de la imagen:

Vamos a aprender a personalizar las distintas imágenes de los medios de pago de WooCommerce

Con esta pequeña modificación hemos conseguido que en los dispositivos móviles aparezca la imagen completa y sin ningún tipo de conflicto con la capa que se encarga de mostrar la descripción del medio de pago elegido.

Además hemos mejorado los títulos y las descripciones de los medios de pago en los Ajustes de WooCommerce para uniformar  aún mejor el contenido de la página de cobro de nuestra tienda online.

Como veis con estos pequeños ajustes, que apenas nos han robado más allá de 5 minutos, hemos conseguido personalizar totalmente la imagen de nuestra tienda virtual, mejorando sensiblemente la información proporcionada a nuestros clientes.

No quisiéramos terminar sin dar las gracias a Ángel del Pozo Domínguez por el gran trabajo realizado en su plugin para WooCommerce y su presteza a la hora de dar respuesta a las solicitudes de sus usuarios.

Ahora quedamos, como siempre, a la espera de vuestros comentarios, sugerencias y aportaciones.

2017-12-11T18:10:29+00:0015 de noviembre de 2015|Categorías: Tutoriales|Etiquetas: , , , , , |Sin comentarios

Deja tu comentario

Información básica sobre Protección de Datos

  • Responsable: EMILIO JOSÉ CALVO CARRASCO.
  • Fin del tratamiento: Mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios.
  • Legitimación: El consentimiento del usuario.
  • Comunicación de los datos: No se comunicarán los datos a terceros, salvo por una obligación legal.
  • Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.
  • Contacto: info@artprojectgroup.es.
  • Información adicional: Puede consultar la información adicional y detallada sobre Protección de Datos en Política de Privacidad.