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

Immagina questo scenario: un cliente arriva sul tuo sito, aggiunge due articoli al suo modulo d'ordine e arriva al checkout pronto per acquistare. Poi raggiunge la sezione spedizione e si ferma. Vive a tre isolati dal tuo negozio. Vuole davvero pagare la spedizione e aspettare due giorni quando potrebbe passare a pranzo?

Se il tuo modulo non offre un'opzione di ritiro, probabilmente chiuderà la scheda e ti contatterà invece. O peggio, acquisterà da un concorrente che rende facile il ritiro.

Acquista online, ritira in negozio (BOPIS) non è più solo per i grandi rivenditori. Negozi locali, ristoranti, panetterie e persino fioristi lo offrono perché i clienti se lo aspettano. E la buona notizia è che non hai bisogno di una piattaforma eCommerce completa per farlo funzionare. Con WPForms e il componente aggiuntivo Geolocation, puoi aggiungere un selettore interattivo per il ritiro in negozio a uno qualsiasi dei tuoi moduli d'ordine WordPress.

Posso mostrarti esattamente come farlo. Andiamo!

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

Cosa ti servirà prima di iniziare

Controllo rapido dell'inventario prima di iniziare:

• WPForms Pro o superiore. Il componente aggiuntivo Geolocation è incluso nei piani Pro e superiori.
• Il componente aggiuntivo Geolocation installato e attivato.
• Una chiave API di Google Places o un token di accesso Mapbox. Entrambi funzionano: ti mostreremo come configurarli.
• Un elenco delle tue sedi di ritiro con indirizzi completi, nomi delle attività e tutti i dettagli che desideri i clienti vedano (orari, note sul parcheggio, istruzioni per l'ingresso).

Ecco fatto! Codice personalizzato? No. Plugin separato per la localizzazione del negozio? Non necessario. Giocoleria tra strumenti? Mai!

Ma anche... Perché?

Perché aggiungere un selettore di ritiro invece di un semplice menu a discesa?

Potresti usare un normale campo a discesa che elenca le sedi del tuo negozio. Funzionerebbe. Ma una mappa interattiva fa tre cose che un menu a discesa non farà mai:

• Risponde visivamente a "quale è più vicino a me?". Questo è particolarmente utile se i nomi delle tue sedi non sono ovvi (un cliente potrebbe non conoscere "Riverside" vs "Bridgeview" per nome).
• Costruisce fiducia. Un vero segnaposto sulla mappa dice ai clienti che sei un'attività reale con un indirizzo reale. Questo conta per i nuovi acquirenti.
• Riduce gli errori di ritiro. Quando un cliente vede il segnaposto sulla mappa e lo seleziona da solo, è molto meno probabile che si presenti nella sede sbagliata.

Passaggio 1: Installa e attiva il componente aggiuntivo Geolocation

Accedi alla tua dashboard di WordPress e vai su WPForms » Componenti aggiuntivi. Cerca "Geolocation" e fai clic su Installa componente aggiuntivo. WordPress gestisce il resto.

Una volta attivo, vedrai una nuova scheda Geolocation apparire nelle impostazioni di WPForms.

Passaggio 2: Connetti Google Places

Il campo Mappa recupera i dati della mappa da Google Places. Avrai bisogno di un account Google Cloud gratuito e di una chiave API.

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

Se rimani bloccato sulla fase della chiave API, abbiamo una guida dettagliata alla configurazione nella documentazione del componente aggiuntivo Geolocation che ti guida schermata per schermata nella Google Cloud Console.

Questo è l'unico passaggio leggermente tecnico dell'intera configurazione: circa 10 minuti e lo fai solo una volta.

Passaggio 3: Inizia con il modello di modulo d'ordine per il ritiro in negozio

Puoi costruirlo da zero, ma WPForms ha già un modello che fa il 90% del lavoro per te. Da WPForms » Aggiungi Nuovo, cerca "Modulo Ordine Ritiro in Negozio."

Il modello viene precaricato con:

• Selezione del prodotto basata su immagini
• Opzioni di quantità e colore
• Campi di contatto del cliente
• Un campo Mappa per la selezione della località
• Un campo carta di credito Stripe
• Un totale calcolato che si aggiorna in tempo reale
• Caselle di controllo per l'accettazione dei termini

Con questo modello hai un modulo d'ordine funzionale con un selettore di ritiro già integrato. Da qui, stai personalizzando, non costruendo da zero.

Passaggio 4: Aggiungi le tue sedi di ritiro al campo Mappa

Nell'editor del modulo, trova il campo Mappa nella sezione Campi Fantasia. Fai clic su di esso o trascinalo nell'anteprima del modulo per aggiungerlo.

Quindi fai clic sul campo Mappa nell'anteprima per aprire le sue Opzioni Campo. Nella scheda Generale, vedrai una sezione Località con campi per ogni località di ritiro che desideri mostrare.

Per ogni località:

1. Digita un indirizzo nel campo Indirizzo. Google Places si autocompleterà: scegli la corrispondenza corretta.
2. Aggiungi un Nome (qualcosa che i clienti riconosceranno, come "Sede Centrale in Centro" o "Sportello Ritiro Est")
3. Aggiungi una Descrizione opzionale: qui inserisci i dettagli che evitano chiamate al servizio clienti (orari di ritiro, quale porta usare, se chiamare all'arrivo).
4. Fai clic sul pulsante + per aggiungere la località successiva.

Un paio di impostazioni lato amministratore utili da conoscere:

• Trova Località Vicine: quando attivi questa opzione nell'editor, il tuo browser chiede la tua posizione (quella dell'amministratore) e l'autocompletamento dell'indirizzo dà priorità ai suggerimenti vicini a te. Utile se tutte le tue località di ritiro si trovano nella stessa città della tua scrivania. Non influisce su ciò che i clienti vedono nel frontend.
• Livello di Zoom: il valore predefinito è 15, che è un buon livello di zoom a livello stradale. Questa impostazione viene utilizzata solo quando hai una singola località; una volta aggiunte più località e abilitata la selezione, la mappa si adatta automaticamente per mostrarle tutte e questa impostazione viene disabilitata.

Passaggio 5: Trasforma la mappa in un selettore (questo è quello importante)

Per impostazione predefinita, il campo Mappa è di sola visualizzazione: i clienti possono vedere le tue località ma non sceglierne una. Per trasformarlo in un vero selettore di ritiro, abilita entrambe queste opzioni nella scheda Generale:

• Mostra Elenco Località: visualizza il nome e l'indirizzo di ciascuna località in un elenco di testo sotto la mappa. Questo è importante per l'accessibilità e per gli utenti mobili che hanno difficoltà con le piccole puntine della mappa.
• Consenti Selezione Località: aggiunge pulsanti di opzione accanto a ciascuna località nell'elenco. Questo è ciò che trasforma la mappa in un input del modulo.

Passaggio 6: Personalizza i contrassegni e la visualizzazione della mappa

Alcune modifiche che rendono la mappa personalizzata invece che generica:

Marcatori personalizzati — Per ogni posizione, apri il menu a discesa Icona e scegli:

• Icona — scegli tra oltre 2.000 icone Font Awesome (cerca nell'apposito selettore). L'impostazione predefinita è una stella.
• Immagine — fai clic su Carica immagine per utilizzare il tuo logo o un segnaposto personalizzato dalla tua libreria multimediale.

Quindi imposta la Dimensione (Piccola, Media o Grande) e il colore utilizzando il selettore (colori predefiniti, un selettore personalizzato drag-and-drop o un valore esadecimale). Un marcatore personalizzato più grande aiuta i tuoi negozi a distinguersi dalle altre attività sulla mappa.

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

• Presentazione: Nascondi schermo intero, Nascondi tipo di mappa (satellite/terreno), Nascondi informazioni posizione (popup che appaiono facendo clic su un marcatore), Nascondi Street View. La maggior parte è nascosta per impostazione predefinita per un aspetto più pulito.
• Interattivo: Nascondi controllo fotocamera, Nascondi zoom, Disabilita trascinamento, Disabilita zoom mouse.
• Altro: Mostra nell'invio, Mostra miniatura nell'invio (come appare la mappa nei record di invio), Nascondi etichetta.

Passaggio 7: Usa la logica condizionale per mostrare i dettagli solo per il ritiro

Ecco un dettaglio che la maggior parte dei tutorial salta: il tuo modulo d'ordine probabilmente ha campi che si applicano solo al ritiro o alla spedizione, non a entrambi. Se offri entrambe le opzioni, aggiungi un pulsante di opzione in cima al modulo: "Come desideri ricevere il tuo ordine?" con le opzioni Ritiro e Spedizione.

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

• Il campo Mappa solo quando viene selezionato "Ritiro".
• I campi dell'indirizzo di spedizione solo quando viene selezionato "Spedizione".

Ciò mantiene il tuo modulo breve e pertinente a ciò che il cliente desidera effettivamente.

Passaggio 8: Testalo, quindi pubblica

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

• La mappa si carica velocemente?
• La posizione selezionata appare effettivamente nell'email di conferma?
• Viene visualizzata correttamente in WPForms » Invii quando esamini l'invio?

Nella scheda Avanzate, assicurati che Mostra nell'invio (e opzionalmente Mostra miniatura nell'invio) sia attivo: questo è ciò che rende visibile la posizione selezionata dal cliente a chiunque stia preparando gli ordini per il ritiro.

Dove molti proprietari di negozi portano questo passaggio successivo

Una volta che il modulo di ritiro di base funziona, due miglioramenti valgono la pena di essere conosciuti:

• Integrazione Google Calendar. Collega il modulo al calendario condiviso del tuo team in modo che ogni ritiro venga visualizzato automaticamente come un evento. Alcuni clienti WPForms ci hanno detto che questo ha sostituito un taccuino cartaceo al bancone che portava a doppie prenotazioni.
• Salva e riprendi. Se il tuo modulo d'ordine è lungo, Salva e riprendi consente ai clienti di tornare più tardi senza perdere i progressi.

Nessuno dei due è necessario per il funzionamento del selettore di ritiro, sono solo piacevoli miglioramenti quando sei pronto.

E questa è l'intera configurazione! Campo Mappa più componente aggiuntivo Geolocation più qualche minuto di configurazione ti permettono di ottenere un selettore di ritiro reale e interattivo.

Pronto per aggiungere il ritiro al tuo sito? Acquista WPForms Pro se non l'hai ancora fatto, installa il componente aggiuntivo Geolocation e inizia con il modello Modulo d'ordine per il ritiro in negozio. Puoi avere un modulo funzionante online in pochissimo tempo!

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

Ho bisogno di WPForms Pro per usare il campo Mappa?

Sì. Il campo Mappa fa parte del componente aggiuntivo Geolocation, che è incluso con la licenza Pro o superiore. Se hai WPForms Lite o Basic, dovrai effettuare l'aggiornamento prima che il componente aggiuntivo diventi disponibile.

L'API Google Places è gratuita da usare?

Google Cloud richiede un account di fatturazione, ma Google Places include un generoso credito mensile che copre l'uso gratuito per la maggior parte delle piccole imprese. A meno che tu non stia generando un traffico enorme sul tuo modulo, rimarrai quasi certamente all'interno del livello gratuito. Puoi anche impostare limiti di utilizzo rigidi in Google Cloud se desideri maggiore tranquillità.

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

Il campo Indirizzo raccoglie l'indirizzo del cliente: lo digita e l'autocompletamento lo aiuta a scegliere quello giusto. Il campo Mappa visualizza le tue posizioni preconfigurate su una mappa e consente ai clienti di sceglierne una. Per un selettore di ritiro, vuoi il campo Mappa. Per un indirizzo di spedizione, vuoi il campo Indirizzo. Molti moduli d'ordine li usano entrambi.

Quante sedi di ritiro posso aggiungere a un singolo campo Mappa?

Non c'è un limite rigido: puoi continuare a fare clic sul pulsante + per aggiungerne altri. In pratica, lo manterrei sotto le 10 unità per modulo. Se sei una catena regionale con oltre 30 sedi, considera di aggiungere prima un campo CAP e di utilizzare la logica condizionale per mostrare solo i negozi vicini pertinenti.

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

Sì, ma richiede un passaggio aggiuntivo. Per nascondere i POI come ristoranti e negozi vicini in modo che vengano visualizzati solo i tuoi contrassegni personalizzati, dovrai creare uno stile mappa personalizzato in Google Cloud Console e applicarlo al campo Mappa utilizzando uno snippet di codice. WPForms ha documentazione per sviluppatori sull'applicazione di stili mappa personalizzati se desideri percorrere questa strada.

Come faccio a vedere quale località ha scelto un cliente dopo l'invio del modulo?

Vai su WPForms » Voci e apri l'invio. La località selezionata appare nei dettagli della voce, inclusi nome e indirizzo. Assicurati che Mostra nella voce sia abilitato nella scheda Avanzate del campo Mappa (è abilitato per impostazione predefinita) in modo che la località venga visualizzata nei record delle voci e nelle notifiche e-mail.

Posso collegare le richieste di ritiro a Google Calendar?

Sì, ed è uno degli aggiornamenti più utili per un modulo di ritiro. Installa il componente aggiuntivo Google Calendar e collega il tuo modulo a un calendario condiviso del team in modo che ogni ordine di ritiro crei automaticamente un evento del calendario. Questo sostituisce il problema del taccuino al bancone con cui molte attività commerciali hanno a che fare.

Successivamente, Crea un modulo di prenotazione WordPress multi-sede

Aggiungere un selettore di ritiro al modulo d'ordine non è l'unico modo per utilizzare questa potente funzionalità. Stai prenotando appuntamenti o eventi con i tuoi moduli WordPress? Perché non trasformarlo in un modulo di prenotazione multi-sede? Con il campo mappa, puoi! Dai un'occhiata al tutorial completo per saperne di più.

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

Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.