Come aggiungere un calcolatore di costi a un sito Web WordPress: una soluzione semplice ma elegante

Pubblicato: 2022-06-28

L'aggiunta di un calcolatore dei costi al sito Web della tua attività può essere un ottimo modo per migliorare i tuoi profitti. Consentendo ai potenziali clienti di determinare in modo rapido e semplice quanto costeranno i tuoi prodotti o servizi, puoi semplificare il loro processo decisionale. Di conseguenza, è più probabile che scelgano te rispetto ai tuoi concorrenti.

Esistono diversi modi per aggiungere funzionalità di stima dei costi di base a un sito Web, ad esempio utilizzando widget o CSS. Tuttavia, il plug-in per il calcolo dei costi di Stylemix Themes per WordPress offre un modo più elegante e versatile.

Che cos'è un calcolatore dei costi?

I calcolatori dei costi raccolgono determinate variabili dai visitatori del sito Web per calcolare il prezzo totale di un prodotto o servizio.

Ad esempio, se il tuo sito Web vende finestre, i campi di input possono includere le dimensioni dell'apertura della finestra, il tipo di materiale del telaio, i vetri doppi o singoli, ecc., che incidono tutti sul prezzo. Una volta che il visitatore ha inserito tutti i dati richiesti, il calcolatore genera automaticamente il costo della finestra, risparmiandoti così di doverlo fare manualmente.

Applicazioni tipiche per il calcolo dei costi

Ci sono così tante aziende che possono utilizzare un calcolatore dei costi, e qui ci sono solo alcuni esempi tipici:

  • Segherie
  • Saloni, saloni di bellezza e spa
  • Agenzie di noleggio auto e attrezzature
  • Agenzie grafiche e web designer
  • Fornitori di servizi medici
  • Società di web hosting
  • Servizi professionali come copywriting, contabilità, ecc.
  • Servizi di pulizia e pulizia
  • Servizi di stampa
  • Intonacatori, imbianchini, muratori, ecc.
  • Aziende di pavimenti
  • E tanti altri…

L'elenco è praticamente infinito e le aziende che preparano manualmente preventivi e preventivi possono spesso trarre notevoli vantaggi dall'aggiunta di un calcolatore di costi al proprio sito Web.

Inoltre, questi calcolatori non sono necessariamente limitati al calcolo dei costi. Ad esempio, un sito Web di un centro benessere o un blog di fitness possono avere un calcolatore dell'IMC, mentre un sito di ricette può utilizzarli per conversioni da metriche a imperiali.

Plugin per il calcolo dei costi di Stylemix Themes per WordPress

Il plug-in per il calcolo dei costi per WordPress di Stylemix Themes include tutte le funzionalità necessarie per aggiungere calcolatori di costi attraenti e completi al tuo sito Web in modo rapido e semplice.

È disponibile una versione gratuita del plugin. Vanta eccellenti funzionalità di base, tra cui un potente generatore di calcolatrici, moduli illimitati, varie opzioni di personalizzazione, stime istantanee dei costi, opzioni di valuta, un'interfaccia intuitiva, ecc.

Tuttavia, consiglio la versione Pro in quanto offre molte funzionalità più utili, tra cui:

L'articolo continua di seguito

  • Sistema condizionale
  • Selettore data, dispositivo di scorrimento multi-intervallo, menu a discesa dell'immagine ed elementi personalizzati per il caricamento di file
  • Integrazione WooCommerce
  • Possibilità di aggiungere più calcolatrici su una pagina
  • Ampia gamma di funzioni di personalizzazione
  • Modulo calcolatrice pre-costruito con istruzioni per una varietà di settori
  • Integrazione con Stripe e PayPal
  • Modulo di contatto 7 e Integrazione del modulo di invio
  • sicurezza reCAPTCHA
  • Calcolatrice duplicati e servizi di importazione/esportazione
  • Dashboard degli ordini, incluso il monitoraggio degli ordini senza problemi
  • Supporto premium

La tabella seguente descrive in dettaglio i prezzi attuali per la versione Pro:

Massimo Numero di siti web Annuale Tutta la vita
1 $ 29,99 $ 99,99
5 $ 79,99 $ 239,99
25 $ 199,99 $ 599,99

Ottieni il plug-in per il calcolo dei costi per WordPress Pro

Installazione del plugin Cost Calculator per WordPress

La versione gratuita del plug-in Cost Calculator è disponibile nella directory dei plug-in di WordPress, oppure puoi ottenerla tramite il sito Web del plug-in. Non seguirò l'intero processo di installazione e attivazione, poiché è lo stesso di qualsiasi altro plug-in. Tuttavia, se non sei sicuro di come farlo, la documentazione copre il processo.

Per la versione Pro, dovrai acquistare una licenza e scaricare il plug-in tramite il sito Web del plug-in. Prima di installarlo, è importante notare che dovrai prima installare la versione gratuita. Se tenti di installare la versione Pro da solo, ti verrà chiesto di installare prima quella gratuita.

Dopo aver attivato la versione Pro, dovrai inserire la chiave di licenza che hai ricevuto al momento dell'acquisto:

Schermata che mostra dove viene inserito il plug-in Cost Calculator per la chiave di licenza di WordPress

Una volta che il plug-in è installato e attivato, una nuova voce di menu apparirà nel tuo pannello di WordPress: è qui che crei le tue calcolatrici:

Posizione del menu del plug-in Cost Calculator nel pannello di amministrazione di WordPress

Aggiunta di un calcolatore di costi a un sito web

Ora esaminerò il processo di aggiunta di un calcolatore dei costi di base a un sito Web utilizzando il plug-in per il calcolo dei costi. Dico di base in quanto il plug-in è in grado di fare molto di più di quanto lo scopo di questo articolo possa coprire. Pertanto, suggerisco vivamente di leggere il sito Web e la documentazione del plug-in per vedere cos'altro può fare. Inoltre, lo sviluppatore ha anche creato una libreria di video utili che include alcuni tutorial.

Passo 1

Nella nuova voce di menu Calcolatore costi che appare nel backend di WordPress, fai clic su Calcolatore costi, quindi fai clic sul pulsante verde "Crea nuovo":

Il pannello Calcolatore dei costi nell'area di amministrazione di WordPress

Passo 2

Nella scheda "Calcolatrice", inserisci un nome per la nuova calcolatrice, quindi premi il pulsante verde con il simbolo "+":

Creazione di un nuovo calcolatore dei costi

Va bene usare qualsiasi nome, ma suggerisco di renderlo rilevante, quindi è facile da ricordare.

L'articolo continua di seguito

Hosting SiteGround

Passaggio 3

Successivamente, verrà visualizzato un pannello contenente un'area di lavoro in cui verrà creato il calcolatore dei costi utilizzando elementi di trascinamento della selezione:

Il pannello della calcolatrice in cui vengono create le calcolatrici

Come puoi vedere, sul lato destro, ci sono vari elementi con cui giocare, anche se quelli utilizzati in definitiva dipendono da ciò che la calcolatrice deve fare.

Nel mio caso, voglio che calcoli il costo dei servizi di copywriting e utilizzerà un dispositivo di scorrimento per il numero di parole. Basta trascinare e rilasciare il pulsante Intervallo (che è un dispositivo di scorrimento dell'intervallo) dall'elenco di elementi a destra nel punto in cui dice "Posiziona elemento qui":

Immagine che mostra il pulsante Intervallo trascinato nell'area della calcolatrice

Passaggio 4

Dopo aver posizionato un elemento, appare immediatamente un popup contenente varie opzioni di configurazione che variano a seconda dell'elemento selezionato. Ad esempio, nel caso del pulsante Intervallo, è necessario fornire elementi come una descrizione di come utilizzare il dispositivo di scorrimento, i valori dell'intervallo massimo e minimo, il passo dell'intervallo, ecc. – altri tipi di elementi mostreranno diverse opzioni di configurazione.

Di seguito è riportata la configurazione del pulsante dell'intervallo per il mio calcolatore dei costi di copywriting. Volevo che il dispositivo di scorrimento iniziasse con un minimo di 500 parole e salisse fino a un massimo di 25.000 con incrementi di 500. Noterai che ho inserito "parole" nel campo della valuta poiché l'intervallo deve essere parole anziché $:

Il pannello di configurazione del pulsante Intervallo
Il pannello di configurazione del pulsante Intervallo (continua)

Dopo aver inserito le configurazioni per l'elemento scelto, premi il pulsante verde 'Salva'. Per testare il pulsante e vedere come apparirà il calcolatore dei costi, premi semplicemente "Anteprima":

Un'anteprima della calcolatrice in azione

Non preoccuparti se il calcolo nella sezione Riepilogo totale non è corretto, verrà corretto in seguito.

Passaggio 5

Naturalmente, se necessario, è possibile aggiungere molti altri elementi alla calcolatrice. Ad esempio, aggiungerò una casella di controllo che consente al mio cliente di scegliere se desidera una consegna entro 24 ore con un supplemento di $ 200.

Dopo aver trascinato e rilasciato l'elemento Checkbox nella calcolatrice, ho aggiunto le seguenti configurazioni:

Il pannello di configurazione della casella di controllo

Ecco la casella di controllo finita in azione:

L'articolo continua di seguito

Hosting Woocommerce
Anteprima della casella di controllo in azione nella calcolatrice

Passaggio 6

Ora che gli elementi richiesti sono stati tutti aggiunti, è necessario farli calcolare correttamente nel Riepilogo Totale.

Per fare ciò, utilizziamo l'elemento Totale. Ancora una volta, trascinalo e rilascialo in posizione, dopodiché verrà visualizzato il pannello di configurazione:

Il pannello di configurazione dell'elemento Campo

Il calcolo di cui ho bisogno è:

(output dal dispositivo di scorrimento dell'intervallo x la mia tariffa di $ 0,08 per parola) + output dalla casella di controllo del servizio 24 ore su 24

Vedrai sotto i campi disponibili due pulsanti verdi: 'range_field_id_0' e 'checkbox_field_id_2.' Questi contengono rispettivamente gli output del pulsante Intervallo e della casella di controllo. Se sono stati aggiunti altri elementi, anche quelli apparirebbero come pulsanti verdi qui.

Per costruire la formula, questa è la sequenza di azioni che devo seguire:

  1. Fare clic su ( in 'Operatori disponibili' per aprire la parentesi nel campo Formula calcolatrice
  2. Fare clic sul pulsante verde 'range_field_id_0' per aggiungerlo al campo 'Calculator Formula'
  3. Fare clic su * in 'Operatori disponibili' per aggiungere l'operatore di moltiplicazione
  4. Digita 0.08 (cioè la mia tariffa per parola) accanto a *
  5. Fare clic su ) in 'Operatori disponibili' per chiudere la parentesi
  6. Fare clic su + in "Operatori disponibili" per aggiungere l'operatore di addizione
  7. Fare clic sul pulsante verde 'checkbox_field_id_2' per aggiungerlo al campo 'Formula calcolatrice'

Ecco come appare il calcolo finito:

Il pannello di configurazione dell'elemento campo che mostra la formula completata

Ora fai clic su "Salva" e visualizza l'anteprima della calcolatrice per verificare che tutto funzioni correttamente:

Anteprima del calcolatore dei costi completato

L'elemento Totale è estremamente potente, poiché puoi utilizzare gli operatori disponibili per costruire calcoli complessi utilizzando gli output generati da uno qualsiasi degli altri elementi utilizzati.

Passaggio 7

La mia calcolatrice di base è ora completa e pronta per essere inserita nel mio sito Web, il che è semplicissimo da fare.

Basta fare clic su "Calcolatrice dei costi" nel menu del pannello di amministrazione di WordPress. Questo ti porterà alla pagina "Le mie calcolatrici", dove troverai un elenco di tutte le calcolatrici create (poiché ne ho creata solo una, cioè tutta la mia lista contiene.) Quindi, fai clic sullo shortcode rispetto alla calcolatrice che desideri use – che copierà lo shortcode negli appunti:

Posizione dello shortcode utilizzato per incorporare la calcolatrice nel contenuto

Vai al post o alla pagina di WordPress in cui desideri posizionare la calcolatrice e inserisci semplicemente lo shortcode ovunque ti serva utilizzando il blocco "Shortcode" (o l'elemento se utilizzi Elementor):

Shortcode incorporato in un post stupido

La pubblicazione della pagina o del post imposta quindi la calcolatrice attiva:

Anteprima della calcolatrice incorporata in un post

Non è tutto, gente!

Naturalmente, è possibile fare molte altre cose alla calcolatrice utilizzando le funzioni e le opzioni contenute nelle schede Condizioni, Impostazioni e Personalizza. Informazioni dettagliate su questi sono disponibili nella documentazione del plug-in e nella libreria video. Tuttavia, ecco un riepilogo dello scopo di ciascuna scheda:

Condizioni

Mentre l'elemento Totale discusso in precedenza consente di creare equazioni matematiche complesse, la scheda Condizioni, che è solo una funzionalità Pro, le espande ulteriormente utilizzando condizioni logiche. Ad esempio, AND, OR, è/non è selezionato, è maggiore/minore di, è/non è uguale a, ecc. sono tutti disponibili.

Le condizioni disponibili dipendono dagli elementi in uso e creare relazioni è facile grazie al trascinamento della selezione.

Il pannello Condizioni

Impostazioni

La scheda Impostazioni contiene le configurazioni globali generali, come il simbolo della valuta da utilizzare, la dicitura richiesta per il riepilogo totale, se visualizzare o meno valori zero, ecc. Include anche le configurazioni per i moduli, WooCommerce, integrazioni di pagamento, ecc.

Il pannello Impostazioni

Potresti anche notare che il menu Calcolatore dei costi nel pannello di amministrazione di WordPress contiene un'opzione "Ordini". Ciò consente il monitoraggio degli ordini dai calcolatori che sono stati monetizzati utilizzando una delle integrazioni di pagamento:

Il pannello Ordini

personalizzare

La scheda Personalizza include tantissime opzioni per ravvivare le calcolatrici o farle corrispondere al marchio di un sito. Una caratteristica particolarmente interessante di questa scheda è che puoi vedere le modifiche apportate alla calcolatrice in tempo reale prima di salvarle.

Il pannello Personalizza che mostra la calcolatrice dopo aver aggiunto alcune personalizzazioni

Il verdetto

Devo dire che sono innamorato del plug-in per il calcolo dei costi di Stylemix Themes per WordPress e lo utilizzerò sicuramente sui miei siti Web aziendali.

Creare calcolatrici sia semplici che complesse è un gioco da ragazzi grazie a un'interfaccia intuitiva, drag-and-drop e documentazione dettagliata. Inoltre, i calcolatori aggiungono un elemento interattivo al tuo sito, che aiuta con il coinvolgimento. Soprattutto, le integrazioni PayPal e Stripe consentono ai tuoi clienti di selezionare le opzioni che desiderano e pagare tramite il calcolatore in modo da poter acquisire immediatamente la loro attività (e dollari).

Qualunque sia il tipo di attività che gestisci, è possibile che il tuo sito web possa trarre vantaggio dall'aggiunta di una calcolatrice. Non solo creerà una migliore esperienza utente per i visitatori del sito, ma fornirà loro anche automaticamente le informazioni personalizzate sui costi di cui hanno bisogno, consentendo loro di prendere una decisione di acquisto immediata. E il plug-in Cost Calculator per WordPress renderà semplicissimo l'aggiunta di calcolatrici al tuo sito.

Prova il plug-in Calcolatore di costi