Últimas noticias de SeedProd

Tutoriales, consejos y recursos de WordPress para hacer crecer tu negocio

Cómo hacer una lista de precios en WordPress

Cómo hacer una lista de precios en WordPress (sin código) 

Escrito por: avatar de autor Stacey Corrin
avatar de autor Stacey Corrin
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.
     Revisado por: reviewer avatar Turner John
reviewer avatar Turner John
John Turner es el cofundador de SeedProd. Cuenta con más de 20 años de experiencia empresarial y de desarrollo y sus plugins se han descargado más de 25 millones de veces.

¿Estás buscando un tutorial fácil sobre cómo hacer una lista de precios en WordPress?

Mostrar precios claros y concisos en su sitio web de WordPress ayudará a los visitantes a investigar sus tarifas y tomar decisiones de compra con facilidad.

Hay muchas maneras de mostrar los precios de los productos y servicios en su sitio de WordPress. Puedes utilizar código personalizado, plugins de WordPress o un tema premium de WordPress.

Pero en este artículo, le mostraremos cómo hacer una lista de precios en WordPress sin tocar una sola línea de código.

¿Por qué su sitio web debe tener una lista de precios?

La mayoría de los compradores investigan los precios incluso antes de tener un presupuesto. Por eso, mostrar su lista de precios de autónomos, los costes del menú de un restaurante o las tarifas de un salón de belleza ayudará a los clientes potenciales a comparar costes antes de decidirse por la mejor solución.

Además, publicar los precios de su pequeña empresa es excelente para la experiencia del cliente.

Si los usuarios tienen que hacer clic en innumerables páginas para encontrar información sobre precios, hay muchas probabilidades de que se den por vencidos y abandonen el sitio. Sin embargo, si los precios son fáciles de encontrar, los compradores pueden tomar decisiones de compra rápidamente, evitando perder el tiempo y reduciendo las tasas de rebote del sitio web.

Por último, si le preocupa que la competencia conozca sus precios, no se preocupe. Es probable que ya conozcan sus tarifas. Además, si sus productos o servicios son de alta calidad y satisfacen las necesidades de su público objetivo, seguirá atrayendo a los clientes adecuados.

Teniendo esto en cuenta, ¿cómo se hace exactamente una lista de precios en WordPress? Vamos a entrar en eso a continuación.

Cómo hacer una lista de precios en WordPress

Antes de empezar, aclaremos la diferencia entre una lista de precios y una tabla de precios.

Las tablas de precios son una forma popular para que las empresas SaaS y negocios similares muestren diferentes planes de precios. Probablemente estés familiarizado con su aspecto:

Ejemplo de tabla de precios

Normalmente, las tablas de precios tienen varias columnas con diferentes niveles de precios para que los clientes puedan elegir el que mejor se adapte a sus presupuestos. Muchas tablas de precios tienen botones de llamada a la acción para que los compradores "compren ahora", lo que las convierte en una forma eficaz de aumentar las conversiones.

Para ello, puede utilizar un plugin de WordPress para tablas de precios como Easy Pricing Tables. El constructor de tablas del plugin hace que sea fácil añadir estilos de tabla y personalizaciones. 

Aquí tienes una guía útil sobre cómo crear una tabla de precios en WordPress.

En comparación, una lista de precios es más bien una lista clara de opciones de precios. Son una solución excelente para autónomos, menús de cafeterías, salones de belleza y otros servicios profesionales.

Las listas de precios ocupan menos espacio en su sitio web, lo que le permite colocarlas donde quiera. En lugar de limitarlas a una página de precios, puedes añadirlas a la página de inicio, a las páginas de información o servicios, o incluso a las entradas del blog sobre tus productos.

Ejemplo de lista de precios

Hay varias formas de añadir una lista de precios a tu sitio web WordPress. Puedes contratar a un desarrollador para que cree una desde cero, utilizar un plugin de listas de precios con funcionalidad integrada o probar un creador de páginas de WordPress.

Para esta guía, vamos a utilizar un constructor de arrastrar y soltar, ya que es la forma más fácil de obtener su lista de precios de la manera que usted desea, y SeedProd es la mejor solución en el mercado.

SeedProd Arrastrar y soltar WordPress constructor de sitios web

SeedProd es el plugin constructor de páginas de arrastrar y soltar más fácil de usar para WordPress. Su interfaz intuitiva hace que la creación de diseños de páginas de WordPress personalizados y diseños fáciles (sin necesidad de codificación).

Con su constructor interactivo basado en bloques y sus plantillas prediseñadas, puede añadir una elegante lista de precios a su sitio web en cuestión de minutos.

SeedProd también incluye las siguientes funciones:

Siga los sencillos pasos a continuación para aprender a hacer una lista de precios en WordPress con SeedProd.

Paso 1. Instalar y activar SeedProd Instale y active SeedProd

El primer paso es ir a la página web de SeedProd y descargar el plugin. Usted puede elegir entre varios planes de precios para adaptarse a su presupuesto, pero estamos utilizando la versión SeedProd Pro para este tutorial.

A continuación, instale y active el archivo zip del plugin en su sitio web WordPress. Puedes seguir este post sobre cómo instalar un plugin de WordPress si es la primera vez que lo haces.

Tras activar el plugin, vaya a la página SeedProd " Configuración y pegue su clave de licencia. Puede encontrar su clave de licencia en su cuenta SeedProd en la sección Descargas.

introduzca su clave de licencia SeedProd

A continuación, haga clic en el botón Verificar clave.

Paso 2. Elija el tema o el generador de páginas de destino

Hay varias maneras de personalizar tu sitio WordPress con el plugin page builder de SeedProd.

Puede sustituir el diseño actual de su sitio por uno nuevo creando un tema de WordPress personalizado. O puede mantener su diseño actual y crear una página de destino independiente con el Landing Page Builder.

Independientemente de la solución que elija, puede seguir utilizando el bloque Lista de precios de SeedProd para mostrar listas de precios personalizadas en su sitio web, ya que utiliza la misma interfaz del constructor de páginas.

Para esta guía, vamos a elegir la opción Theme Builder, así que navegue a SeedProd " Theme Builder y haga clic en el botón Theme Template Kits .

Elija un kit de plantillas temáticas

Paso 3. Seleccione una plantilla personalizada Seleccione una plantilla personalizada

En la siguiente pantalla, verás la biblioteca de plantillas de sitios web prefabricados de SeedProd. Incluyen todas las características y páginas que necesitas para crear un sitio web completo y un diseño profesional que puedes personalizar fácilmente.

Selector de plantillas para el tema SeedProd

Haz clic en el icono de la lupa en cualquier plantilla para obtener una vista previa de todo el tema. Por ejemplo, si previsualizas el tema Andaman Budget Hotel, verás que la página Dining ya tiene una sencilla lista de precios que puedes editar.

Ejemplo de una sencilla lista de precios de demostración

Puedes filtrar la biblioteca de plantillas para mostrar sólo temas de WooCommerce o hacer clic en el menú desplegable para mostrar primero los temas más nuevos, más antiguos o más populares.

Filtrar plantillas SeedProd

Cuando encuentres un diseño que te guste, haz clic en el icono de la marca de verificación para importarlo, lo que sólo te llevará unos segundos.

Importar plantilla SeedProd

Ahora verás las partes de tu tema en el panel del Constructor de temas. Puedes editar cualquier plantilla situándote sobre ella y haciendo clic en el enlace Editar diseño.

Piezas del kit de plantillas temáticas

Consulte nuestra guía sobre la creación de un tema personalizado de WordPress para obtener más detalles sobre la personalización de las partes de su tema.

SeedProd también creará las páginas de la demo del tema para que las personalices con su constructor de páginas. Simplemente ve a Páginas " Todas las páginas, y las verás en la lista con "SeedProd" junto al título de la página.

Editar página de WordPress con SeedProd

Personalizaremos la página "Comedor" para mostrarle cómo utilizar la función Lista de precios de SeedProd. Así que pase el cursor sobre la página y haga clic en el enlace Editar con SeedProd.

Paso 4. Personalice su página de lista de precios

Cuando abra cualquier página con SeedProd, verá un diseño como éste:

Interfaz del constructor de páginas SeedProd

El constructor de páginas tiene bloques y ajustes de WordPress a la izquierda y una vista previa en vivo de tu diseño a la derecha. Los bloques funcionan de forma similar al editor de bloques de WordPress (Gutenberg), donde puedes arrastrar y soltar nuevos bloques en tu página y hacer clic para editar el contenido en tiempo real.

Cuando observes el menú de este diseño, verás que está formado por bloques de titulares y texto.

Lista de precios de demostración realizada con bloques de encabezamiento y texto

El bloque Lista de precios es una forma más sencilla de mostrar los elementos de su menú y sus precios. Incluye automáticamente espacio para el artículo, la descripción, el precio y la imagen, y tiene muchas opciones de personalización.

En el panel izquierdo, desplácese hasta la sección Avanzado, busque el bloque Lista de precios y arrástrelo y suéltelo en su página.

Añada el bloque Lista de precios de SeedProd para aprender a hacer una lista de precios

El bloque añadirá algo de contenido de relleno para darle una idea de cómo se verán las cosas. Vamos a añadir algunos elementos de la lista de precios.

Abrir un elemento de la lista de precios para editar su contenido

Para ello, haga clic en el epígrafe "Artículo 1" para ampliarlo. Dentro, puedes añadir un título, una descripción y un precio, subir una foto e incluso añadir un enlace a la página individual del producto.

Personalizar la configuración de los artículos de la lista de precios

Repita este paso para cada artículo de su lista de precios.

Después de añadir artículos a su lista de precios, puede ampliar los ajustes de Diseño. En este panel, puede cambiar la posición de la imagen y el precio, elegir un separador de precios diferente y ajustar la alineación general de la lista.

Personalizar el diseño de la lista de precios

Incluso puede vincular el cuadro de precio completo a la página de precios individuales. Solo tiene que hacer clic en la posición .

En el panel Área de imagen, puede controlar el tamaño y la forma de las imágenes de su lista de precios. Las opciones incluyen Predeterminado, Redondeado, Círculo y Personalizado, donde puede definir su propio radio de borde de imagen.

Personalizar la configuración de la imagen de la lista de precios

Ahora haz clic en la pestaña Avanzado para ver algunas opciones de estilo adicionales.

Como puede ver, este panel le permite controlar la tipografía, el tamaño de letra y los colores de los distintos elementos de su lista.

Configuración avanzada de la lista de precios

También puedes ajustar el espaciado, los bordes, los colores de fondo y la visibilidad en dispositivos de sobremesa y móviles. Y no tendrás que escribir CSS o HTML personalizados.

Configuración del color de la tipografía de la lista de precios

Basta con apuntar y hacer clic para añadir nuevos estilos.

Una vez que esté satisfecho con su lista de precios, puede eliminar el contenido de relleno antiguo. Para ello, pasa el ratón por encima de cada columna hasta que veas un contorno azul y haz clic en el icono de la papelera.

Eliminar el contenido de relleno de la plantilla

Haz lo mismo con todos los elementos de la página que ya no necesites. Ahora haz clic en el botón Guardar situado en la esquina superior derecha de la pantalla.

Guardar la página de la lista de precios

Ahora que su página de precios está completa, puede editar y personalizar el resto de su tema de WordPress.

Aquí tienes algunas guías prácticas que pueden ayudarte con tus personalizaciones:

Paso 5. Publique su página de lista de precios

Cuando haya terminado de personalizar su sitio web, estará listo para publicar los cambios en el front-end.

En primer lugar, asegúrese de que ha guardado los cambios y, a continuación, haga clic en el icono X para salir del constructor de páginas y vuelva a la página del constructor de temas en el panel de control de WordPress.

Desde allí, busque el interruptor que dice "Activar SeedProd Theme" y gírelo a la posición .

activar el tema seedprod

Ahora, puede visitar su sitio web en vivo para ver cómo se ven sus personalizaciones. Aquí está la página Comedor que hemos personalizado con una nueva lista de precios en este tutorial:

Ejemplo de lista de precios personalizada en WordPress

¡Eso es!

Esperamos que este artículo te haya ayudado a aprender cómo hacer una lista de precios en WordPress. 

SeedProd es el mejor plugin de WordPress para personalizar su sitio web. No necesitarás ningún código corto, widget o complemento adicional, solo un constructor de páginas sencillo y fácil de usar que te permitirá ponerte en marcha rápidamente.

¿Listo para crear una lista de precios personalizada para WordPress?

También te puede gustar esta revisión de Elementor vs WPBakery vs SeedProd, para ver cómo se comparan.

Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en dejarnos un comentario con tus preguntas y comentarios.

También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.

avatar de autor
Stacey Corrin Escritor
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.