Aprende a crear tablas de precios para tu web

Autor: | 2019-09-18T15:36:01+00:00 Fecha: 18/09/2019|Categorías: WordPress|Comentarios: Ningún comentario

En la era de la inmediatez, ofrecer una información concisa y visual puede marcar la diferencia a la hora de vender tus productos o servicios. Es importante encontrar una forma eficiente de mostrar las características y precios de tus servicios a tus usuarios, así como poder compararlos rápidamente.

Crear una tabla de precios para tu web es la solución. En este artículo te explicaré que es una tabla de precios y qué debes tener en cuenta a la hora de crearla. Además, aprenderás crear tu propia tabla de precios en WordPress, con plugins y sin ellos, o en una web a medida gracias a Bootstrap.

¿Vamos a ello?

 

Qué es una tabla de precios y para que se usa

Una tabla de precios no es más que una representación visual de las principales características de tus servicios o productos. La finalidad es que tus usuarios puedan hacerse una idea de ellas, compararlas y, evidentemente, mejorar la conversión.

Como vale más una imagen que mil palabras, voy a mostrarte unos ejemplos de tablas de precios bien implementadas y luego vemos el porqué.

Para el primer ejemplo, no me hace falta irme muy lejos. En nuestra web utilizamos tablas de precios para cada producto que ofrecemos. Y para este ejemplo he usado la tabla de precios de los servidores VPS SSD:

tabla de precios hosting VPS SSD

Como puedes ver, la tabla muestra los distintos paquetes ofrecidos para este tipo de servidores con el precio, las características destacables de cada uno para que se puedan comparar de forma rápida y un botón de llamada a la acción para que el usuario pueda comprar directamente el servicio.

En este caso concreto, al pasar por encima de un paquete con el ratón, este queda destacado en color azul cielo.

Para el segundo ejemplo, te traigo la tabla de precios de la página de venta de un conocido plugin de WordPress:

tabla precios plugin wordpress

Mucho más escueta que la anterior, la funcionalidad es la misma, te permite comparar de un vistazo sus planes y escoger el que mejor se adapte a tus necesidades.

En este caso, uno de los planes se encuentra ya destacado como “El más popular”. Es una práctica común en este tipo de tablas y aprovecha el efecto ancla para persuadir a los usuarios a comprar ese paquete en concreto.

 

4 puntos clave para crear una tabla de precios en tu web

Para tener éxito en la creación de tablas de precios, debes tener en cuenta cuatro criterios clave. En esta sección, te explicaré qué es lo que hace que estos puntos sean tan importantes y la mejor forma de implementarlos en tu tabla de precios.

1. Resumir las opciones con claridad

Una tabla de precios es tan buena como la información que muestra, por lo que es importante delimitar claramente las opciones que ofreceremos antes de crear la tabla.

Mi recomendación es hacer una lista de las características clave que cada plan proporciona en comparación con los demás, manteniendo el enfoque en los aspectos en los que los clientes podrían estar más interesados.

Por ejemplo, en el caso de una empresa de hosting como Raiola Networks, centra sus tablas de precios en los recursos que proporciona cada plan. Es importante evitar, en la medida de lo posible, los términos técnicos y centrarse en sus beneficios más fácilmente comprensibles.

2. Escoge buenos nombres para tus planes

Una vez que conozcas la información que cada uno de tus planes incluirá, es el momento de buscarles un nombre apropiado. Es fácil caer en la tentación de utilizar nombres más o menos estándar. Y, si bien pueden resultar perfectamente apropiados para los servicios que ofreces, posiblemente estés perdiendo la oportunidad de utilizar ese nombre para dar la primera pista a tu cliente sobre lo que le ofreces en cada plan.

Veamos un ejemplo muy claro:

tabla de precios paquetes estandar

En este primer caso, tenemos nombres de planes para un servicio que podríamos llamar estándar. Por un lado no le estamos dando ninguna información al cliente y, por otro lado, nos obliga a clarificar lo que ofrece el servicio, justo debajo.

tablas de precios nombres

En este segundo caso, solo con el título el cliente ya sabe lo que va a comprar. No necesita más aclaraciones.

¿Ves por dónde voy? Aprovecha los nombres de tus planes.

3. Resalta tus mejores ofertas

Resaltar un plan en particular en tu tabla de precios puede ser una muy buena idea. Idealmente, este plan debería proporcionar la mejor relación calidad-precio o rendimiento.

Con esto conseguirás dos cosas.

La primera, como comenté anteriormente, es mejorar la conversión de ese plan en concreto destacándolo por encima de los demás.

La segunda, guiar a tus potenciales clientes con pocos conocimientos de lo que necesitan hacia un plan adecuado para ellos.

Dos pájaros de un tiro.

4. Ofrece información completa

Mantener tus tablas de precios claras y concisas es la mejor forma de asegurarte de que tus visitantes no se sobrecarguen de información y decidan buscar en otro sitio lo que necesitan.

Sin embargo, algunos de tus clientes podrían preferir examinar todos los detalles antes de tomar una decisión, especialmente para productos más complejos.

La mejor manera de abordar este problema es enlazar tus tablas de precios con alternativas más completas. Por ejemplo, incluyendo un enlace hacia una página de producto o de servicios donde expongas toda la información completa sobre el mismo.

Aclarado todo esto, veamos cómo crear una tabla de precios para tu página web según la tecnología que uses o tus preferencias.

En concreto, veremos cómo crear una tabla de precios para una web a medida con Bootstrap, con plugins para WordPress y con un maquetador visual sobre WordPress como Elementor.

 

Crear una pricing table con Bootstrap para tu web a medida

Si tienes una web a medida, la forma más sencilla de implementar una tabla de precios es utilizando Bootstrap y sus librerías CSS. Para hacer esto tienes que tener unos conocimientos mínimos de desarrollo web o al menos debes saber dónde tienes que colocar cada cosa.

En este caso, parto de que ya tengo Bootstrap instalado y puedo utilizar el código que te voy a enseñar a continuación.

Por un lado tengo el HTML que deberás introducir en el código de tu web, justo en el lugar donde quieras mostrar la tabla de precios:

Esto creará la estructura de tu tabla.

Y ahora el segundo paso: darle los estilos mediante CSS.

El código que usarás es el siguiente:

El código CSS lo puedes añadir como un archivo nuevo y llamarlo desde el <head> de tu web, como cualquier otro archivo de este tipo, o puedes añadir el código directamente a tu archivo CSS ya existente. Yo te recomiendo la segunda opción para no hacer llamadas extra al servidor.

Una vez implementado el código, tu tabla de precios debería lucir así de bien:

pricing tables bootstrap

En el siguiente enlace puedes ver el código original, su autor y una preview de cómo queda. Además, puedes jugar con el código e ir viendo cóomo queda al vuelo antes de implementarlo en tu web.

 

Los mejores plugins de tablas de precios para WordPress

Vamos ahora con la implementación mediante plugins sobre WordPress.

Antes de nada, en el repositorio de WordPress hay cientos de plugins para tablas de precios. Yo te voy a recomendar dos que para mí son la mejor opción, tanto en su versión gratuita, como de pago.

El primero de ellos es Pricing Table de Pickplugins.

pricing tabless wordpress

Como siempre, lo primero es descargar e instalar el plugin. Puedes descargarlo desde este enlace o directamente desde el repositorio oficial mediante la opción de añadir plugin de tu WordPress.

Una vez instalado y activado, aparecerá una nueva opción en tu panel de administración de WordPress:

administracion tabla de precios wordpress

Evidentemente, el primer paso es «Add Pricing Table».

Esto te llevará a las opciones para crear tu primera tabla.

Empieza por los datos de la tabla. En primer lugar, selecciona la cantidad de filas y columnas que necesitas:

prueba tabla de precios

 

Aquí debo destacar que hay 3 filas que son fijas: la cabecera, el precio y el botón de llamada a la acción. Así que si eliges 7 filas, la tabla tendrá esas 3 fijas más 4 filas de datos. Ten esto en cuenta al elegir las filas totales de tu tabla.

Un detalle: para que se muestren los cambios debes guardar la tabla, ya sea publicándola o guardándola como borrador.

Una vez elegido esto, ya puedes pasar a rellenar los datos de tu tabla, un poco más abajo:

Datos tabla de precios

Justo debajo, podrás ver cómo va quedando tu tabla cuando la guardes.

vista previa tabla de precios wordpress

Tu siguiente paso debería ser la pestaña Style. No me voy a detener mucho en este punto.

En este apartado encontrarás todas las opciones gráficas para darle estilos a tu tabla. Son muy simples e intuitivas. Solo debes jugar un poco para conseguir un diseño a tu gusto.

Entre otras, podrás elegir el orden de los datos, algún diseño predeterminado, imagen de fondo si la quieres, etc.

Cuando tengas la tabla a tu gusto y la hayas publicado, puedes pasar al apartado shortcode.

Tabla de precios shortcode

Simplemente, copia el shortcode y pégalo en tu contenido. Ya tienes tu tabla de precios funcionando como verás en la siguiente imagen:

tablas de precios en wordpress

Seguro que la tuya queda mucho mejor que la mía…

Si necesitas más opciones de configuración o quieres tener una gran variedad de plantillas predeterminadas, puedes comprar la versión premium. En el momento en que escribo estas líneas, está en oferta por 5$ aunque su precio normal son 15$.

Vamos con la segunda opción que quiero mostrarte.

El plugin se llama Responsive Pricing Table de WP Darko y, como el anterior, lo puedes descargar desde el enlace o desde el repositorio oficial, como prefieras.

pricing tables plugin wordpress

Una vez descargado e instalado, verás una nueva opción en tu panel de administración muy similar a lo que ocurría en el caso anterior.

responsive pricing tables

Por supuesto, no tendrás ninguna tabla creada, así que vamos a crear la primera con “Add New”.

En este caso, deberás introducir tus planes uno a uno, pero no te preocupes, es muy intuitivo. Busca el botón de “Add a pricing plan”.

Tabla de precios plugin de wordpress

Y te aparecerá la pantalla para introducir todos los campos:

responsive pricing table wordpress

Rellenar los campos es muy sencillo. Sólo quiero destacar un par de puntos.

En la parte inferior, puedes activar que el plan se muestre destacado (¿te acuerdas de lo que hablamos antes?), mostrar u ocultar la moneda, añadir una clase CSS para luego trabajarla aparte o elegir el color si vas a destacar ese plan.

El segundo punto es el botón “Clone” que tienes arriba a la derecha. Si tus planes son muy parecidos, los puedes clonar, modificar lo necesario y agilizar así el proceso.

Una vez publicada la tabla, en el sidebar de la derecha te aparecerá el shortcode para añadir la tabla a tu contenido. Lo mismo que en el caso anterior, solo tienes que copiar y pegar.

shortcode responsive pricing tables

Un último detalle, en el mismo sidebar, arriba tienes un par de opciones extra. El comportamiento al hacer clic en el botón de llamada a la acción (misma página/página nueva) y la moneda que quieres usar.

opciones tablas de precios

Una vez pegado el shortcode en tu contenido, ya tienes tabla de precios.

tablas de precios responsive

Como en el caso anterior, este plugin también ofrece una versión premium de pago. Obtendrás algunas opciones extra y, sobre todo, más plantillas para usar en tus tablas. El precio, 19$ en pago único. Asumible.

 

Crea tu tabla de precios para WordPress sin plugins

Llegamos al último método: usaremos un maquetador visual como Elementor para crear una tabla de precios. Eso sí, necesitarás Elementor Pro pues la versión gratuita no ofrece esta funcionalidad.

La otra opción es que dispongas de algún pack de complementos como el Essential Addons for Elementor, que añade nuevas funcionalidades a la versión gratuita de Elementor.

Una vez aclarado esto, añadir una tabla de precios a tu web con Elementor es muy sencillo.

Edita una página o artículo existente o crea uno nuevo.

Una vez en la interfaz de Elementor, añade un nuevo elemento con el botón más.

tablas de precios elementor

Selecciona las columnas que necesites para tu tabla de precios. En mi caso, voy a usar tres.

elementor pricing tables

Y ya con las columnas creadas, solo necesitas arrastrar el componente de la tabla de precios a cada columna.

widget pricing table elementor

Ahora que ya tienes los planes creados, puedes editarlos individualmente para elegir nombre, precio, características o botón de llamada a la acción mediante el formulario que aparece al seleccionar cada uno en la barra lateral izquierda.

pricing tables options

Una vez rellenadas las opciones, publica tu página o artículo y disfruta de tu nueva y flamante tabla de precios. ¡A vender!

tabla de precios plugin wordpress

 

Conclusión

Una tabla de precios te ayudará a mostrar tus productos y servicios de una forma más visual, permitiendo así comparar fácilmente entre ellos a tus usuarios.

Además, con el botón de llamada a la acción mejorarás tus conversiones.

Como has visto en este artículo, su creación e implementación son muy sencillos y variarán en función de cómo esté montada tu página web.

Si tu web funciona con WordPress hay infinidad de plugins disponibles en el mercado para ello. Yo te recomiendo utilizar uno de los que te he presentado en este artículo y me decantaría por uno o por otro según tus preferencias a la hora de crear las tablas, todos los datos a la vez o plan a plan.

Si además de WordPress, usas un maquetador visual como Elementor, aunque sea otro, infórmate de si incorpora esta funcionalidad porque puede ahorrarte instalar otro plugin más.

Para webs a medida, nada que no pueda solucionarse con un poco de HTML y CSS gracias a Bootstrap y sus librerías.

¿Y tú, ya utilizas tablas de precios en tu web? ¿Conoces otra forma de implementarlas? Escríbelo en un comentario.

[Total: 4 Promedio: 4]
Santi Centelles
Me apasionan el desarrollo web, el SEO y los videojuegos, no siempre en ese orden. Me gusta escribir sobre ello y compartir conocimientos con los demás.

Utilizamos cookies propias y de terceros para obtener información estadística, mostrar publicidad personalizada a través del análisis de tu navegación, así como para interactuar en redes sociales. Si continúas navegando, consideramos que aceptas nuestra Política de cookies. ACEPTAR

Aviso de cookies