BLACK FRIDAY: 50% DE DESCUENTO EN TODOS NUESTROS PLANES

Hosting WordPress Webempresa

Mejores plugins de tablas de precios para WordPress

por | Oct 17, 2022 | Plugins WordPress

Mejores plugins de tablas de precios para WordPress

  Introducción

 

Si tu proyecto web está enfocado a la comercialización de un servicio con diferentes planes, desarrollo web y similares, es muy posible que en algún momento tu proyecto haya requerido mostrar tablas de precios y características de diferentes servicios ofertados para mostrar en la web a posibles clientes.

Entonces hablemos de algunos de los mejores plugins de tablas de precios para WordPress de manera que puedas elegir aquel que mejor se adapte a tu proyecto para ponerlo en funcionamiento.

Una tabla de precios permite a tus clientes potenciales disponer de la capacidad de comparar de forma rápida y visualizar las diferentes opciones y funciones dentro de su estructura de precios. Con un poco de estrategia de precios, estas tablas de comparación pueden ser una forma efectiva de posicionar tus productos/servicios y mejorar las ventas.

  ¿Qué son las tablas de precios en WordPress?

 

Seguramente ya habrás visto en muchas webs listas de precios en formato de tabla, muy habituales hoy día en webs que comercializan servicios, alojamiento web, productos y algún tipo de herramienta mediante membresía.

Tabla de precios

Un ejemplo bien podría ser una tabla de precios de los Planes de Hosting WordPress de Webempresa, por citar un caso cercano. Puedes consultar la tabla “en vivo” en el link de este mismo párrafo y ver cómo funciona, qué elementos muestra y su comportamiento con respecto al navegador.

Al final no es más que texto formateado dentro de filas y columnas, “en celdas” que contiene algunos atributos (negrita, subrayado, cursiva, enlace, iconos…) para que los usuarios puedan entender dentro de dicha tabla lo que representa cada elemento de la misma.

Antiguamente muchos usuarios tenían que crear estas tablas manualmente, como te mostraré a modo de ejemplo al final de este artículo, y luego copiar el código HTML y pegarlo en la página de la web donde se tenía que visualizar.

El problema de este tipo de integraciones de tablas es que no siempre se hacía de forma correcta, por ejemplo se usaban espacios en lugar de tabulaciones, y esto acababa desmontando la tabla, lo que hacía que en unos navegadores se vise diferente a otros y no era viable su uso, y tampoco tenía comportamiento “responsive”.

Hoy día existe muchos plugins para WordPress que ya asumen la parte del diseño de la tabla, como veremos en el siguiente bloque, que tienen un montón de opciones de diseño de filas, columnas, celdas, textos, colores, etc., y permiten obtener resultados muy visuales.

     Es importante que las tablas que uses en WordPress tengan siempre comportamiento “responsivo”, es decir, que se vean de igual forma en monitores de escritorio, portátiles, tabletas o dispositivos móviles (smartphones) sin que se desborden por la derecha o se rompa su diseño.

  Creando una tabla de precios con el plugin Pricing Table

 

No hay mucho material gratuito disponible para WordPress que permita mostrar tablas de precios de forma destacada, con colorización de áreas y además animación para llamar la atención, pero he encontrado el plugin Pricing Table by PickPlugins y ¡te cuento su funcionamiento y puesta en marcha en WordPress!

Plugin Pricing Table by PickPlugins

Haz clic en la imagen para acceder al plugin en WordPress.org

Una cosa que me encanta de este plugin es que tiene un toque minimalista, sobre todo comparado con otros cuya interface de diseño es menos “usable” y los resultados algo más pobres, es que la tabla resultante se genera en HTML y CSS3 para mostrar las tablas con un código lo más limpio posible, lo que hace que carguen muy rápidamente en pantalla.

La versión “reducida” del plugin permite:

  • Añadir tablas sin límite en cualquier lugar de tu web.
  • Añadir filas y columnas sin límite.
  • Destacar una de las columnas de la tabla (zoom mayor tamaño).
  • Personalizar los textos, tamaños y colores.
  • Personalizar el color de fondo de columnas y celdas.
  • Añadir textos de ayuda.
  • Añadir una imagen de fondo para el área de la tabla.
  • Ordenar las filas “arrastrar y soltar”
  • Ocultar filas vacías.
  • Activar el control deslizante en dispositivos móviles.

En la siguiente imagen puedes ver un ejemplo de creación de una tabla de 3 columnas con varias filas, un ancho específico (en px) para cada columna y que tiene comportamiento “responsivo”.

Ejemplo de tabla

Una vez confeccionas todos los campos de la tabla (filas y columnas) y el estilo que vas a utilizar (negrita, colores, tamaños de fuentes, etc.) entonces podrás ver debajo una “vista previa” de como va quedando la tabla, y podrás ir aplicando ajustes hasta dejarla como deseas.

Tras finalizar tienes que ir a la pestaña de esa misma pantalla llamada Shortcode (código corto) que es donde verás el código corto que se ha generado automáticamente para que lo copies e insertes en la página o publicación donde quieras mostrar dicha tabla.

Shortcode PickPlugins

Copia el primer código corto (es el que funciona bien en el 990% de los casos y Temas) y pégalo en tu publicación (entrada o página) para poder luego mostrarlo.

Shortcode añadido en la página Tienda

Una vez publicas la página puedes ir al frontal a ver el resultado y aplicar los ajustes que correspondan, principalmente el ancho que hayas establecido para las columnas, de forma que no se desborde y se vea completa.

Tabla creada con Pricing Table by PickPlugins

Si activaste la opción Activar el control deslizante móvil para dispositivos móviles, cuando consultes la página donde has insertado la tabla mediante el código corto, verás que puedes delizar lateralmente las columnas de la tabla al tocar con el dedo y deslizarlo a derecha o izquierda sobre la tabla.

Tabla en dispositivo móvil

La versión “freemium” de este plugin tiene un reducido número de opciones de personalización, pero el suficiente com para crear tablas con datos suficientes para que se muestren bien y con la información deseada, para tablas más complejas puedes evaluar la versión completa de este plugin que tiene muchos más “layouts” con iconos y otras opciones adicionales de personalización.

Si aún así sigue sin convencerte, no te preocupes que a continuación te listo otros plugins que te pueden servir para crear tablas en WordPress, ya sean para mostrar precios generales o para usarlas en WooCommerce con productos.

  Algunos plugins para crear tablas de precios

 

Como es posible que aún o tengas claro si el plugin mostrado es el ideal para tu web, puedes explorar alguno de los sugeridos a continuación, para ver si tienen la funcionalidad que buscas, teniendo en cuenta que en su inmensa mayoría son todos “comerciales” (de pago) y tendrás que conformarte con ver la “demo” (en caso de tenerla) para explorar un poco más a fondo antes de adoptar alguno para tu sitio web.

Algunos aspectos que deberías tener en cuenta antes de decidirte por un plugin para tablas en tu web:

  • Comprobar que el precio del plugin esté acorde a lo que este ofrece en su versión completa.
  • Verificar si dispone de “demostración” online donde puedas evaluar antes de comprar o instalar.
  • Que tenga actualizaciones regulares y se ejecute en versiones estables de PHP y de WordPress.
  • Que sea compatible con el editor de bloques Gutenberg es un plus a considerar.
  • Que también sea compatible con alguno de los constructores visuales conocidos como Divi, Elementor, etc.
  • Que tenga una interfaz de diseño amigable y lo más intuitiva posible.
  • Ver si la tabla que genera trabaja con HTML5/CSS3 y cómo esta puntúa en PageSpeed, GTMetrix, etc.

En definitiva, deberías realizar un trabajo de campo previo a la toma de decisión, analizando aquellos plugins que más te interesen, y probando sus funcionalidades, a ser posible en la “demo” en caso de tenerla y además ver si disponen de Soporte Técnico para cuando surjan problemas con la integración en determinados escenarios en sitios WordPress.

  Pricing Table by Supsystic

 

Plugin Pricing Table by Supsystic
Gratuito
Comercial

Con este plugin puedes crear tablas de precios para diferentes cuestiones, y personalizar en parte los contenidos de filas y columnas, aunque la interfaz de diseño es algo básica y cuesta un poco cogerle el truco, ya que algunas cajas de texto despliegan herramientas contextuales auxiliares que provocan algún fallo puntual saliéndose de la edición del texto o ítem editado, por lo demás, digamos que cumple más o menos lo que promete en su presentación para la versión “reducida” del plugin.

Supsystic

En la imagen puedes ver un poco la zona de diseño de la tabla con los diferentes elementos que esta permite (en inglés).

Quizás lo más complicado que he encontrado en este plugin es el poder eliminar algunas de las filas de texto de las columnas de la tabla, ya que no tiene un proceso sencillo y su UI aún necesita ser depurada un poco más.

  WooCommerce Product Table Lite

 

Plugin WooCommerce Product Table Lite
Gratuito
Comercial

Si necesitas crear una tabla de productos de WooCommerce, este plugin te puede ayudar a conseguirlo, incluso con su versión “Lite” que tiene menos funcionalidades, pero las suficientes como para crear una tabla como la que ves en la imagen.

tabla de productos de WooCommerce

Una de las opciones es la gestión de cadenas en el/los idioma(s) que utilices en la tienda desde Product Tables > Ajustes > Etiquetas, pudiendo añadir el código de idioma que necesites y la traducción correspondiente a columnas y otros que se usan con el plugin.

Traducciones cadenas de texto del plugin

Cuando creas una nueva tabla, escoges entre los 2 layouts disponibles en la versión “reducida” y configuras los datos necesarios para la tabla. Una vez configurada la tabla puedes utilizar el código corto (shortcode) que aparece en la parte superior de la tabla que has creado y ese código puedes usarlo para insertar la tabla en Entradas o Páginas de tu sitio web.

código corto para mostrar la tabla

Tiene bastantes configuraciones, por lo que es importante que te lo tomes con calma y vayas revisando las que hay, probando y guardando cambios y verificando cómo se va viendo la tabla, hasta dar con el resultado deseado.

  Otros plugins que puedes usar para añadir tablas en tu WordPress

 

Ya tienes un punto de partida para empezar a probar plugins y evaluar cuál de ellos es finalmente el que más posibilidades aporta a lo que quieres mostrar en tu web, pero te dejo un breve listado de otros pocos, en formato más rápido de consultar, por si quieres tener una lista más completa y saber qué mirar antes de decidir.

  • Pricing Table – Price list, Price Table, Easy Pricing Table: Ver plugin – Crea tablas “responsive” en HTML y CSS3 y es compatible con Elementor.
  • Ninja Tables – Best Data Table Plugin for WordPress: Ver plugin – Permite crear tablas bastante profesionales y adaptativas.
  • Responsive Pricing Table: Ver plugin – La versión gratuita del plugin no está limitada.
  • Pricing Tables WordPress Plugin – Easy Pricing Tables: Ver plugin – Para crear tablas con el editor de bloques Gutenberg.
  • WRC Pricing Tables: Ver plugin – Puedes ver demos de la versión “gratuita” para una mejor idea.
  • WP Restaurant Price List: Ver plugin – Para crear tablas de precios para un Restaurante.
  • Product Table by WooBeWoo: Ver plugin – Tablas de precios para productos de WooCommerce.

  Conclusiones

 

El uso de tablas puede ser muy útil para mostrar datos en cualquier sitio con WordPress, también en tiendas de WooCommerce. Existen muchos plugins que puedes probar para evaluar su funcionamiento y aunque el 99,99% son COMERCIALES (de pago) muchos de ellos tienen una versión “Lite” (reducida) o “freemium” que te permite instalarlos en tu web y crear tablas para mostrar precios u otros datos que resulten relevantes en tu web, por ejemplo una tabla comparativa de servicios, de un producto, etc.

Si trabajas con constructores visuales como Divi o Elementor, por citar dos de los más usados, en estos builders tienes módulos específicos para crear “tablas de precios” sin tener que recurrir a nuevos plugins y además se integrarán bien con tu tema y podrás realizar personalizaciones directamente con el personalizador que uses.

Módulo de tablas en Divi

Al final, uses lo que uses, de lo que se trata es de crear tablas que tengan un comportamiento fluido en el navegador donde se muestren (escritorio o móvil), que permitan un alto grado de personalización, añadir gráficos, escalar tipografías y escoger colores para los diferentes elementos, y que en el proceso de creación de las tablas ¡disfrutes! que es de lo que se trata también. 🤗

¿Te ha resultado útil este artículo?

Hosting Divi - Wp Fácil - Webempresa