¿Tiene una lista de precios en su sitio web? Estos precios podrían ser para servicios como cuidado de césped o podrían ser paquetes do software. Desde el mundo de la tecnología hasta estudios de Yoga, la mayoría de las compañías podrían usar tablas de precios para una mejor representación de lo que ofrecen. La forma principal de hacer esto es pensar en uno de los plugins de tablas de precios de WordPress, luego implementar uno a su sitio web.

Pero Surge la Pregunta, ¿Por Qué Tener una Tabla de Precios Es Tan Importante?

La respuesta a esta pregunta podría parecer obvia (uno quiere mejorar las conversiones, ¿no?) pero es bueno entender la razón detrás de las tablas de precio. ¿Por qué un plugin de tablas de precio es más efectivo para hacer una venta que una lista regular con viñetas, un párrafo o incluso una imagen?

Tener una bonita página de precios puede hacer que sus servicios reluzcan e incrementen las conversiones. Chequee estos plugins de tabla de precios de WordPress. 🛒Click to Tweet

Qué Buscar en un Plugin de Tabla de Precios

Ahora que sabemos los beneficios de tener un plugin de tabla de precios de WordPress, veamos algunas de las características que debería querer:

Podríamos hablar de docenas de funciones que tendrían sentido en las tablas de precios, pero este es un buen comienzo para empezar con lo esencial.

Los Mejores Plugins de Tablas de Precios de WordPress

  1. Responsive Pricing Table by WP Darko
  2. Go Pricing
  3. Pricing Tables WordPress Plugin – Easy Pricing Tables
  4. Pricing Table by Supsystic
  5. CSS3 Responsive WordPress Compare Pricing Tables
  6. ARPrice – Responsive WordPress Pricing Table Plugin
  7. WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress
  8. Pricing Table – Price list, Price Table, Easy Pricing Table
  9. WRC Pricing Tables
  10. Cómo crear una tabla de precios en WordPress desde cero

Algunos de los mejores plugins de tabla de precios pueden ser usados sin costo alguno, mientras que otros no cuentan con opciones gratuitas. Habiendo dicho esto, todos los plugins a continuación merecen un lugar en esta lista, y algunos de estos tienen funciones únicas que son excelentes para algunas industrias o compañías en específico.

1. Responsive Pricing Table by WP Darko

El Responsive Pricing Table es uno de los plugins más intuitivos y lleno de opciones para hacer tablas de precios. Este provee una excelente versión gratuita sin limitaciones algunas en su capacidad de agregar cuántos planes piensa agregar o cuántas tablas piensa crear para sus sitios. Lo que sí puede hacer, es conseguir la versión premium para tener acceso a mejores opciones como skins y un “ecualizador” para hacer que todas las alturas de las columnas sean exactamente iguales.

Responsive Pricing Table WordPress Plugin

Responsive Pricing Table WordPress Plugin

Las tablas de precios que construye son completadas con simples campos y botones de backend. Por ejemplo, algunos de los campos incluidos que puede utilizar incluyen precios, descripciones, títulos de los planes, y casillas de iconos. Algunos de los botones personalizados permiten el uso de enlaces que manden a lugares como Stripe y PayPal, mientras que las clases personalizadas de CSS sin duda alguna serán de ayuda para desarrolladores avanzados.

Costo

Cuentan con un plan gratuito.

Puede obtener el plugin premium por $19 en un sitio o $49 por sitios ilimitados.

Darko Developers venden otros plugins, así que puede obtener todos estos por el precio de $79. Esto podría ser útil para algunas compañías.

Características que hacen que Responsive Pricing Table sea una buena elección

2. Go Pricing

La app de Go Pricing no cuenta con una versión gratuita, pero si cuenta con miles de ventas y algunas excelentes reseñas en el marketplace de CodeCanyon. Sin mencionar, tan sólo cuesta $27 para obtener uno de los mejores plugins de tablas de precios en el mercado.

Go Pricing - WordPress Responsive Pricing Tables

Go Pricing – WordPress Responsive Pricing Tables

¿Qué hace tan especial al plugin de Go Pricing? Para empezar, tiene un excelente diseño en sus planes de precios con colores modernos y bastantes espacios en blanco así que no lucirá atestado. También puede elegir de una gran colección de temas, algunos de los cuales están hechos para ciertas industrias. También nos encanta que el plugin se integra con varios page builders y tiene shortcodes para asegurar que nadie tenga que ser un genio de la programación para hacer tablas de precios.

Costo

Una sola tarifa de $27 con la opción de extender el soporte a un año por $8.25.

Características que hacen que Go Pricing sea una buena elección

3. Pricing Tables WordPress Plugin – Easy Pricing Tables

Si está interesado en una comparación limpia y en tablas de precios simples, entonces el Pricing Tables WordPress Plugin parece ser la mejor opción para usted. Viene con un plan gratuito y premium, comenzando desde los $29 por año por un sitio y llegando hasta $99 por año por sitios ilimitados. Algunas de las funciones premium comienzan a lucir bastante bien, incluyendo un add-on para WooCommerce e integración con Google Analytics.

Pricing Tables WordPress Plugin – Easy Pricing Tables

Pricing Tables WordPress Plugin – Easy Pricing Tables

Algunas de las otras integraciones para las versiones premium incluyen add-ons para Easy Digital Downloads, Stripe, y Pricing Toggle. Y lo mejor, es que podrá esperar empezar el proceso de diseño con 10 diseños prefabricados. Como mencioné anteriormente, este es uno de los plugins de tabla de precios más simples, así que, nos gusta para aquellos que no quieran elementos como animaciones y gráficas.

Costo

El plugin core es gratuito.

El plugin premium comienza desde los $29 al año por un sitio, $59 por año para cinco sitios, y $99 al año para sitios ilimitados.

Características que hacen que Easy Pricing Tables sea una buena elección

4. Pricing Table by Supsystic

El equipo de desarrollo de Supsystic es conocido por hacer varios tipos de plugins para galerías de fotos, popups, tablas de datos y más. Pero ahora hablaremos del Pricing Table plugin, que es ofrecido como una solución gratuita con una amplia variedad de funciones para que pruebe. De hecho, la versión gratuita del plugin tiene funciones para plantillas preestablecidas, animaciones flotantes y personalización de botones. Incluso puede importar y exportar la información de su tabla con facilidad.

Pricing Table by Supsystic

Pricing Table by Supsystic

También nos gusta el diseño del plugin premium, considerando que cuesta $39 por un sitio y que usted recibe un gran paquete de plantillas premium y restricciones de roles. En general, diría que este es uno de los mejores plugins de tablas de precios para utilizar el plugin gratuito base y no utilizar la versión premium. Sin embargo, las plantillas premium lucen geniales y no cuestan tanto.

Costo

Cuenta con un plan gratuito.

El plan premium cuesta $39 por un sitio. O $69 por soporte en cinco sitios. O $149 en sitios ilimitados.

Características que hacen que Pricing Table by Supsystic sea una buena elección

5. CSS3 Responsive WordPress Compare Pricing Tables

Con un precio de $20, el CSS3 Responsive pricing table plugin ofrece un increíble valor. Sólo se puede conseguir del marketplace de CodeCanyon, pero debería tener en mente que este no cuenta con una versión gratuita. Habiendo dicho esto, la mayoría de las personas no tienen inconvenientes de tener que pagar $20 por uno de los mejores calificados plugins de precios revisados. En general, el plugin tiene una de las mejores plantillas para que usted pueda comenzar. Usted puede cambiar los colores y fuentes, mientras resalta algunos de los mejores planes que tiene para ofrecer.

CSS3 Responsive WordPress Compare Pricing Tables

CSS3 Responsive WordPress Compare Pricing Tables

La mayoría de las tablas de precios en esta lista son responsivas, pero esta luce particularmente bien después de hacer unas pruebas en mi celular y tableta. También parece que el desarrollador es responsivo y está dispuesto a crear nuevas funciones y lanzarlas como actualizaciones. Por ejemplo, al momento de escribir este artículo, actualmente estoy viendo tres versiones principales – la de las columnas deslizantes, el modo responsivo y el de la importación y exportación de datos.

Costo

$20 por todas sus funciones.

Puede pagar $5.63 adicionales para extender el soporte a clientes por un año. No cuentan con plugin gratuito.

Características que hacen que CSS3 Pricing Tables Grids sea una buena elección

6. ARPrice – Responsive WordPress Pricing Table Plugin

El ARPrice plugin también sólo puede ser comprado del sitio de CodeCanyon, pero por el precio de $23. Estamos empezando a notar que muchas compañías e individuos podrían obtener mejores resultados pagando estos bajos precios para obtener todas las funciones que necesitan – a diferencia de trabajar con un plugin gratuito que carece de ciertas funciones. Sin importar la decisión, este plugin de tablas de precios contiene algunos de las mejores visuales en esta lista, ya que tiene soporte para varios tipos de artículos multimedia, como imágenes de fondo e iconos.

ARPrice - WordPress Pricing Table Plugin

ARPrice – WordPress Pricing Table Plugin

El diseñador del backend es un editor visual que revela exactamente cómo lucirá su tabla de precios cuando esté en línea. Luego puede elegir si sus planes de precios están basados en las ofertas anuales, mensuales o cualquier otra oferta de tiempo disponible. Puede empezar el proceso al seleccionar una plantilla, luego podrá importar datos, cambiar los efectos, y elegir sus fuentes. En general, el ARPrice plugin ofrece una bella interfaz de usuarios con aún mejores resultados de frontend.

Costo

Un costo único de $23 con una extensión adicional de $6.75 al año para extender su soporte al cliente.

Características que hacen que ARPrice sea una buena elección

7. WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress

Aquí le tenemos otro plugin de tabla de precios premium con un precio sólido. El WP Pricing Table Builder viene con 90 plantillas de tablas para que se meta a fondo. También cuenta con un generador de temas personalizado y un constructor drag-and-drop para conseguir la última experiencia visual.

WP Pricing Table Builder - Responsive Pricing Plans Plugin for WordPress

WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress

A mi me gusta este plugin porque no intenta crear una librería de plantillas de cientos de opciones. En vez, usted podrá ver que los desarrolladores se han enfocado en calidad y pasar un buen rato haciendo que todas estas plantillas luzcan lo más modernas y bellas posibles. El generador de color de tema es una excelente función que al parecer no está incluida en otros plugins. Le permite generar un color para su tema usando un color de su elección. Por lo tanto, sabrá que el color de su tabla de precio lucirá muy bien.

Costo

El plugin cuesta $24.

Consiga el plan de 12 meses de soporte por unos $7.13 adicionales.

Características que hacen que WP Pricing Table Builder sea una buena elección

8. Pricing Table – Price list, Price Table, Easy Pricing Table

El Pricing Table – Pricing List plugin viene de los chicos de A WP Life. Es una solución relativamente nueva pero muy respetada. La versión gratuita tiene bellas opciones de personalización, incluyendo algunas plantillas que vienen con el plugin. Las animaciones son provistas, y usted podrá insertar artículos como iconos y listas de funciones. Coloque botones de Comprar Ahora en las listas e incorpore tags para cosas como artículos “Calientes” o “Populares”.

¿Sus páginas lentas están impactando negativamente sus cifras de ventas? Aproveche la arquitectura optimizada para el rendimiento de Kinsta y venda más! Eche un vistazo a nuestros planes de hosting

Pricing Table – Price list, Price Table, Easy Pricing Table

Pricing Table – Price list, Price Table, Easy Pricing Table

La versión premium de este plugin le da las mismas funciones, junto con 19 plantillas adicionales. Tan sólo cuesta $9.99, así que, si encuentra la plantilla que se adapte a su marca, ¡adelante!

Costo

Gratis y $9.99 por la versión premium.

Características que hacen que Pricing Table sea una buena elección

9. WRC Pricing Tables

El WRC Pricing Tables plugin es ofrecido sin costo alguno, pero tiene la oportunidad de conseguir la versión premium por $10. La versión premium es un poco más avanzada, con unas 500 plantillas adicionales, integración con PayPal, e interruptores de precios para cambiar entre planes mensuales y anuales. El plan premium igual incluye otras funciones útiles adicionales, así que sería bueno considerarlo, ya que tiene un precio muy bajo.

WRC Pricing Tables

WRC Pricing Tables

El plugin gratuito es fantástico para construir tablas de precios simples, y usted puede crear un número ilimitado de filas y columnas. Todo el diseño está hecho con ayuda de un editor drag-and-drop. Una de las cosas que nos gusta más sobre el plugin de WRC Pricing Tables es que usted puede utilizar un recolector de color, el cual esencialmente recolecta su color y genera una tabla de diseño aleatoria para usted.

Costo

Gratis. $10 por la versión premium

Características que hacen que WRC Pricing Tables sea una buena elección

¿Cuál Es el Mejor Plugin de Tabla de Precios de WordPress para Usted?

Los plugins enlistados anteriormente están listos para que los ponga a prueba. Sin embargo, también puedo hacer que sea más sencillo para usted con algunas recomendaciones adicionales.

Todos los otros plugins de tablas de precios en esta lista tienen sus ventajas también. Sin embargo, estos son los que más he disfrutado.

Pero, ¿qué sucede si no está interesado en usar un plugin y desea codificar su propia tabla de precios?

¡Aquí es cómo hacerlo!

Cómo crear una tabla de precios en WordPress desde cero

La creación de una tabla de precios desde cero se realiza con un código HTML que nos dará la estructura para nuestra tabla y luego se diseñará con CSS.

Para comenzar, inicie sesión en su sitio web de WordPress, navegue hasta el panel y haga clic en Páginas → Agregar nuevo. También puede agregar el código a una página ya existente donde le gustaría que aparezcan sus tablas de precios.

Una vez que se cargue el editor de WordPress, cambie al modo de texto y pegue el siguiente código:

<div class="pricing-table">
<div class="one-third first">
<ul>
       <li class="header">Basic</li>
       <li class="grey-blue">$ 9.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
              <li>List Item #4</li>
              <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a>
</div>
<div class="middle one-third">
<ul> 
       <li class="header-blue">Pro</li>
       <li class="light-blue">$ 99.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
               <li>List Item #4</li>
               <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a> 
</div>
<div class="one-third">
<ul>
       <li class="header">Business</li>
       <li class="grey-blue">$ 199.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
               <li>List Item #4</li>
               <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a> 
</div>
</div>

El código es bastante simple: primero, creamos un div para mantener nuestro código de tabla de precios y facilitar el estilo de ellos con CSS. Luego, dado que estamos creando tres tablas, cada una de ellas se ajusta en una columna de un tercio. La última parte es la tabla en sí misma, con clases agregadas para un encabezado y un punto de precio que las harán destacar del resto de la tabla.

Antes de hacer clic en Publicar o actualizar, asegúrese de reemplazar el texto entre las etiquetas [pre] <li> y </li> [/ pre] con las suyas y agregar el enlace a su formulario de pago después de la parte href del enlace .

Una vez que haya reemplazado toda la información, siga adelante y haga clic en Publicar si creó una nueva página o en Actualizar si agregó la tabla a una página existente.

Si mira su página ahora, notará que la tabla de precios se ve muy simple. Vamos a añadirle un poco de estilo.

Si está utilizando un tema secundario, debe agregar el siguiente código a la hoja de estilos del tema hijo secundario o al editor CSS personalizado.

La primera parte del código asegurará que nuestra tabla de precios se muestre en columnas y si desea o necesita mostrar más de tres tablas, estas clases le permitirán reemplazarlos fácilmente:

/* ## Column Classes
--------------------------------------------- */
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
width: 48.717948717948715%;
}

.one-third,
.two-sixths {
width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
width: 65.81196581196582%;
}

.one-fourth {
width: 23.076923076923077%;
}
.three-fourths {
width: 74.35897435897436%;
}
.one-sixth {
width: 14.52991452991453%;
}
.five-sixths {
width: 82.90598290598291%;

}
.first {
clear: both;
margin-left: 0;
}

La segunda parte del código le dará el estilo a las tablas.

/* ## Pricing Table
 --------------------------------------------- */

.pricing-table {
 line-height: 1;
 }
 li.header {
 background-color: #2f79a9;
 color: #fff !important;
 font-size: 25px;
 border-bottom: 1px solid #2f79a9 !important;
 margin-bottom: 0 !important;
 }
 li.grey-blue {
 background-color: #569dcc;
 color: #fff !important;
 font-size: 20px;
 }

li.header-blue {
 background-color: #00b9eb;
 color: #fff !important;
 border-bottom: 1px solid #00b9eb !important;
 font-size: 25px;
 margin-bottom: 0 !important;
 }
 li.light-blue {
 background-color: #72dffd;
 color: #fff !important;
 font-size: 20px;
 }

.middle {
 box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
 }
 .pricing-table .one-third {
 background-color: #fff;
 margin: 20px 5px;
 padding: 40px;
 width: 32.33%;
 }

.pricing-table .one-third:nth-child(3n+1),
 .pricing-table .one-third:nth-child(3n+2),
 .pricing-table .one-third:nth-child(3n) {
 border: 1px solid #ddd;
 }

.pricing-table .one-third ul {
 margin: 0;
 }

.pricing-table ul li {
 border-bottom: 1px solid #ddd;
 color: #333;
 margin-bottom: 10px;
 padding: 10px;
 text-align: center;
 list-style-type: none;
 }

.pricing-table a.pricing-button {
 background-color: #00b9eb;
 border: 3px solid #00b9eb;
 color: #fff;
 display: block;
 text-align: center;
 padding: 16px 24px;
 }

.pricing-table a.pricing-button:hover {
 background-color: #000;
 border: 3px solid #000;
 color: #fff;
 }

/* Pricing Table - Media Queries for Mobile Devices
 --------------------------------------------- */

@media only screen and (max-width: 1140px) {
 .pricing-table .one-third {
 width: 32%;
 }
 }

@media only screen and (max-width: 800px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 568px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 480px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 420px) {
 .pricing-table .one-third {
 width: 100%;
 margin: 20px 0;
 }
 }

Agregamos un estilo simple y básico para las tablas de precios y diseñamos el encabezado y el precio de manera diferente para que se destaquen. También agregamos un cuadro de sombra alrededor de la mesa central para resaltar ese paquete específico. Finalmente, agregamos algunas consultas de medios para asegurarnos de que las tablas respondan.

Cómo debería verse su tabla de precios cuando todo está hecho.

Cómo debería verse su tabla de precios cuando todo está hecho.

Una vez que haya pegado ambos fragmentos de código CSS, siga adelante y haga clic en Actualizar archivo. Ahora eche un vistazo a su página y asegúrese de que todo se muestre de la forma que desea.

Si tiene alguna pregunta sobre las mejores tablas de precios, o si tiene alguna sugerencia para otras personas, ¡háganos saber en los comentarios!


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes