Cómo añadir un selector de recogida en tienda a tu formulario de pedido de WordPress

Imagina este escenario: un cliente llega a tu sitio, añade dos artículos a su formulario de pedido y llega a la caja listo para comprar. Luego llega a la sección de envíos y se detiene. Vive a tres manzanas de tu tienda. ¿Realmente quieren pagar el envío y esperar dos días cuando podrían pasar a mediodía?

Si tu formulario no ofrece una opción de recogida, probablemente cerrarán la pestaña y te contactarán en su lugar. O peor aún, comprarán a un competidor que facilita la recogida.

Comprar en línea, recoger en tienda (BOPIS) ya no es solo para grandes minoristas. Tiendas locales, restaurantes, panaderías e incluso floristerías lo ofrecen porque los clientes lo esperan. Y la buena noticia es que no necesitas una plataforma de comercio electrónico completa para que funcione. Con WPForms y el complemento Geolocation, puedes añadir un selector interactivo de recogida en tienda a cualquiera de tus formularios de pedido de WordPress.

Te mostraré exactamente cómo hacerlo. ¡Vamos!

Cómo añadir un selector de recogida en tienda a tu formulario de pedido de WordPress (Paso a paso)

Lo que necesitarás antes de empezar

Inventario rápido antes de empezar:

• WPForms Pro o superior. El complemento Geolocation está incluido en los planes Pro y superiores.
• El complemento Geolocation instalado y activado.
• Una clave API de Google Places o un token de acceso de Mapbox. Ambos funcionan; te mostraremos cómo configurar cualquiera de ellos.
• Una lista de tus ubicaciones de recogida con direcciones completas, nombres de negocios y cualquier detalle que quieras que los clientes vean (horarios, notas sobre aparcamiento, instrucciones de entrada).

¡Eso es todo! ¿Código personalizado? No. ¿Un plugin de localizador de tiendas independiente? No es necesario. ¿Hacer malabares entre herramientas? ¡Nunca!

Pero también... ¿Por qué?

¿Por qué añadir un selector de recogida en lugar de un simple desplegable?

Podrías usar un campo desplegable normal que liste las ubicaciones de tu tienda. Funcionaría. Pero un mapa interactivo hace tres cosas que un desplegable nunca hará:

• Responde visualmente a "¿cuál está más cerca de mí?". Esto es especialmente útil si los nombres de tus ubicaciones no son obvios (un cliente podría no saber la diferencia entre "Riverside" y "Bridgeview" por el nombre).
• Genera confianza. Un pin de mapa real dice a los clientes que eres un negocio real con una dirección real. Eso importa para los compradores primerizos.
• Reduce los errores de recogida. Cuando un cliente ve el pin del mapa y lo selecciona él mismo, es mucho menos probable que aparezca en la ubicación incorrecta.

Paso 1: Instala y activa el complemento Geolocation

Inicia sesión en tu panel de WordPress y ve a WPForms » Complementos. Busca "Geolocation" y haz clic en Instalar complemento. WordPress se encarga del resto.

Una vez que esté activo, verás una nueva pestaña de Geolocalización en la configuración de tu WPForms.

Paso 2: Conecta Google Places

El campo Mapa extrae datos de mapas de Google Places. Necesitarás una cuenta gratuita de Google Cloud y una clave API.

Una vez que hayas obtenido tu clave API, ve a WPForms » Configuración » Geolocalización, pega la clave y guarda la configuración.

Si te atascas en el paso de la clave API, tenemos una guía de configuración detallada en la documentación del Complemento de Geolocalización que recorre la Consola de Google Cloud pantalla por pantalla.

Este es el único paso un poco técnico de toda la configuración: unos 10 minutos, y solo lo haces una vez.

Paso 3: Empieza con la plantilla de formulario de pedido de recogida en tienda

Puedes crearlo desde cero, pero WPForms ya tiene una plantilla que hace el 90% del trabajo por ti. Desde WPForms » Añadir Nuevo, busca "Formulario de Pedido con Recogida en Tienda".

La plantilla viene precargada con:

• Selección de productos basada en imágenes
• Opciones de cantidad y color
• Campos de contacto del cliente
• Un campo Mapa para la selección de ubicación
• Un campo de tarjeta de crédito de Stripe
• Un total calculado que se actualiza en tiempo real
• Casillas de verificación de aceptación de términos

Con esta plantilla tienes un formulario de pedido funcional con un selector de recogida ya integrado. A partir de aquí, estás personalizando, no construyendo desde cero.

Paso 4: Añade tus ubicaciones de recogida al campo Mapa

En el constructor de formularios, busca el campo Mapa en la sección Campos Fantásticos. Haz clic en él o arrástralo a la vista previa del formulario para añadirlo.

Luego haz clic en el campo Mapa en la vista previa para abrir sus Opciones de Campo. En la pestaña General, verás una sección de Ubicaciones con campos para cada ubicación de recogida que quieras mostrar.

Para cada ubicación:

1. Escribe una dirección en el campo Dirección. Google Places autocompletará; elige la opción correcta.
2. Añade un Nombre (algo que los clientes reconocerán, como "Tienda Principal del Centro" o "Mostrador de Recogida Este").
3. Añade una Descripción opcional: aquí es donde pones los detalles que evitan llamadas al servicio de atención al cliente (horario de recogida, qué puerta usar, si hay que llamar al llegar).
4. Haz clic en el botón + para añadir la siguiente ubicación.

Un par de configuraciones del lado del administrador que vale la pena conocer:

• Buscar Ubicaciones Cercanas: cuando activas esto en el constructor, tu navegador te pide tu ubicación (la del administrador), y el autocompletado de direcciones prioriza sugerencias cercanas a ti. Útil si todas tus ubicaciones de recogida están en la misma ciudad que tu escritorio. No afecta a lo que ven los clientes en el frontend.
• Nivel de Zoom: por defecto es 15, que es un buen nivel de zoom a nivel de calle. Esta configuración solo se usa cuando tienes una sola ubicación; una vez que añades varias ubicaciones y activas la selección, el mapa se ajusta automáticamente para mostrarlas todas y esta configuración se deshabilita.

Paso 5: Convierte el mapa en un selector (este es el importante)

Por defecto, el campo Mapa solo se puede mostrar: los clientes pueden ver tus ubicaciones pero no elegir una. Para convertirlo en un selector de recogida real, activa ambos interruptores en la pestaña General:

• Mostrar Lista de Ubicaciones: muestra el nombre y la dirección de cada ubicación en una lista de texto debajo del mapa. Esto es importante para la accesibilidad y para los usuarios de móviles que tienen dificultades con los pequeños marcadores del mapa.
• Permitir selección de ubicación: añade botones de radio junto a cada ubicación de la lista. Esto es lo que convierte el mapa en un campo de formulario.

Paso 6: Personaliza los marcadores del mapa y la visualización

Algunos ajustes que hacen que el mapa se sienta personalizado en lugar de genérico:

Marcadores personalizados: para cada ubicación, abre el menú desplegable Icono y elige:

• Icono: elige entre más de 2000 iconos de Font Awesome (busca en el selector de iconos). El predeterminado es una estrella.
• Imagen: haz clic en Subir imagen para usar tu logotipo o un pin personalizado de tu biblioteca de medios.

Luego, ajusta el Tamaño (Pequeño, Mediano o Grande) y el color usando el selector (colores preestablecidos, un selector personalizado de arrastrar y soltar, o un valor hexadecimal). Un marcador personalizado más grande ayuda a que tus tiendas destaquen entre otros negocios en el mapa.

Ajustes de la pestaña Avanzado: haz clic en la pestaña Avanzado en Opciones de campo para ver los controles de presentación e interacción:

• Presentación: Ocultar pantalla completa, Ocultar tipo de mapa (satélite/terreno), Ocultar información de ubicación (ventanas emergentes que aparecen al hacer clic en un marcador), Ocultar vista de calle. La mayoría están ocultos por defecto para una apariencia más limpia.
• Interactivo: Ocultar control de cámara, Ocultar zoom, Desactivar arrastre, Desactivar zoom del ratón.
• Otros: Mostrar en entrada, Mostrar miniatura en entrada (cómo aparece el mapa en los registros de envío), Ocultar etiqueta.

Paso 7: Usa la lógica condicional para mostrar detalles exclusivos de recogida

Aquí tienes un detalle que la mayoría de los tutoriales omiten: tu formulario de pedido probablemente tiene campos que solo se aplican a la recogida o al envío, no a ambos. Si ofreces ambas opciones, añade un botón de radio en la parte superior del formulario: "¿Cómo deseas recibir tu pedido?" con las opciones Recoger y Enviar.

Luego usa la lógica condicional (integrada en WPForms Pro) para mostrar:

• El campo Mapa solo cuando se selecciona "Recoger".
• Los campos de dirección de envío solo cuando se selecciona "Enviar".

Esto mantiene tu formulario corto y relevante para lo que el cliente realmente desea.

Paso 8: Pruébalo y luego publícalo

Guarda tu formulario e insértalo en una página usando el bloque WPForms. Antes de promocionarlo en cualquier lugar, pruébalo tú mismo tanto en escritorio como en móvil:

• ¿El mapa se carga rápidamente?
• ¿Tu ubicación seleccionada aparece realmente en el correo electrónico de confirmación?
• ¿Se muestra correctamente en WPForms » Entradas cuando miras el envío?

En la pestaña Avanzado, asegúrate de que Mostrar en entrada (y opcionalmente Mostrar miniatura en entrada) esté activado; esto es lo que hace que la ubicación seleccionada por el cliente sea visible para quien esté preparando los pedidos en el lado de recogida.

Aquí es donde muchos dueños de tiendas dan el siguiente paso

Una vez que tengas funcionando el formulario básico de recogida, dos mejoras merecen la pena:

• Integración con Google Calendar. Conecta el formulario al calendario compartido de tu equipo para que cada recogida se muestre automáticamente como un evento. Algunos clientes de WPForms nos han dicho que esto reemplazó un cuaderno en el mostrador que llevaba a reservas duplicadas.
• Guardar y reanudar. Si el formulario de pedido es largo, Guardar y reanudar permite a los clientes volver más tarde sin perder el progreso.

Ninguno es necesario para que el selector de recogida funcione, son solo mejoras útiles cuando estés listo.

¡Y esa es toda la configuración! Un campo de mapa, el complemento de geolocalización y unos minutos de configuración te dan un selector de recogida real e interactivo.

¿Listo para añadir la recogida a tu sitio? Obtén WPForms Pro si aún no lo tienes, instala el complemento de geolocalización y empieza con la plantilla de formulario de pedido de recogida en tienda. ¡Puedes tener un formulario funcionando en línea en poco tiempo!

Preguntas frecuentes sobre cómo añadir un selector de recogida en tienda

¿Necesito WPForms Pro para usar el campo de mapa?

Sí. El campo de mapa forma parte del complemento de geolocalización, que se incluye con la licencia Pro o superior. Si usas WPForms Lite o Basic, necesitarás actualizar antes de que el complemento esté disponible.

¿Es la API de Google Places gratuita?

Google Cloud requiere una cuenta de facturación, pero Google Places incluye un generoso crédito mensual que cubre el uso gratuito para la mayoría de las pequeñas empresas. A menos que estés generando un tráfico masivo a tu formulario, casi con toda seguridad te mantendrás dentro del nivel gratuito. También puedes establecer límites de uso estrictos en Google Cloud si quieres tener tranquilidad.

¿Cuál es la diferencia entre el campo de dirección y el campo de mapa?

El campo de dirección recopila la dirección del cliente: la escribe y el autocompletado le ayuda a elegir la correcta. El campo de mapa muestra tus ubicaciones preconfiguradas en un mapa y permite a los clientes elegir una. Para un selector de recogida, quieres el campo de mapa. Para una dirección de envío, quieres el campo de dirección. Muchos formularios de pedido usan ambos.

¿Cuántas ubicaciones de recogida puedo añadir a un solo campo de mapa?

No hay un límite estricto: puedes seguir haciendo clic en el botón + para añadir más. En la práctica, lo mantendría por debajo de 10 en un solo formulario. Si eres una cadena regional con más de 30 ubicaciones, considera añadir primero un campo de código postal y usar lógica condicional para mostrar solo las tiendas cercanas relevantes.

¿Puedo ocultar otros negocios y puntos de interés en mi mapa?

Sí, pero requiere un paso adicional. Para ocultar POI como restaurantes y tiendas vecinas para que solo se muestren tus marcadores personalizados, necesitarás crear un estilo de mapa personalizado en Google Cloud Console y aplicarlo al campo de mapa usando un fragmento de código. WPForms tiene documentación para desarrolladores sobre cómo aplicar estilos de mapa personalizados si quieres seguir esta ruta.

¿Cómo veo qué ubicación eligió un cliente después de enviar el formulario?

Ve a WPForms » Entradas y abre el envío. La ubicación seleccionada aparece en el detalle de la entrada, incluyendo el nombre y la dirección. Asegúrate de que Mostrar en entrada esté habilitado en la pestaña Avanzado del campo de mapa (está activado por defecto) para que la ubicación se muestre en los registros de entrada y en las notificaciones por correo electrónico.

¿Puedo conectar las entregas de recogida a Google Calendar?

Sí, y es una de las mejoras más útiles para un formulario de recogida. Instala el complemento de Google Calendar y conecta tu formulario a un calendario de equipo compartido para que cada pedido de recogida cree automáticamente un evento en el calendario. Esto reemplaza el problema del bloc de notas en el mostrador con el que lidian muchas tiendas.

A continuación, cree un formulario de reserva de WordPress para varias ubicaciones

Poner un selector de recogida en su formulario de pedido no es la única forma de utilizar esta potente función. ¿Está reservando citas o eventos con sus formularios de WordPress? ¿Por qué no convertirlo en un formulario de reserva para varias ubicaciones? ¡Con el campo de mapa, puede hacerlo! Consulte el tutorial completo para obtener más información.

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.