Cómo agregar una calculadora de costos a un sitio web de WordPress: una solución simple pero elegante

Agregar una calculadora de costos al sitio web de su empresa puede ser una excelente manera de mejorar sus resultados. Al permitir que los clientes potenciales determinen rápida y fácilmente cuánto costarán sus productos o servicios, puede facilitar su proceso de toma de decisiones. Como resultado, es más probable que lo elijan a usted sobre sus competidores.

Hay varias formas de agregar la funcionalidad básica de estimación de costos a un sitio web, como usar widgets o CSS. Sin embargo, el complemento de calculadora de costos de Stylemix Themes para WordPress ofrece una forma más elegante y versátil.

¿Qué es una calculadora de costos?

Las calculadoras de costos recopilan ciertas variables de los visitantes del sitio web para calcular el precio total de un producto o servicio.

Por ejemplo, si su sitio web vende ventanas, los campos de entrada pueden incluir las dimensiones de la apertura de la ventana, el tipo de material del marco, doble o simple acristalamiento, etc., todo lo cual afecta el precio. Una vez que el visitante ha ingresado todos los datos requeridos, la calculadora genera automáticamente el costo de la ventana, lo que le evita tener que hacerlo manualmente.

Aplicaciones típicas de la calculadora de costos

Hay tantas empresas que pueden hacer uso de una calculadora de costos, y estos son solo algunos ejemplos típicos:

• aserraderos
• Salones, salones de belleza y spas
• Agencias de alquiler de vehículos y equipos
• Agencias de diseño gráfico y web
• Proveedores de servicios médicos
• empresas de alojamiento web
• Servicios profesionales como redacción, teneduría de libros, etc.
• Servicios de limpieza y limpieza
• Servicios de impresión
• Yeseros, pintores, albañiles, etc.
• Empresas de pisos
• Y muchos más…

La lista es prácticamente interminable, y cualquier empresa que prepara cotizaciones y estimaciones manualmente a menudo puede beneficiarse significativamente al agregar una calculadora de costos a su sitio web.

Además, estas calculadoras no están necesariamente restringidas a cálculos de costos. Por ejemplo, un sitio web de un gimnasio o un blog de fitness puede tener una calculadora de IMC, mientras que un sitio de recetas puede usarlos para conversiones métricas a imperiales.

Complemento de calculadora de costos de Stylemix Themes para WordPress

El complemento de calculadora de costos para WordPress de Stylemix Themes incluye todas las funciones necesarias para agregar calculadoras de costos atractivas y con todas las funciones a su sitio web de manera rápida y sencilla.

Hay disponible una versión gratuita del complemento. Cuenta con excelentes funciones de inicio, que incluyen un poderoso generador de calculadoras, formularios ilimitados, varias opciones de personalización, estimaciones de costos instantáneas, opciones de moneda, una interfaz fácil de usar, etc.

Sin embargo, recomiendo la versión Pro ya que trae muchas más funciones útiles a la mesa, que incluyen:

El artículo continúa a continuación

• sistema condicional
• Selector de fechas, control deslizante de rango múltiple, menú desplegable de imágenes y elementos personalizados de carga de archivos
• Integración WooCommerce
• Posibilidad de agregar varias calculadoras en una página
• Amplia gama de funciones de personalización
• Formulario de calculadora preconstruido con instrucciones para una variedad de industrias
• Integración de Stripe y PayPal
• Formulario de contacto 7 e integración de formulario de envío
• seguridad reCAPTCHA
• Duplicado de calculadora y facilidades de importación/exportación
• Panel de pedidos, incluido el seguimiento de pedidos sin problemas
• soporte prémium

La siguiente tabla detalla los precios actuales para la versión Pro:

Obtenga el complemento de calculadora de costos para WordPress Pro

Instalación del complemento Calculadora de costos para WordPress

La versión gratuita del complemento Cost Calculator está disponible en el directorio de complementos de WordPress, o puede obtenerla a través del sitio web del complemento. No voy a pasar por todo el proceso de instalación y activación, ya que es el mismo que para cualquier otro complemento. Sin embargo, si no está seguro de cómo hacerlo, la documentación cubre el proceso.

Para la versión Pro, deberá comprar una licencia y descargar el complemento a través del sitio web del complemento. Antes de instalarlo, es importante tener en cuenta que primero deberá instalar la versión gratuita. Si intenta instalar la versión Pro solo, se le pedirá que instale primero la versión gratuita.

Después de activar la versión Pro, deberá ingresar la clave de licencia que recibió cuando la compró:

Una vez que el complemento esté instalado y activado, aparecerá un nuevo elemento de menú en su panel de WordPress; aquí es donde crea sus calculadoras:

Agregar una calculadora de costos a un sitio web

Ahora pasaré por el proceso de agregar una calculadora de costos básica a un sitio web utilizando el complemento de calculadora de costos. Digo básico porque el complemento es capaz de mucho más de lo que puede cubrir el alcance de este artículo. Por lo tanto, sugiero encarecidamente leer el sitio web y la documentación del complemento para ver qué más puede hacer. Además, el desarrollador también ha creado una biblioteca de videos útiles que incluye algunos tutoriales.

Paso 1

En el nuevo elemento del menú Calculadora de costos que aparece en el backend de WordPress, haga clic en la calculadora de costos y luego haga clic en el botón verde 'Crear nuevo':

Paso 2

En la pestaña 'Calculadora', ingrese un nombre para la nueva calculadora y luego presione el botón verde con el símbolo '+':

Está bien usar cualquier nombre, pero sugiero que sea relevante, para que sea fácil de recordar.

El artículo continúa a continuación

Paso 3

A continuación, aparecerá un panel que contiene un área de trabajo donde se construirá la calculadora de costos usando elementos de arrastrar y soltar:

Como puede ver, en el lado derecho, hay varios elementos con los que jugar, aunque los que se usan finalmente dependen de lo que se requiere que haga la calculadora.

En mi caso, quiero que calcule el costo de los servicios de redacción y usaré un control deslizante para la cantidad de palabras. Simplemente arrastre y suelte el Botón de rango (que es un control deslizante de rango) desde la lista de elementos a la derecha hasta donde dice "Colocar elemento aquí":

Paso 4

Después de colocar un elemento en su lugar, aparece inmediatamente una ventana emergente que contiene varias opciones de configuración que variarán según el elemento seleccionado. Por ejemplo, en el caso del Botón de rango, es necesario proporcionar cosas como una descripción de cómo usar el control deslizante, los valores de rango máximo y mínimo, el paso de rango, etc. Otros tipos de elementos mostrarán diferentes opciones de configuración.

A continuación se muestra la configuración del botón de rango para mi calculadora de costos de redacción. Quería que el control deslizante comenzara con un mínimo de 500 palabras y llegara hasta un máximo de 25 000 en incrementos de 500. Notará que puse 'palabras' en el campo de moneda, ya que el rango debe ser palabras en lugar de $:

Después de ingresar las configuraciones para el elemento elegido, presione el botón verde 'Guardar'. Para probar el botón y ver cómo se verá la calculadora de costos, simplemente presione 'Vista previa':

No se preocupe si el cálculo en la sección Resumen total es incorrecto, eso se corregirá más adelante.

Paso 5

Por supuesto, es posible agregar muchos más elementos a la calculadora si es necesario. Por ejemplo, agregaré una casilla de verificación que le permita a mi cliente elegir si desea un tiempo de respuesta de 24 horas por un recargo de $200.

Después de arrastrar y soltar el elemento Checkbox en la calculadora, agregué las siguientes configuraciones:

Aquí está la casilla de verificación terminada en acción:

El artículo continúa a continuación

Paso 6

Ahora que se han agregado todos los elementos necesarios, es necesario que se calculen correctamente en el Resumen total.

Para hacer esto, usamos el elemento Total. Nuevamente, simplemente arrástrelo y suéltelo en su posición, después de lo cual aparecerá el panel de configuración:

El cálculo que necesito es:

(salida del control deslizante de rango x mi tarifa de $0.08 por palabra) + salida de la casilla de verificación de servicio de 24 horas

Verá debajo de los campos disponibles dos botones verdes: 'range_field_id_0' y 'checkbox_field_id_2'. Estos contienen las salidas del botón de rango y la casilla de verificación, respectivamente. Si se agregaran otros elementos, estos también aparecerían como botones verdes aquí.

Para construir la fórmula, esta es la secuencia de acciones que debo seguir:

1. Haga clic en ( en 'Operadores disponibles' para abrir el paréntesis en el campo Fórmula de la calculadora
2. Haga clic en el botón verde 'range_field_id_0' para agregarlo al campo 'Calculator Formula'
3. Haga clic en * en 'Operadores disponibles' para agregar el operador de multiplicación
4. Escriba 0,08 (es decir, mi tarifa por palabra) junto al *
5. Haga clic en ) en 'Operadores disponibles' para cerrar el paréntesis
6. Haga clic en + en 'Operadores disponibles' para agregar el operador de suma
7. Haga clic en el botón verde 'checkbox_field_id_2' para agregarlo al campo 'Calculator Formula'

Así es como se ve el cálculo terminado:

Ahora todos hagan clic en 'Guardar' y obtengan una vista previa de la calculadora para comprobar que todo funciona bien:

El elemento Total es extremadamente poderoso, ya que puede usar los Operadores disponibles para construir cálculos complejos usando los resultados generados por cualquiera de los otros elementos usados.

Paso 7

Mi calculadora básica ahora está completa y lista para insertarse en mi sitio web, lo cual es muy fácil de hacer.

Simplemente haga clic en 'Calculadora de costos' en el menú del panel de administración de WordPress. Eso lo llevará a la página 'Mis calculadoras', donde encontrará una lista de todas las calculadoras creadas (como solo construí una, eso es todo lo que contiene mi lista). A continuación, haga clic en el código abreviado contra la calculadora que desea use – que copiará el shortcode al portapapeles:

Vaya a la publicación o página de WordPress donde desea colocar la calculadora, y simplemente inserte el código corto donde lo necesite usando el bloque 'Código corto' (o elemento si usa Elementor):

Al publicar la página o la publicación, se activa la calculadora:

¡Eso no es todo, amigos!

Por supuesto, se pueden hacer muchas otras cosas con la calculadora usando las funciones y opciones contenidas en las pestañas Condiciones, Configuración y Personalizar. La información detallada sobre ellos está disponible en la documentación del complemento y la biblioteca de videos. Sin embargo, aquí hay un resumen del propósito de cada pestaña:

Condiciones

Si bien el elemento Total discutido anteriormente permite crear ecuaciones matemáticas complejas, la pestaña Condiciones, que es solo una función Pro, las expande aún más utilizando condiciones lógicas. Por ejemplo, Y, O, está/no está seleccionado, es mayor/menor que, es/no es igual a, etc., todos están disponibles.

Las condiciones disponibles dependen de los elementos en uso, y crear relaciones es fácil gracias a arrastrar y soltar.

Ajustes

La pestaña de Ajustes contiene configuraciones globales generales, como el símbolo de moneda a utilizar, la redacción requerida para el resumen total, si mostrar valores cero o no, etc. También incluye las configuraciones para formularios, WooCommerce, integraciones de pago, etc.

También puede notar que el menú Calculadora de costos en el panel de administración de WordPress contiene una opción de 'Pedidos'. Esto permite el seguimiento de pedidos de calculadoras que se han monetizado utilizando una de las integraciones de pago:

personalizar

La pestaña Personalizar incluye toneladas de opciones para mejorar las calculadoras o hacer que coincidan con la marca de un sitio. Una característica particularmente interesante de esta pestaña es que puede ver los cambios realizados en la calculadora en tiempo real antes de guardarlos.

El veredicto

Debo decir que estoy enamorado del complemento de calculadora de costos de Stylemix Themes para WordPress y definitivamente lo usaré en los sitios web de mi negocio.

Crear calculadoras simples y complejas es muy sencillo gracias a una interfaz intuitiva, arrastrar y soltar y documentación detallada. Además, las calculadoras agregan un elemento interactivo a su sitio, lo que ayuda con el compromiso. Lo mejor de todo es que las integraciones de PayPal y Stripe permiten a sus clientes seleccionar las opciones que desean y pagar a través de la calculadora para que pueda capturar su negocio (y dólares) de inmediato.

Cualquiera que sea el tipo de negocio que tenga, es posible que su sitio web se beneficie de la adición de una calculadora. No solo creará una mejor experiencia de usuario para los visitantes del sitio, sino que también les brindará la información de costos personalizada que necesitan automáticamente, lo que les permitirá tomar una decisión de compra inmediata. Y el complemento de calculadora de costos para WordPress hará que agregar calculadoras a su sitio sea muy fácil.

Pruebe el complemento de calculadora de costos