WooPayment – Plugin para WooCommerce, mejora el diseño de tu tienda estilo Shopify

WooPayment, el plugin de WooCommerce que transforma el checkout en el de Shopify.

Hola a todos de nuevo, después de un largo tiempo desarrollando y trabajando tanto en proyectos propios como este como en proyectos para clientes y otros socios vengo a hablaros de WooPayment.

Sí, me toca hablar de este plugin desarrollado junto a mi amigo Francisco Falcón en su versión 2.0 (podría haber escrito en la versión 1.0 pero como siempre, vamos hasta arriba).

¿Qué es WooPayment y para que sirve?

WooPayment es un plugin desarrollado con la intención de mejorar el look and feel del checkout o pasarela de pago de WordPress. El principal escoyo que suele haber en los formularios del checkout de wordpress es que cada theme tiene su diseño, con el principal problema que están pensados para tener un diseño acorde a la web pero no acorde a la UX/UI de lo que viene siendo un checkout.

Por ello se me ocurrió la idea de desarrollar un plugin el cual pudiera no tener en cuenta el checkout que viene por defecto en el theme adquirido por el cliente y poder usar el nuestro con el fin de incluir mejoras y funcionalidades adicionales al propio WordPress/Woocommerce.

WooPayment y su UX/UI

WooPayment se basa en el diseño actual del checkout de Shopify y el motivo es simple. Shopify al igual que WordPress son CMS muy potentes pero en Shopify independientemente del theme seleccionado para la tienda, el checkout es el mismo, entienden la importancia de la experiencia de usuario en este punto de la venta y tienen un proceso de venta altamente cualificado, cosa que en WordPress y Woocommerce no ocurre.

WooPayment es compatible con las principales pasarelas de pago

Tal cual, es compatible tanto con Stripe como con Paypal y Redsys. En su versión 2.0 la pasarela de Stripe será más estable.

Actualmente se está revisando y probando las diferentes opciones de pago de Redsys (Bizum y pago directo en la web sin salir de ella), aunque ya tenemos Stripe para ello si queremos pagar con tarjeta y no salir de la web.

WooPayment y sus actualizaciones

Con el plugin de Woopayment se está llevando un seguimiento de mejoras las cuales se pueden ver desde aquí: Changelog Woopayment

Como principales ventajas y funcionalidades que tiene WooPayment se podrían destacar en las siguientes.

WooPayment e intragración con Goolgle Api Place

Actualmente WooPayment tiene una integración con Google Api Place, el cual tiene la opción de autocompletar la dirección de envio/facturación de los campos del formulario del checkout (en el caso que el usuario no lo tenga guardado en su navegador)

• 

WooPayment y sus CTA

WooPayment cuenta también con la opción de incluir CTA en el proceso de venta del checkout, tanto un campo de texto en la parte superior del formulario como un contador (cuenta atrás) para incentivar las ventas.

También tiene opción de incluir texto justo debajo del campo de total de la venta en la columna de la derecha por si se quiere recalcar tipos de envío, pagos…

WooPayment opción 1 paso y 3 pasos

Soy partidario siempre de usar 3 pasos en un formulario de checkout pero me he encontrado en casos de ecommerce en el cual 1 paso les funcionaba mejor que 3 pasos, por lo que hemos incluido la posibilidad de que los formularios de venta se muestren todos en el mismo paso, manteniendo siempre la estructura y usabilidad del checkout.

WooPayment y su venta cruzada

Uno de los complementos que siempre me han gustado son las opciones de venta cruzada o upsell tanto en las fichas de producto como en los checkouts de manera sencilla. WooPayment incluye esta opción, posibilidad de que se puedan incluir productos que no estén en el carrito actual para incluirlos.

La funcionalidad y lógica es sencilla:

• Si el producto ya está añadido al carrito este no se mostrará como venta cruzada aunque esté habilitado para ello.
• Si el producto se elimina del carrito pero está en venta cruzada volverá a aparecer.
• Los productos de venta cruzada aparecen de manera automática en el plugin (el listado de productos de woocommerce que tenga habilitada la tienda) nosotros con ese listado marcamos que productos queremos que se muestren en la venta cruzada y cuales no, con el fin de aumentar el tiquet medio.

La recomendación es usar productos sencillos y económicos, piensa en la de paquetes de chicles que se venden en los supermercados antes de pagar…

WooPayment y sus security budgets

WooPayment contempla la posibilidad de incluir una tira de sellos de calidad en el checkout de manera sencilla, actualmente dispone de 8 sellos de calidad pre-establecidos, con opción a que puedas subir el tuyo o no mostrar ninguno (Versión 2.0)

WooPayment, diseño personalizable

Sí, en WooPayment también puedes “cambiar el diseño” de:

• Color de fondo de la columna izquierda y derecha
• Color de los textos y ernlaces
• Color de los botones

Y si no fuera suficiente también puedes editarlos desde el campo habilitado de Custom CSS dentro del mismo WooPayment.

Redirect cuando añades un producto al carrito

Normalmente esto lo solía hacer con PHP desde fuction.php con el siguiente código:

add_filter( 'woocommerce_add_to_cart_redirect', 'misha_skip_cart_redirect_checkout' );
 
function misha_skip_cart_redirect_checkout( $url ) {
    return wc_get_checkout_url();
}

TIP para el checkout: Ocultar aviso en el checkout de has añadido X producto al carrito.

Si por el motivo que sea te molesta el aviso en el checkout de “tu producto se ha añadido al carrito estilo: “xxx” has been added to you cart…

Se puede ocultar ese aviso mediante el siguiente código:

add_filter( 'wc_add_to_cart_message_html', 'misha_remove_add_to_cart_message' );
 
function misha_remove_add_to_cart_message( $message ){
	return '';
}

No me hagas la marranada de usar un display:none en los avisos de alerta porque ocultarás todos…

Campos personalizados en WooPayment

Aquí es donde mayor problema hemos tenido, ya que en muchos casos los clientes de tiendas online que han adquirido WooPayment tienen campos personalizados tipo: Incluir CIF/NIF de empresa etc etc, o unos querían incluir campo de detalles de envío, otros mostrar el segundo campo de dirección…

En este caso y en la versión 2.0 de WooPayment se incluye el campo de mostrar y ocultar los campos (Nombre compañía, segundo campo de dirección y comentarios de envío). Al fin y al cabo son los campos nativos de WordPress por lo cual podemos ocultar y mostrar de manera sencilla.

Oye, pero yo quiero incluir más campos que no son nativos de WooCommerce, ¿cómo puedo incluir campos adicionales?

En este caso hemos hecho compatible el plugin de WooPayment con el plugin de Checkout Field Editor de ThemeHigh, por el cual podrás incluir campos adicionales dentro de WooPayment.

¿Cuánto vale el plugin de WooPayment?

Actualmente WooPayment tiene un coste de 19€ (pago único) es un precio de lanzamiento muy por debajo de plugins de la competencia. Este precio se mantendrá hasta el día 17 de junio de 2020. Luego pasará a costar 59€ (pago único). Igualmente un conste muy por debajo de la competencia.

Así que ya sabes, aprovecha estos pocos días para obtener el Plugin de WooPayment por un precio muy por debajo del mercado.