Índice de contenidos
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 o Elementor.
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, OptimizePress o LeadPages.
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.
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.
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.
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.
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.
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.
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.
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: