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:

#payment label {
    line-height: 40px;
    vertical-align: middle;
}
#payment img {
    float: left;
    margin: 5px 0 !important;
}

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: