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 150×30 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 Direct

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:

//Cambiamos iconos
function apg_icono_cajamar( $icono ) {
	if ( file_exists( get_stylesheet_directory() . '/imagenes/cajamar.png' ) ) {
		$icono = get_stylesheet_directory_uri() . '/imagenes/cajamar.png';
	}
		
	return $icono;
}
add_filter( 'wc_redsys_icon', 'apg_icono_cajamar', 99, 1 );

function apg_icono_paypal( $icono ) {
	if ( file_exists( get_stylesheet_directory() . '/imagenes/paypal.png' ) ) {
		$icono = get_stylesheet_directory_uri() . '/imagenes/paypal.png';
	}
		
	return $icono;
}
add_filter( 'woocommerce_paypal_icon', 'apg_icono_paypal' );


function apg_icono_ing_direct( $icono ) {
	if ( file_exists( get_stylesheet_directory() . '/imagenes/ing-direct.png' ) ) {
		$icono = get_stylesheet_directory_uri() . '/imagenes/ing-direct.png';
	}
		
	return $icono;
}
add_filter( 'woocommerce_bacs_icon', 'apg_icono_ing_direct' );

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:

.mobile-480 #payment img {
	float:none;
}

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.