¿Me ayudas a llegar a más gente?

Vuelvo a estar al pie del cañón con unas ganas inmensas de seguir compartiendo contenido en el blog después de un parón navideño corto, pero intenso.

Espero que tú también hayas tenido tiempo de recargar pilas y de coger algún kilo de más. Menudos atracones 🙂

Hoy quiero explicarte cómo puedes crear una página de ventas espectacular usando WooCommerce y Divi.

Cuando se habla de crear o configurar páginas de ventas, pensamos directamente en herramientas como Thrive Content Builder, OptimizePressLeadPages.

Son excelentes herramientas, sin duda. Pero no solo sirven para crear páginas de venta, sino que también incluyen multitud de funciones adicionales que en muchos casos jamas vamos a usar y además todas ellas son de pago.

A veces ocurre que solo nos interesa crear una página de ventas para el producto estrella de nuestro catálogo o directamente solo vendemos 2 o 3 tipos de producto en nuestra tienda y no queremos mostrar una simple ficha de producto, sino que queremos diseñar una página de ventas personalizada para cada uno.

Además, en estos casos suele ocurrir también que el producto en cuestión se vende de forma individual, es decir, el cliente solo compra una unidad, por ejemplo: productos de coste elevado (una joya, un reloj o un smartphone), un producto personalizado, un curso, etc

Pues bien, si ese es tu caso, puedes crearte una página de ventas usando WooCommerce y un tema premium que incluya un constructor de páginas (hoy día el 99% de los temas premium lo incluyen). Y obtener un resultado que nada tiene que envidiarle a las páginas creadas con Thrive Content Builder, OptimizePressLeadPages.

WooCommerce + Divi. Construye páginas de venta personalizadas para tus productos.

En este artículo me he decantado por el tema Divi para hacer el diseño de la página de ventas, pero en realidad, lo que voy a mostrar se puede aplicar a cualquier constructor de páginas de cualquier tema. Más o menos funcionan todos igual.

Antes de meterme de lleno en el tutorial, quiero dejar claro la diferencia entre una página de ventas y una ficha de producto.

La ficha de un producto de cualquier tienda online no es más que una página en la que se muestra una descripción del producto, sus características y ventajas, una foto principal del mismo junto con una galería (si hay más imágenes disponibles), el precio y un botón de añadir al carro.

Además, la ficha de producto suele tener un apartado de productos relacionados, una sección de opiniones de clientes que ya han comprado el producto y un menú para acceder a las diferentes secciones de la tienda.

Normalmente el cliente que entra a una ficha de producto ya ha echado un vistazo antes por diferentes secciones de la tienda hasta llegar ahí, ya sabe lo que quiere y está dispuesto a pagar por ello. (Si quieres conocer mi sistema para mejorar las conversiones de las fichas de producto, te recomiendo que hagas clic aquí).

Sin embargo, una página de ventas va mucho más allá. No suele haber un paso previo del cliente por la tienda, ni por otros productos, digamos que el cliente entra “en frío” directamente a ella.

En esta página no sólo tienes que presentarle el producto sino que tienes que acabar convenciéndole de que DESEE comprarlo. Además, la página de ventas no debe tener “puntos de fuga” -menús que lleven hacia otras páginas o enlaces a productos relacionados- y el proceso de compra debe ser mucho más simple. Ya no va a hacer falta pasar por el carro de la compra.

Creando el diseño de la página de ventas con Divi.

La gran ventaja de hacer el diseño de la página de ventas del producto usando el constructor de páginas de Divi, es que tienes libertad para hacer el diseño que desees (igual que si estuvieses diseñando la Home de tu tienda) y además optimizarlo para la venta.

Recuerda que estás trabajando sobre una página, no sobre una ficha de producto.

En la ficha de producto, no puedes modificar la estructura del diseño, ya que viene definida por la plantilla que estés usando.

Para que te hagas una idea de cómo sería la estructura habitual de una página de ventas, a continuación te muestro un esquema muy simple que te ayudará a entenderlo.

Estructura de página de ventas en WooCommerce

Cada fila del esquema anterior se identifica con una sección bien diferenciada de la página de ventas.

Todas tienen una función y todas son importantes.

Esta entrada no va de cómo redactar páginas de venta, sino de cómo crear su diseño e integrarlas con un producto de WooCommerce. Para redactar buenos textos para tu página de ventas, te recomiendo que visites el blog de Maïder Tomasena, en el que encontrarás mucha información sobre ello.

Para diseñar la página de ventas de tu producto, lo primero que tienes que hacer -obviamente- es crear una página nueva, desde el menú lateral del panel de administración, clicando en “Paginas > Añadir nueva“.

Una vez dentro de la página de edición, debes hacer clic en el botón “Usar el constructor Divi” para poder activar el constructor de páginas de Divi y empezar a trabajar en el diseño.

Después de eso tendrás que seleccionar la plantilla de página “Blank Page” para trabajar sobre una página en blanco; sin menús, sin pie de página y sin enlaces a otros productos. Con esto eliminas los posibles “puntos de fuga” para que el visitante solo tenga dos posibles salidas; terminar comprando o cerrar la página desde el navegador.

Cambiar plantilla página divi woocommerce

Bien, ya tienes tu página en blanco. Ahora toca empezar a trabajar en el diseño usando el constructor de páginas de Divi y siguiendo la estructura de página de ventas que te he mostrado en la imagen de arriba.

Como supongo que ya sabrás -y si no lo sabes, te lo explico ahora-, todos los constructores de páginas funcionan con secciones, filas, columnas y dentro de estás, los elementos que quieras mostrar; texto, imágenes, vídeos, presentaciones, galerías, tablas de precios, testimonios, etc

El funcionamiento del constructor es muy sencillo de entender.

Consiste en añadir una sección para cada apartado de la página de ventas (una para el nombre del producto y titular, otra para empatizar con el visitante, otra para las características y beneficios y así con todas) y dentro de cada sección insertas las filas que necesites y cada una de ellas con el número de columnas que desees para después añadir el contenido dentro.

Crear estructura de página de ventas Divi

También puedes configurar la anchura de cada columna.

Por ejemplo, para la fila de “Características y beneficios del producto” puedes configurar 2 columnas; una para insertar la imagen principal del producto y otra para insertar el listados de características.

Diseñar página de ventas de productos en WooCommerce con Divi

La forma en que configures las columnas, su ancho y los elementos o módulos que insertes dentro de estas, dependen del aspecto que quieras darle a tu página de ventas. El resultado final que se obtenga ya dependerá de la imaginación y los gustos de cada uno.

Para darte control total sobre el diseño de tu página de ventas, el constructor de Divi incluye un panel de configuración de ajustes del diseño de cada sección, fila y módulo. Este panel de configuración te permite definir hasta el más mínimo detalle de tu diseño.

Configurar color fondo sección Divi

Por ejemplo, si quieres que la sección donde vas a añadir el texto para empatizar con el cliente, tenga un color de fondo, una tipografía y un color de fuente diferente del resto de secciones, podrás hacerlo usando estos paneles de configuración del diseño.

Ajustes diseño textos Divi página ventas

Yo recomiendo empezar cada sección con un subtítulo h2 o h3 que sirva de introducción de lo que vas a contar en ese apartado y a continuación añadir el texto que tengas preparado.

También es interesante diferenciar unas secciones de otras ajustando un color de fondo diferente a través del panel de ajustes de diseño del que te he hablado antes. El objetivo de esto es no cansar al lector, hacerle la lectura lo más cómoda posible e ir llamando su atención constantemente para que siga leyendo hasta el final.

Cuando ya hayas configurado la estructura y el diseño de todas las sección de la página, es momento de insertar los botones de compra del producto. Normalmente uno a continuación de los testimonios y otro al final de la página de ventas.

Para hacer esto debes usar un módulo de texto dentro de la columna que te interese y pegar el siguiente shortcode de WooCommerce:

Donde dice “ID_del producto” deberás sustituirlo por el número ID del producto que quieras asociar a la página de venta.

El ID del producto lo podrás ver desde la sección “Productos” situando el cursor del ratón encima del producto en cuestión. Verás que el ID es un número de color gris que se muestra justo debajo del nombre del producto.

Obviamente antes debes de haber creado un producto nuevo en WooCommerce con el nombre, precio y todos los datos referentes al producto que desees vender.

Resultado final de la página de ventas.

Aquí te muestro un ejemplo de cómo quedaría una página de ventas para un producto WooCommerce (en este caso un reloj) hecha con Divi.

Ejemplo de página de ventas WooCommerce y Divi

Como ves, he mantenido la estructura habitual de la página de ventas cambiando el color de fondo de cada sección contigua para poder diferenciarlas fácilmente.

Esto es sólo un ejemplo. En realidad puedes crear cualquier tipo de diseño que se te pase por la cabeza.

Y si lo que quieres es crear una página de ventas para un curso, ebook o cualquier producto no físico, el proceso es exactamente igual, solo que cuando vayas a crear el producto en WooCommerce, deberás marcarlo como “Virtual“.

Modificando el proceso de compra de WooCommerce.

Perfecto. Ya tienes la página de venta de tu producto terminada.

Lo siguiente que tienes que hacer es sustituir el texto del botón de compra que muestra el shortcode que acabas de insertar.

Por defecto, el texto que aparecerá será “Añadir al carro“, pero es una página de venta y no debería haber carro, así que ese texto no tiene ningún sentido.

Para definir un texto personalizado para tu botón de compra, basta con usar este código:

Este código cambiará el texto “Añadir al carro” por el de “Comprar” (mucho más adecuado), pero si quieres que muestre otro, simplemente sustituye donde dice “Comprar” por el texto que quieras mostrar. (Siempre entre comillas).

Ya podríamos decir que el trabajo está hecho, pero falta el paso más importante.

Si te fijas, cuando haces clic en el botón de “Comprar“, te lleva a la página de carrito y eso no nos interesa.

Queremos llevar al cliente directamente a la página de pago, puesto que el paso previo por el carrito es una posible vía de escape y de que abandone la compra.

Para simplificar el proceso de compra y conseguir que el cliente vaya directamente a la página de pago deberás usar el siguiente código snippet:

Si después de añadir el código, sigue sin funcionar, prueba desactivando la opción de WooCommerce de añadir al carro con AJAX. Para hacer esto, entra en “WooCommerce > Ajustes > Productos > Mostrar” y desactiva la la opción “Habilitar AJAX…”.

Por último, queda eliminar todos los posibles “puntos de fuga” de la página de pago. Esto es clave porque si ya has hecho el 90% del trabajo y la persona que entra ya está casi convencida de comprar, sería “muy doloroso” perder esa venta justo en último paso y todo por algo que depende directamente de ti.

Por tanto, lo que tienes que hacer es eliminar el menú de la cabecera, la sección del footer y el sidebar lateral. Todos incluyen enlaces hacia fuera que pueden distraer la atención del comprador y hacerte perder la venta.

Ocultar estas secciones y crear una página de pago totalmente optimizada para la conversión es muy sencillo con Divi. Simplemente tienes que entrar en el editor de la página de pago (la página de pago que crea WooCommerce por defecto es la de “Finalizar compra“) y configurar los siguientes ajustes:

  • En Diseño de página selecciona la opción “Ancho completo“. Esto evitará que se muestre el sidebar lateral.
    Optimizar página de pago WooCommerce con Divi
  • En Plantilla selecciona la opción “Blank Page“. Con esto eliminaremos el header y footer de la página de pago.

Después de esto, puedes usar el siguiente código snippet para ocultar también el botón de “Seguir comprando” que se muestra al entrar por primera vez en la página de pago y que podría hacer que el comprador abandonase la página.

[sociallocker id=”1966″]

[/sociallocker]

Cuando hayas configurado los ajustes anteriores, guarda los cambios y vuelve a cargar la página de pago para ver el nuevo aspecto.

A continuación te muestro el antes y el después del diseño de la página de pago usando el tema Divi.

Eliminar botón seguir comprando WooCommerce

Como puedes ver el resultado final es ¡perfecto! Puesto que cumple con las premisas que nos hemos marcado; conseguir una página de pago limpia y sin “puntos de fuga”.

Ya no se muestra el menú de la cabecera, ni el footer, ni el sidebar lateral, ni tampoco el botón de “Seguir comprando”. Con lo cual, el cliente ya solo puede terminar haciendo clic en el botón “Realizar pedido” y haciendo el pago o -en el peor de los casos- cerrando la ventana del navegador.

Resumiendo.

Las posibilidades que presta WooCommerce y la plantilla Divi para crear páginas de venta son inmensas y los resultados espectaculares. Ya lo has visto en el ejemplo anterior.

Pero sin duda, la gran ventaja es que aunque uses WooCommerce solo para páginas de ventas, seguirás disfrutando de todas sus funcionalidades que incluye; informe de ventas, integración con multitud de pasarelas de pago, facturas, descuentos, etc y todo ello sin que el cliente note la más mínima diferencia.


Solo quería avisarte de que este artículo contiene enlaces de afiliado. Eso quiere decir que si decides comprar el tema Divi con el que he hecho este tutorial (y que yo mismo utilizo), yo recibiré una comisión sin coste extra para ti.

No me voy a hacer rico con ello, pero con este pequeño gesto me ayudarás a seguir generando contenido gratuito y de calidad en Woodemia. ¡Gracias! 😉

Si te ha gustado, por favor ayúdame a difundirlo. ¡Gracias!

Uso de cookies

Este sitio web utiliza cookies para que disfrutes de una mejor experiencia de usuario. Si continúas navegando estarás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, clica en el enlace para mayor información.

ACEPTAR
Aviso de cookies