Come aggiungere un selettore per il ritiro in negozio al modulo d'ordine di WordPress

Immagina questa situazione: un cliente arriva sul tuo sito, aggiunge due articoli al carrello e procede alla cassa, pronto per l'acquisto. Poi, arrivato alla sezione delle spese di spedizione, si ferma un attimo. Abita a tre isolati dal tuo negozio. Vuole davvero pagare le spese di spedizione e aspettare due giorni, quando potrebbe semplicemente venire a piedi durante la pausa pranzo?

Se il tuo modulo non offre l'opzione del ritiro, probabilmente chiuderanno la scheda e ti contatteranno direttamente. O, peggio ancora, acquisteranno da un concorrente che rende il ritiro più semplice.

Il servizio "Acquista online, ritira in negozio" (BOPIS) non è più appannaggio esclusivo dei grandi rivenditori. Negozi di quartiere, ristoranti, panetterie e persino fioristi lo offrono ormai perché i clienti se lo aspettano. E la buona notizia è che non serve una piattaforma di e-commerce completa per farlo funzionare. Con WPForms e l'estensione Geolocation, puoi aggiungere un selettore interattivo per il ritiro in negozio a qualsiasi modulo d'ordine di WordPress.

Posso mostrarti esattamente come si fa. Andiamo!

Come aggiungere un selettore per il ritiro in negozio al modulo d'ordine di WordPress (passo dopo passo)

Cosa ti serve prima di iniziare

Un rapido controllo delle scorte prima di iniziare:

• WPForms Pro o versioni successive. L'estensione Geolocation è inclusa nei piani Pro e superiori.
• L'estensione Geolocation è stata installata e attivata.
• Una chiave API di Google Places o un token di accesso Mapbox. Entrambe funzionano: vedremo come configurarle.
• Un elenco dei tuoi punti di ritiro con indirizzi completi, nomi delle attività commerciali e tutte le informazioni che desideri mostrare ai clienti (orari, indicazioni sui parcheggi, istruzioni per l'accesso).

Ecco fatto! Codice personalizzato? No. Un plugin separato per la ricerca dei punti vendita? Non serve. Passare da uno strumento all'altro? Assolutamente no!

Ma poi… perché?

Perché aggiungere un selettore a levetta invece di un semplice menu a tendina?

Potresti usare un normale menu a tendina che elenchi le sedi dei tuoi negozi. Funzionerebbe. Ma una mappa interattiva offre tre vantaggi che un menu a tendina non potrà mai eguagliare:

• Risponde visivamente alla domanda «quale è il più vicino a me?». Ciò è particolarmente utile se i nomi delle località non sono facilmente riconoscibili (un cliente potrebbe non conoscere la differenza tra «Riverside» e «Bridgeview» solo dal nome).
• Questo crea fiducia. Un vero segnaposto sulla mappa comunica ai clienti che la tua è un'attività reale con un indirizzo reale. Questo è importante per chi acquista per la prima volta.
• In questo modo si riducono gli errori nel ritiro. Quando un cliente vede il segnaposto sulla mappa e lo seleziona autonomamente, è molto meno probabile che si presenti nel posto sbagliato.

Passaggio 1: installa e attiva l'estensione Geolocation

Accedi alla tua dashboard di WordPress e vai su WPForms » Componenti aggiuntivi. Cerca “Geolocalizzazione” e clicca su Installa componente aggiuntivo. WordPress si occuperà del resto.

Una volta attivata, vedrai comparire una nuova scheda "Geolocalizzazione" nelle impostazioni di WPForms.

Passaggio 2: Collega Google Places

Il campo "Mappa" recupera i dati cartografici da Google Places. È necessario disporre di un account Google Cloud gratuito e di una chiave API.

Una volta ottenuta la chiave API, vai su WPForms » Impostazioni » Geolocalizzazione, incolla la chiave e salva le impostazioni.

Se ti blocchi durante la fase relativa alla chiave API, nella documentazione dell'add-on di geolocalizzazione troverai una guida dettagliata alla configurazione che ti accompagnerà passo dopo passo attraverso le schermate della Google Cloud Console.

Questo è l'unico passaggio leggermente tecnico dell'intera configurazione: ci vogliono circa 10 minuti e va fatto solo una volta.

Passaggio 3: Inizia con il modello del modulo per gli ordini con ritiro in negozio

Puoi crearne uno da zero, ma WPForms offre già un modello che ti semplifica il lavoro al 90%. Da WPForms » Aggiungi nuovo, cerca“Modulo ordine con ritiro in negozio”.

Il modello include già:

• Selezione dei prodotti basata sulle immagini
• Opzioni relative alla quantità e al colore
• Campi relativi ai dati dei clienti
• Un campo "Mappa" per la selezione della posizione
• Un campo per la carta di credito Stripe
• Un totale calcolato che si aggiorna in tempo reale
• Caselle di selezione per l'accettazione dei termini

Con questo modello avrai a disposizione un modulo d'ordine funzionante con un selettore per il ritiro già integrato. Da qui in poi, dovrai solo personalizzarlo, senza doverlo creare da zero.

Passaggio 4: aggiungi i punti di ritiro nel campo "Mappa"

Nel generatore di moduli, individua il campo "Mappa" nella sezione "Campi avanzati". Cliccaci sopra o trascinalo nell'anteprima del modulo per aggiungerlo.

Quindi fai clic sul campo "Mappa" nell'anteprima per aprire le relative opzioni. Nella scheda "Generale" vedrai una sezione "Posizioni" con i campi relativi a ciascuna sede di ritiro che desideri visualizzare.

Per ogni sede:

1. Digita un indirizzo nel campo "Indirizzo". Google Places suggerirà alcune opzioni: seleziona quella corretta.
2. Inserisci un nome (qualcosa che i clienti possano riconoscere, come «Negozio principale in centro» o «Sportello ritiro zona est»).
3. Aggiungi una descrizione facoltativa: qui puoi inserire le informazioni che consentono di evitare chiamate al servizio clienti (orari di ritiro, porta da utilizzare, se chiamare all'arrivo).
4. Clicca sul pulsante + per aggiungere la posizione successiva.

Un paio di impostazioni di amministrazione che vale la pena conoscere:

• Trova sedi nelle vicinanze — quando attivi questa opzione nel generatore, il browser richiede la tua posizione (quella dell'amministratore) e la funzione di completamento automatico dell'indirizzo dà la priorità ai suggerimenti nelle tue vicinanze. È utile se tutti i tuoi punti di ritiro si trovano nella stessa città del tuo ufficio. Non influisce su ciò che i clienti vedono nell'interfaccia utente.
• Livello di zoom — il valore predefinito è 15, che corrisponde a un buon livello di zoom a livello stradale. Questa impostazione viene utilizzata solo quando si ha una singola posizione; una volta aggiunte più posizioni e attivata la selezione, la mappa si adatta automaticamente per mostrarle tutte e questa impostazione viene disattivata.

Passaggio 5: Trasforma la mappa in un selettore (questo è il passaggio fondamentale)

Per impostazione predefinita, il campo "Mappa" è di sola visualizzazione: i clienti possono vedere le tue sedi ma non possono selezionarne una. Per trasformarlo in un vero e proprio selettore di ritiro, attiva entrambi questi pulsanti nella scheda "Generale":

• Mostra elenco delle località — visualizza il nome e l'indirizzo di ciascuna località in un elenco di testo sotto la mappa. Ciò è importante per l'accessibilità e per gli utenti di dispositivi mobili che hanno difficoltà a distinguere i piccoli segnaposti sulla mappa.
• Consenti selezione della località — aggiunge dei pulsanti di opzione accanto a ciascuna località nell'elenco. È questa impostazione che trasforma la mappa in un campo di inserimento del modulo.

Passaggio 6: Personalizza gli indicatori sulla mappa e la visualizzazione

Alcune piccole modifiche che conferiscono alla mappa un tocco distintivo invece che generico:

Indicatori personalizzati — Per ogni posizione, apri il menu a tendina "Icona" e seleziona:

• Icona — scegli tra oltre 2.000 icone Font Awesome (cerca nel selettore di icone). L'icona predefinita è una stella.
• Immagine — clicca su «Carica immagine» per inserire il tuo logo o una spilla personalizzata dalla tua libreria multimediale.

Imposta quindi la dimensione (Piccola, Media o Grande) e il colore utilizzando il selettore (colori predefiniti, un selettore personalizzato con funzione "trascina e rilascia" o un valore esadecimale). Un indicatore con il marchio più grande aiuta i tuoi negozi a distinguersi dagli altri esercizi commerciali sulla mappa.

Impostazioni della scheda Avanzate — fare clic sulla scheda Avanzate in Opzioni campo per i controlli di presentazione e interazione:

• Impostazioni: Nascondi schermo intero, Nascondi tipo di mappa (satellite/rilievo), Nascondi informazioni sulla posizione (finestre pop-up che compaiono quando si clicca su un indicatore), Nascondi Street View. La maggior parte di queste opzioni è disattivata di default per garantire una visualizzazione più pulita.
• Interattivo: nascondi i comandi della videocamera, nascondi lo zoom, disabilita il trascinamento, disabilita lo zoom con il mouse.
• Altro: Mostra nella voce, Mostra miniatura nella voce (come appare la mappa nei record inviati), Nascondi etichetta.

Passaggio 7: utilizzare la logica condizionale per visualizzare i dettagli relativi al solo ritiro

Ecco un dettaglio che la maggior parte dei tutorial tralascia: il tuo modulo d'ordine contiene probabilmente campi che si applicano solo al ritiro o alla spedizione, non a entrambi. Se offri entrambe le opzioni, aggiungi un pulsante di opzione nella parte superiore del modulo con la domanda: «Come desideri ricevere il tuo ordine?», con le opzioni «Ritiro» e «Spedizione».

Quindi usa la logica condizionale (integrata in WPForms Pro) per mostrare:

• Il campo Mappa è visibile solo se è selezionata l'opzione «Ritiro».
• I campi relativi all'indirizzo di spedizione vengono visualizzati solo se si seleziona "Spedizione".

In questo modo il modulo rimane breve e pertinente rispetto a ciò che il cliente desidera realmente.

Passaggio 8: provalo, poi pubblicalo

Salva il modulo e incorporalo in una pagina utilizzando il blocco WPForms. Prima di pubblicizzarlo ovunque, provalo tu stesso sia su computer che su dispositivo mobile:

• La mappa si carica velocemente?
• La località che hai selezionato compare effettivamente nell'e-mail di conferma?
• Quando visualizzi l'invio, viene visualizzato correttamente in WPForms » Inserimenti?

Nella scheda "Avanzate", assicurati che l'opzione "Mostra nella voce" (e, se lo desideri, anche "Mostra miniatura nella voce") sia attivata: in questo modo la località selezionata dal cliente sarà visibile a chi prepara gli ordini nel reparto ritiro.

È qui che molti negozianti fanno il passo successivo

Una volta che la forma base del pickup funziona, vale la pena conoscere due miglioramenti:

• Integrazione con Google Calendar. Collega il modulo al calendario condiviso del tuo team in modo che ogni ritiro venga automaticamente visualizzato come evento. Alcuni clienti di WPForms ci hanno riferito che questa soluzione ha sostituito il taccuino cartaceo che tenevano al bancone e che causava spesso doppie prenotazioni.
• Salva e riprendi. Se il modulo d'ordine è lungo, la funzione "Salva e riprendi" consente ai clienti di tornare in un secondo momento senza perdere i dati inseriti.

Nessuno dei due è indispensabile per il funzionamento del selettore dei pickup; sono semplicemente degli ottimi aggiornamenti per quando sarai pronto.

E questo è tutto! Il campo "Mappa", l'estensione "Geolocalizzazione" e pochi minuti di configurazione ti consentono di ottenere un vero e proprio selettore di ritiro interattivo.

Sei pronto ad aggiungere il ritiro in negozio al tuo sito? Se non l'hai ancora fatto, scarica WPForms Pro, installa il componente aggiuntivo Geolocation e inizia con il modello "Modulo d'ordine con ritiro in negozio". Avrai un modulo funzionante online in men che non si dica!

Domande frequenti sull'aggiunta di un selettore per il ritiro in negozio

Devo avere WPForms Pro per poter utilizzare il campo "Mappa"?

Sì. Il campo «Mappa» fa parte dell'estensione «Geolocalizzazione», inclusa nella licenza Pro o in quelle superiori. Se utilizzi WPForms Lite o Basic, dovrai effettuare l'aggiornamento prima che l'estensione sia disponibile.

L'API di Google Places è gratuita?

Google Cloud richiede un account di fatturazione, ma Google Places offre un generoso credito mensile che copre l'utilizzo gratuito per la maggior parte delle piccole imprese. A meno che il tuo modulo non generi un traffico enorme, rimarrai quasi certamente entro i limiti del piano gratuito. Se vuoi stare tranquillo, puoi anche impostare dei limiti massimi di utilizzo in Google Cloud.

Qual è la differenza tra il campo "Indirizzo" e il campo "Mappa"?

Il campo "Indirizzo" raccoglie l'indirizzo del cliente: il cliente lo digita e la funzione di completamento automatico lo aiuta a selezionare quello corretto. Il campo "Mappa" mostra le sedi preconfigurate su una mappa e consente ai clienti di selezionarne una. Per la selezione del punto di ritiro, è necessario utilizzare il campo "Mappa". Per l'indirizzo di spedizione, è necessario utilizzare il campo "Indirizzo". Molti moduli d'ordine utilizzano entrambi.

Quanti punti di ritiro posso aggiungere a un singolo campo della mappa?

Non c'è un limite massimo: puoi continuare a cliccare sul pulsante "+" per aggiungerne altri. In pratica, in un singolo modulo ne terrei meno di 10. Se sei una catena regionale con più di 30 punti vendita, valuta la possibilità di aggiungere prima un campo per il codice postale e di utilizzare la logica condizionale per mostrare solo i negozi vicini pertinenti.

Posso nascondere altre attività commerciali e punti di interesse sulla mia mappa?

Sì, ma è necessario un passaggio in più. Per nascondere i punti di interesse (POI) come ristoranti e negozi nelle vicinanze in modo che vengano visualizzati solo i tuoi indicatori personalizzati, dovrai creare unostile di mappa personalizzatonella Google Cloud Console e applicarlo al campo "Mappa" utilizzando un frammento di codice. WPForms mette a disposizioneuna documentazione per sviluppatori sull'applicazione degli stili di mappa personalizzati,se desideri seguire questa procedura.

Come faccio a vedere quale sede ha scelto un cliente dopo aver inviato il modulo?

Vai su WPForms » Iscrizioni e apri il modulo inviato. La posizione selezionata viene visualizzata nei dettagli dell'iscrizione, insieme al nome e all'indirizzo. Assicurati che l'opzione "Mostra nell'iscrizione" sia abilitata nella scheda "Avanzate" del campo "Mappa" (è abilitata per impostazione predefinita), in modo che la posizione venga visualizzata nei record delle iscrizioni e nelle notifiche via e-mail.

Posso collegare gli invii dei pickup a Google Calendar?

Sì, ed è una delle funzionalità più utili per un modulo di ritiro. Installa l'estensione di Google Calendar e collega il tuo modulo a un calendario condiviso del team, in modo che ogni ordine con ritiro crei automaticamente un evento nel calendario. Questo risolve il problema del "quaderno sul bancone" che affligge molti negozi.

Successivamente, crea un modulo di prenotazione WordPress per più sedi

Inserire un selettore di ritiro nel modulo d'ordine non è l'unico modo per sfruttare questa potente funzionalità. Stai prenotando appuntamenti o eventi tramite i tuoi moduli WordPress? Perché non trasformarlo in un modulo di prenotazione con più sedi? Grazie al campo mappa, puoi farlo! Dai un'occhiata al tutorial completo per scoprire come.

Siete pronti a creare il vostro modulo? Iniziate oggi stesso con il più semplice plugin per la creazione di moduli per WordPress. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo vi ha aiutato, seguiteci su Facebook e Twitter per altre guide e tutorial gratuiti su WordPress.