Volvemos con otro WooCommerce Snippet en el que vamos a cambiar el icono que WooCommerce establece para Paypal.
Para que os hagáis una idea, os muestro el icono en cuestión:
Si, como es el caso que muestro en el que no disponemos de pagos con tarjeta de crédito, es posible que sea mejor que el visitante no vea ese icono porque es posible que no sepa que a través de Paypal también puede pagar con tarjeta.
Pues bien, para estos casos podemos sustituir esa imagen o icon por otra imagen.
Yo voy a utilizar la siguiente imagen:
Creo que con esta imagen el visitante puede hacerse una idea más clara de que puede pagar con tarjeta de crédito o débito a través de esta opción, ¿verdad?
La cosa es dar facilidades a los visitantes y clientes.
Esto lo vamos a hacer, como es costumbre en los snippets que estoy publicando desde hace tiempo, en el fichero functions.php aunque os recuerdo que también podemos hacerlo creando un plugin para esto en concreto.
Por cierto, habrá que empezar a hacer plugins de un momento a otro porque con tanto snippet estamos dejando el fichero functions.php a tope!
Os prometo que en breve comenzaré a publicar tutoriales para hacerlo a través de plugins e incluso daré la opción para que os los descarguéis y los instaléis tranquilamente en vuestros WordPress, WooCommerce o incluso otro tipo de plugins.
Lo más «limpio» si lo hacemos a través del fichero functions.php de nuestro tema, sería subir la imagen o icono que vamos a utilizar y colocarla en el directorio «images» de este tema pero como todo, tiene su cosa buena y cosa mala porque si cambiamos de tema, perdemos la url a la imagen sino volvemos a ubicar la imagen en el directorio «images» del nuevo tema.
Pues bien, para este ejemplo y aunque pueda parecer un poco «sucio«, voy a subirla a través del gestor de medios de WordPress. Es decir, la subiré como si de una imagen más se tratara. De hecho ya la he subido puesto que la he puesto hace un momento en este post. Utilizaré ese mismo enlace en lugar de colocar la imagen en un directorio del tema.
Si hiciéramos un plugin, estaría bien que la imagen la pudiéramos subir para cambiarla cuando queramos. Apunte: interesante para un plugin!! Apuntado queda!
De acuerdo, entonces obtenemos la url de la imagen que queremos y que hemos subido a WordPress. En mi caso es esta: https://oscarabadfolgueira.com/wp-content/uploads/2016/03/icono-paypal-tarjetas.png
Ahora lo que nos queda es encontrar el hook que nos permitirá hacer esto. Aunque os parezca mentira, existe este hook:
woocommerce_paypal_icon
Con esto queda claro que tanto WordPress como WooCommerce están repletos de Hooks. Perfecto!
Seguimos… Y como es costumbre debemos crear una función que se ejecute en este hook.
Y ¿Qué tiene que hacer esta función exactamente? Pues nada más sencillo que devolver la url de la nueva imagen que queremos que aparezca en lugar del icono que WooCommerce establece por defecto.
Esto lo haremos fácilmente así:
return "url_de_la_imagen.png";
Que en mi caso será:
return "https://oscarabadfolgueira.com/wp-content/uploads/2016/03/icono-paypal-tarjetas.png";
Hasta aquí todo bien.
Ahora creamos la función de esta manera y colocamos la línea que acabamos de indicar. Es decir, el retorno de la función.
function oaf_change_paypal_icon_image() {
return "https://oscarabadfolgueira.com/wp-content/uploads/2016/03/icono-paypal-tarjetas.png";
}Pues ya está, ya lo tenemos listo. Ahora sólo tenemos que indicar a través de «add_filter«, el hook y la función.
add_filter( 'woocommerce_paypal_icon', 'oaf_change_paypal_icon_image' );
Perfecto!!
Nos quedaría algo así:
Queda mejor ahora, ¿o no?
Yo creo que si, que ahora el visitante o posible cliente tiene más claro que puede pagar con tarjeta a través de Paypal seleccionando esta opción.
Y como siempre, a continuación os pongo el código completo de este WooCommerce Snippet para vuestro uso y disfrute:
Bien, espero que os haya gustado este trocito de código para WooCommerce y que lo uséis cuando os haga falta.
Cualquier duda sobre este o cualquier otro tema, me los podéis hacer llegar a través del formulario de contacto o dejando un comentario.
Sin más, nos vemos en el siguiente post.
Seguid bien!!
Saludos.
