Las tablas de precios son elementos de gran importancia en los sitios web de aquellas empresas que ofrecen productos o servicios, y su finalidad es mostrar a los usuarios o potenciales clientes una comparativa de precios de los distintos planes que pueden contratar y las principales características.
WordPress cuenta en su directorio con varios plugins que sirven para crear tablas de precio. En este artículo vamos a conocer un plugin denominado como Responsive Pricing Table, con el que podemos crear tablas sencillas y totalmente personalizables.
Para instalarlo debemos ingresar al directorio de WordPress y en la caja de búsquedas escribimos Responsive Pricing Table. Una vez ha sido instalado y activado, en la barra lateral se mostrar del panel de administración de nuestro sitio web se mostrará un nuevo menú denominado como “Pricing tables”, si pulsamos sobre el mismo accederemos al gestor de configuraciones de este plugin.
Para crear una tabla de precios, debemos presionar sobre el botón que dice “Add new”. Se cargará una nueva página, y en la misma lo primero que debemos hacer es asignar un nombre o título para la tabla de precios. Por ejemplo, supongamos que tenemos una empresa de Catering, así que el título podría ser “Planes servicios de catering”.
El siguiente paso será añadir los diferentes planes que ofrecemos, para esto debemos presionar sobre el botón “Add a pricing plan” para que se desplieguen las diferentes opciones de configuración. Vamos a ver para que sirve cada bloque.
El en el campo Title debemos asignar el nombre del plan, por ejemplo podríamos llamarlo como “Básico”. Los campos Subtitle y Short description, permiten agregar un subtítulo y una breve descripción acerca del plan, respectivamente. Ambos son opcionales.
En el campo Price debemos escribir el precio del plan que estamos creando, y en el campo Frecuency escribimos la frecuencia de pago (mensual, anual, etc.)
Para añadir las principales características del producto o servicio ofrecido en este plan, debemos presionar sobre el botón “Add feature” y a continuación se despliegará un campo de formulario, y en el mismo escribimos el texto correspondiente. Para agregar nuevas características presionamos nuevamente sobre el botón “Add feature”.
Si queremos borrar cualquier característica, simplemente debemos presionar sobre el botón en forma de “X” que se encuentra en el extremo derecho de cada campo. Asimismo, podemos cambiar de posición un campo presionando sobre los botones con ícono en forma de flecha hacia arriba y hacia abajo.
Podemos utilizar código HTML para resaltar estos textos, por ejemplo, si queremos que el textos de cada característica se muestren resaltado en negrita, debemos encerrarlo dentro de un elemento HTML <b>. Asimismo, si queremos añadir una imagen al lado de cada textto de la lista la podemos insertar utilizando el elemento <img>. Por último, podemos convertir cada texto en enlace al encerrarlo dentro de un elemento <a>.
Podemos personalizar este botón o sustituilo por un botón de algún procesador de pagos como Paypal. Para esto, en el campo Add custom code here debemos agregar el shortcode o fragmento de código correspondiente. También podemos escribir nuestro propio código HTML si así lo preferimos.
En el bloqueStyling podemos hacer que se añada un ícono o insignia al lado del nombre del plan para resaltarlo con respecto al resto. Para esto en el campo Highlight plan debemos seleccionar la opción “Enabled”. Si queremos insertar nuestra propia insignia debemos presionar sobre el botón “Upload icon” para adjuntar algún archivo que tengamos guardado en nuestro computador.
El campo Show/hide currency permite mostrar u ocultar el signo de dinero al lado del precio de este plan. En el campo CSS classes podemos escrbir el nombre de una clase CSS personalizada, y en el campo Color definimos el color del botón de arriba.
Para agregar un nuevo plan debemos volver a presionar sobre el botón “Add a pricing plan”. Sin embargo, si queremos ahorrar algo de tiempo podemos clonar un plan y simplemente cambiar los textos en lo campos correspondientes. Para esto, debemos presionar sobre el botón “Clone”.
Para borrar un plan completamente debemos presionar sobre el botón con ícono en forma de papelera o “Remove” que se encuentra al lado del botón “Clone”.
Si presionamos sobre el botón “ Instant preview” podemos tener una vista previa de las tablas de precios que hemos creado.
En la columna del lado derecho podemos ver otras opciones de configuración, por ejemplo,en el campo Button behavior del bloque General podemos definir si queremos que al usuario presionar sobre el botón que nombramos como “Comprar ahora” la página con los datos sobre pagos se abra en una nueva ventana en el navegador o que se cargue el contenido en la misma página.
En el campo Currency podemos añadir el signo de la moneda con la cual se muestra el precio del producto o servicio que ofrecemos.
Para poder ver otras opciones de configuración debemos pulsar el enlace Show/hide text settings para que se muestren algunos campos con los que podemos cambiar la tipografiía y los tamaños de fuente de los contenidos de cada plan.
Por último, para guardar los cambios debemos desplazarnos hacia el final de la página y presionar sobre el botón “Publicar” que se encuentra en la columna del lado derecho.
Insertar la tabla de precios en una página estática
Una vez que hemos creado la tabla de precios, el siguiente paso será insertarla en alguna página estática. Para esto debemos regresar a la página principal del gestor de configuraciones de este plugin, y aquí veremos que ahora se muestra una columna que contiene un shortcode. Simplemente copiamos dicho fragmento de código y lo pegamos en la página estática donde queremos mostrar la tabla de precios.
El plugin Responsive Pricing Table tiene una versión de pago que integra opciones de configuración más avanzadas. Puedes conocer más en su sitio oficial.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
