Vitamina el checkout de MemberPress: ideas para mejorarlo

El checkout de MemberPress no es el mejor orientado a la conversión y si lo dejamos tal y como viene por defecto es bastante soso, por lo que una pregunta bastante común es… ¿Cómo puedo mejorar el checkout de MemberPress?

Por supuesto, el tema que estés utilizando en la web va a influir de forma directa en el aspecto que tenga la página de checkout, y dependiendo también de éste te costará más o menos —y necesitarás saber más o menos código— darle un lavado de cara. En este post vamos a contarte las posibilidades que ofrece y algunas ideas para mejorarlo. ¡Quédate y comparte con nosotros si tienes alguna propuesta más!

El diseño del checkout de MemberPress por defecto

El diseño estándar del checkout de MemberPress se compone de dos páginas (o dos pasos), y se mostrará si tienes esta configuración en MemberPress > Opciones > Cuenta:

En este caso, la página de compra se caracterizará por volcar en una única columna a ancho completo todos los campos necesarios para generar el usuario, en dirección vertical. La página se compondrá por tanto del header o cabecera que tenga la web, el cuerpo central con el título de la membresía + texto de la membresía + Precio + campos y botón, y el footer de la web. Al pulsar en el botón, el cliente se dirige a la última página (segundo paso) para introducir los datos de su tarjeta de crédito o PayPal y terminar la compra: es en esta parte donde MemberPress procedería a crear la transacción, que asociará al usuario para darle acceso al contenido.

Este checkout se volvía un problema para los clientes menos acostumbrados a realizar compras online, ya que algunos creían que con cubrir los campos del paso 1 ya era suficiente y en vez de cubrir los datos de pago del paso 2, no completaban la compra y cerraban directamente la pestaña. Esto causaba que en la plataforma sí se crease el usuario, pero no se le asociase ninguna transacción al no llegar a producirse el cobro, y el cliente no tenía acceso al contenido.

Así que para alegría y disfrute de muchos de nosotros llegó el día en que MemberPress sacó en su versión 1.4 la posibilidad de ofrecer el checkout en una única página. ¡Eureka! Para activar el checkout en un solo paso debes dejar así configurada la pantalla MemberPress > Opciones > Cuenta:

Lo que esto provoca es que, en una misma página, se presenten todos los campos (incluidos los relacionados al método de pago):

Por supuesto, el número de campos todavía puede crecer: si incluyes cupones de descuento, si prefieres que se muestre el indicador de fortaleza de contraseña, etc. Tanto en un checkout como en otro, el aspecto es bastante soso. Si queremos que el proceso de compra sea lo más amigable posible para nuestros clientes y que las páginas que componen el flujo de compra sean atractivas, tendremos que meterle mano al diseño.

¿Quieres ver algunas ideas de lo que podemos hacer para mejorarlo? ¡Vamos allá!

Cómo rediseñar el checkout de MemberPress (sin código)

Esto puedes hacerlo con Gutenberg o cualquier maquetador visual como Elementor o Beaver Builder. Si vas a hacerlo con cualquiera de estos dos últimos, tendrás que activar su uso en Membresías antes de nada:

Vete ahora a MemberPress > Membresías y pulsa en Editar. Vete al final de la página y en la caja “Opciones de Membresía” haz clic en el enlace “Shortcodes de Membresía“:

Al hacer clic se te desplegarán varios shortcodes con sus respectivas descripciones, indicando para qué sirve cada uno de ellos. En nuestro caso de ejemplo, el shortcode a utilizar sería este (el segundo):

[mepr-membership-registration-form]

Una vez tengas a buen recaudo ese código, vete a activar el page builder que vayas a utilizar para poder maquetar la página de esa membresía en concreto (para este ejemplo utilizaremos Elementor):

Ahora puedes introducir en la página tantos elementos como quieras: imágenes, iconos, vídeos, separadores, más texto… Lo único que es IM – PRES – CIN – DI – BLE, y que tiene que estar sí o sí en alguna parte de la misma, es el shortcode que corresponde al checkout en sí:

Algunos ejemplos:

• Checkout simple de MemberPress sin cabecera ni footer, distribuido en 2 columnas con imagen a la izquierda. Una maquetación muy básica sin dolores de cabeza que puede resultarte sencillo de replicar, aunque el diseño no sea lo tuyo.

• Checkout simple de MemberPress sin cabecera ni footer distribuido en dos columnas y con imagen de fondo: imagen a tamaño completo ocupando toda la columna izquierda, y encabezado + textos descriptivo + checkout en la columna derecha. Una maquetación un poco más elaborada en la que, por el momento, no hemos tocado nada de código para hacerla.

Ya parece que va cogiendo forma, ¿verdad?

Aquí tienes un vídeo sobre cómo puedes editar el checkout de MemberPress con Elementor:

Pero tal vez tu gran dolor de cabeza sea que todos los campos se muestren en una única columna, y quieras probar a agruparlos y mostrarlos en columnas. Eso ayudaría a que visualmente la página no se hiciese tan larga. ¿Se puede hacer?

Sí, se puede hacer. Pero aquí ya entramos en código y necesitamos tener ciertos conocimientos de HTML y CSS para manipular esa colocación. ¿Te apetece arremangarte? Pues vamos allá.

Cómo rediseñar el checkout de MemberPress (con código)

• Checkout de MemberPress manipulando la estética de los campos, presentándolo tipo tarjetero o ficha. Es posible jugar a reordenar campos si hacemos uso de CSS Grid —si nos preocupan los navegadores antiguos podremos hacer una adaptación para ellos utilizando flexbox—.

Otra posibilidad también sería sacar fuera de la tarjeta el título y la descripción de la membresía, de forma que lo que llame más la atención del usuario sea el propio checkout:

O aquí otra variación, utilizando como fondo un degradado y situando la información sobre la membresía de forma esquemática en la columna izquierda del tarjetero:

¿Qué te parecen estos re-diseños del checkout de MemberPress? Ya ves que, en función de tus conocimientos, puedes llegar a darle una estética muy atractiva a tu página de membresía para que la gente realice el proceso de compra de forma cómoda.

Dinos en los comentarios qué te parecen estas posibilidades, y si en algún momento te habías cuestionado el cómo impulsar el diseño de la página de compra de MemberPress. ¿Te interesaría conseguir el código CSS necesario para tener esa distribución de campos? Pídenoslos en los comentarios y si alguno de los diseños llega a 10 peticiones, entonces dejaremos el código para descargar en este mismo post + plantilla de Elementor con el diseño.

(2 votos, promedio: 5,00 de 5)