¿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?

  • Una tabla de precios le permite ordenar un esquema y comparación de sus servicios o paquetes.
  • Las funciones más importantes son indicadas en la tabla de precios, limpiando todo el desorden y dejando todo esto para otra página.
  • La tabla de precios tiene botones claros para las llamadas a tomar acción para mostrarle a la gente cómo proceder con su pago.
  • La mayoría de las tablas de precios utilizan nombres para sus paquetes/planes que hacen que sea más sencillo para sus clientes entender.
  • Usted podrá agregar énfasis a ciertas palabras, planes o funciones al usar fuentes o gráficas más grandes.
  • Es mucho más interesante leer tablas de precios gráficas que uno con sólo texto.
  • Usted puede mejorar las conversiones con urgencia (p.e. “El tiempo se le está acabando para conseguir esta buena oferta”) o pruebas gratuitas.
  • Las tablas de precio toman una pequeña cantidad de espacio en la página web, así que usted puede agregar información adicional, como un FAQ o una casilla de chat para sus representantes de ventas.

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:

  • Opciones gratuitas y premium – Mis plugins favoritos de tablas de precios le dan una tabla estándar para hacer que sus precios luzcan bonito. Después de eso, la versión premium con funciones extras que no deberían ser tan caros.
  • Las integraciones con los mejores page builders – Algunos de los page builder incluso vienen con sus propias tablas de precios. Algunos de los page builders más populares incluyen Divi Builder, Elementor y WPBakery.
  • Skins o temas para lanzar tablas de precios en segundos. También nos gusta ver herramientas de personalización para los colores, fuentes e iconos.
  • Una opción para mostrar estampas en ciertos planes, como plan con “Mejor Valor” o “Más Popular”.
  • Múltiples opciones de moneda para poder ser usado en todo el mundo.
  • Soporte para botones más grandes configurables en cada plan de precio.
  • Un builder drag and drop sería muy bueno también.
  • También nos gusta ver acceso a CSS y HTML, mientras más desarrolladores avanzados querrán oportunidades para hacer cambios más complejos.

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. Pricing Table – Price list, Price Table, Easy Pricing Table
    8. WRC Pricing Tables
    9. 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

  • El plan gratuito provee las herramientas necesarias para un amplio margen de pequeños negocios, ya que usted recibirá tablas y planes ilimitados.
  • El precio premium es bastante bajo.
  • Los skins son modernos y altamente personalizables desde el principio, con muchos botones y fuentes para ajustar.
  • Los iconos y otros visuales son accesibles.
  • Puede incluir todas las funciones que quiera para sus planes de precios.
  • Los botones de llamada a tomar acción pueden enlazar a sistemas de pagos externos como PayPal.
  • Una amplia variedad de símbolos de monedas está disponible para poder llegar a más países.
  • Puede mostrar una medalla para los planes recomendados.
  • Se pueden mostrar planes recurrentes (por mes o año) con las opciones especiales.

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

  • Cada parte de la tabla de precios está dividida en su propia sección en un editor visual. Esto incluye el encabezado, cuerpo, y el área del botón.
  • Ofrecen más de 250 tablas demo después de comprar el plugin. Esto debería permitir que la mayoría de las compañías puedan elegir una plantilla y lanzar su página de precios en minutos.
  • Elementos drag and drop son posibles con grandes integraciones de page builders. Go Pricing funciona muy bien con Beaver Builder, Elementor y WPBakery.
  • El proceso de construcción de tablas es sencillo para todos los niveles de experiencia. El plugin tiene una excelente interfaz en el backend, con opciones para shortcodes, importaciones y configuraciones.
  • Incluye animaciones para hacer que las tablas de precios luzcan más atractivas.
  • Utilice más de 2000 iconos para hacer que sus tablas aparezcan mejores.
  • Un módulo personalizado de CSS es provisto para aquellos que quieran ir más allá de la base de funciones.
  • Agregue funciones únicas como elementos multimedia, botones de PayPal, y Google maps.

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

  • Los diseños de las tablas de precios son limpios y simples, logrando un look moderno sin tantos efectos innecesarios.
  • Puede ajustar los colores y otros elementos de casi cualquier artículo en la tabla de precios. Esto incluye columnas, botones y fuentes.
  • Todas las tablas de precios están hechas con una lista simple de campos visuales en el backend. La configuración está formateada en la forma en que la tabla de precios lucirá en el frontend.
  • Usted puede especificar que uno o múltiples planes son más importantes que otros.
  • Usted puede usar la herramienta de drag-and-drop con las columnas para ordenarlas.
  • Se ofrece un módulo CSS personalizado para obtener personalizaciones más avanzadas para sus tablas de precios.
  • Incluso la versión gratuita soporta un número ilimitado de filas de tablas de precios.
  • Algunas de las versiones premium tienen buenas integraciones para cosas como WooCommerce, Google Analytics y Stripe.

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

  • El plugin de Pricing Table de Supsystic es lo más cercano a una solución completa de tablas de precios en su versión gratuita. La única mejora que obtendría del plugin premium son mejores plantillas.
  • Todas las tablas de precios lucen fantásticas, con elementos responsivos y colores brillantes.
  • Las plantillas en la versión gratuita son geniales, y las plantillas premium son fenomenales.
  • Elija tener un interruptor que muestre a la gente ofertas especiales – como el poder pagar un año por adelantado o para comprar hoy mismo.
  • Mejore algunos de sus planes con iconos visuales.
  • Utilice herramientas como shortcodes, sliders de colores, y constructor de visuales para asegurar que jamás tendrá que tocar una línea de código en su proceso creativo.
  • El plugin tiene animaciones cuando sus planes son selecciones para que luzcan más atractivos para sus visitantes.
  • También tiene soporte para imágenes y videos para que pueda mostrar ciertas funciones o partes de sus negocios.
  • Cuenta con un constructor drag-and-drop en el backend del dashboard de su WordPress

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

  • El precio sin duda alguna es uno de los mejores, considerando todas las funciones que uno obtiene al conseguir este plugin de precios.
  • La gran colección de herramientas de personalización permite miles de tablas de precios únicas. Esto incluye 20 versiones de color, 60 listones, 42 iconos de cruces y dos estilos de tablas.
  • Cree un número ilimitado de filas y columnas.
  • Verifique los módulos de CSS y HTML para obtener personalización adicional.
  • Usted obtendrá opciones para ajustar el ancho y largo de todas las columnas y filas.
  • Compatibilidad con sitios múltiples.
  • Shortcodes para ayudarle a implementar sus tablas de precios en cualquier lugar de su sitio web.
  • Herramientas de importación y exportación para que pueda mover sus datos a otra tabla o importar desde una hoja de cálculos.
  • Soporte para iconos para incluir visuales como marcas y Xs.
  • Animaciones y soporte multimedia para agregar más visuales y hacer que sus planes resalten.

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

  • Es bastante accesible para ser un plugin premium.
  • Cuenta con más de 300 plantillas de tablas de precios que podrá descargar con el plugin.
  • Las herramientas de personalización son excelentes, con opciones de colores ilimitadas, plantillas completamente responsivas, un botón de cambio de precios y más de 3,000 iconos.
  • Los efectos de animación están hechos para lograr que sus tablas de precios luzcan más atractivas.
  • Cuenta con un módulo CSS y un sistema de guía CSS para personalizaciones avanzadas.
  • Usted recibirá integraciones únicas con otros programas como Google maps.
  • El editor en tiempo real de plantillas ofrece una bella interfaz para ajustar artículos como las columnas, encabezados y fondos.
  • Cuenta con una función adicionales de “la muestra de su equipo”, la cual básicamente toma el mismo formato de columna y le permite el poder compartir información sobre sus trabajadores en su sitio web.
  • Este plugin de tablas de precios de WordPress es compatible con la mayoría de los constructores de páginas como Elementor, Gutenberg y WPBakery.

7. 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”.

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

  • Usted recibirá todas las buenas funciones en la versión gratuita. La única razón para conseguir la versión premium es por si usted quiere una plantilla en particular que no se encuentra en la versión premium.
  • Incluye una gran cantidad de plantillas de tablas de precios con la versión gratuita. También puede conseguir una mejor versión para conseguir 20 más.
  • Todas las tablas que vienen con los plugins son considerados completamente responsivos.
  • Los iconos permiten que usted pueda crear tablas más atractivas visualmente.
  • Los shortcodes le ayudarán a colocar tablas en cualquier parte de su sitio.
  • Las tablas de precios pueden ser agregadas y eliminadas de su sitio con el clic de un botón.
  • Las opciones de personalización incluyen colores, ilimitados, colores para sus botones, colores de encabezados y más.
  • Se puede hacer una estilización personalizada de CSS en el dashboard.
  • El área de diseño no es completamente un constructor visual, pero está establecido con múltiples columnas para simular como lucían las tablas antes.

8. 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

  • El WRC Pricing Tables plugin tiene excelentes funciones en la versión gratuita, con una solución completa premium por tan sólo $10 (una cuota única)
  • El plugin provee shortcodes para cuando necesite colocar sus tablas de precios en cualquier lugar de su sitio web de WordPress. Por ejemplo, un shortcode podría ir técnicamente en cualquier página, publicación o incluso potencialmente en un widget.
  • Los iconos de Font Awesome agregan ese toque extra a su diseño.
  • El plugin también ofrece soporte para Google Fonts.
  • La integración con el botón de PayPal le asegura que usted podrá recolectar dinero de sus clientes.
  • El plugin incluye algunas plantillas.
  • Usted puede agregar un número ilimitado de filas y columnas mientras también duplica las tablas de precios y las guarda para otro momento.
  • Los desarrolladores avanzados tienen la oportunidad de mejorar sus tablas con custom CSS.

¿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!

Matteo Duò Kinsta

Editor en jefe de Kinsta y consultor de marketing de contenidos para desarrolladores de plugins de WordPress. Conéctese con Matteo en Twitter.