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

Imagina esta situación: un cliente llega a tu página web, añade dos artículos a su carrito y pasa a la caja, listo para comprar. Entonces llega a la sección de envíos y se detiene. Vive a tres manzanas de tu tienda. ¿De verdad quiere pagar los gastos de envío y esperar dos días cuando podría ir andando a la hora del almuerzo?

Si tu formulario no ofrece la opción de recogida, es probable que cierren la pestaña y se pongan en contacto contigo directamente. O peor aún, que compren a un competidor que facilite la recogida.

El servicio «Compra online, recoge en tienda» (BOPIS) ya no es exclusivo de los grandes minoristas. Las tiendas locales, los restaurantes, las panaderías e incluso las 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 ponerlo en marcha. Con WPForms y el complemento de geolocalización, puedes añadir un selector interactivo de recogida en tienda a cualquiera de tus formularios de pedido de WordPress.

Te puedo enseñar 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

Una rápida revisión del inventario antes de ponernos manos a la obra:

• WPForms Pro o una versión superior. El complemento de geolocalización está incluido en los planes Pro y superiores.
• El complemento de geolocalización está instalado y activado.
• Una clave de la API de Google Places o un token de acceso de Mapbox. Cualquiera de las dos opciones sirve; te explicaremos cómo configurarlas.
• Una lista de tus puntos de recogida con las direcciones completas, los nombres de los establecimientos y cualquier información que quieras que vean los clientes (horario, indicaciones sobre el aparcamiento, instrucciones para acceder).

¡Y eso es todo! ¿Código personalizado? No. ¿Un plugin independiente para localizar tiendas? No hace falta. ¿Tener que estar cambiando de una herramienta a otra? ¡Ni hablar!

Pero además… ¿por qué?

¿Por qué añadir un selector de pastillas en lugar de un simple menú desplegable?

Podrías utilizar un menú desplegable normal que muestre las ubicaciones de tus tiendas. Funcionaría. Pero un mapa interactivo ofrece tres ventajas que un menú desplegable nunca tendrá:

• Responde visualmente a la pregunta «¿cuál es el más cercano a mí?». Esto resulta especialmente útil si los nombres de las ubicaciones no son muy conocidos (es posible que un cliente no distinga entre «Riverside» y «Bridgeview» solo por el nombre).
• Genera confianza. Un marcador de mapa real indica a los clientes que eres una empresa real con una dirección real. Eso es importante para quienes compran por primera vez.
• Así se evitan confusiones en la recogida. Cuando un cliente ve el marcador en el mapa y lo selecciona él mismo, es mucho menos probable que se presente en el lugar equivocado.

Paso 1: Instala y activa el complemento de geolocalización

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

Una vez activada, verás que aparece una nueva pestaña llamada «Geolocalización» en la configuración de WPForms.

Paso 2: Conecta Google Places

El campo «Mapa» obtiene los datos del mapa 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 » Ajustes » Geolocalización, pega la clave y guarda los ajustes.

Si te quedas atascado 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 te guía paso a paso por la Consola de Google Cloud.

Este es el único paso un poco técnico de toda la configuración: te llevará unos 10 minutos y solo tendrás que hacerlo una vez.

Paso 3: Empieza con la plantilla del formulario de pedido para recoger en tienda

Puedes crearlo desde cero, pero WPForms ya tiene una plantilla que te ahorra el 90 % del trabajo. En WPForms » Añadir nuevo, busca«Formulario de pedido para recoger en tienda».

La plantilla incluye de serie:

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

Con esta plantilla, ya dispones de un formulario de pedido funcional con un selector de recogida integrado. A partir de aquí, solo tienes que personalizarlo, no crear nada desde cero.

Paso 4: Añade tus puntos de recogida en el campo «Mapa»

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

A continuación, haz clic en el campo «Mapa» de la vista previa para abrir sus opciones de campo. En la pestaña «General», verás una sección llamada «Ubicaciones» con campos para cada punto de recogida que quieras mostrar.

Para cada ubicación:

1. Escribe una dirección en el campo «Dirección». Google Places completará automáticamente la entrada; selecciona la opción correcta.
2. Añade un nombre (algo que los clientes puedan reconocer, como «Tienda insignia del centro» o «Mostrador de recogida del Este»).
3. Añade una descripción opcional: aquí es donde puedes incluir los detalles que evitan llamadas al servicio de atención al cliente (horario de recogida, qué puerta utilizar, si hay que llamar al llegar).
4. Haz clic en el botón + para añadir la siguiente ubicación.

Un par de ajustes del panel de administración que conviene conocer:

• Buscar ubicaciones cercanas: cuando actives esta opción en el generador, tu navegador te pedirá tu ubicación (la del administrador) y el autocompletado de direcciones dará prioridad a las sugerencias cercanas a ti. Resulta muy útil si todos tus puntos de recogida se encuentran en la misma ciudad que tu oficina. Esto no afecta a lo que ven los clientes en la interfaz de usuario.
• Nivel de zoom: el valor predeterminado es 15, lo que ofrece un buen nivel de zoom a escala de calle. Este ajuste solo se utiliza cuando hay una única ubicación; una vez que se añaden varias ubicaciones y se activa la selección, el mapa se ajusta automáticamente para mostrarlas todas y este ajuste se desactiva.

Paso 5: Convierte el mapa en un selector (este es el paso más importante)

De forma predeterminada, el campo «Mapa» es de solo visualización: los clientes pueden ver tus ubicaciones, pero no pueden seleccionar ninguna. Para convertirlo en un selector de recogida real, activa estos dos botones 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 dispositivos móviles a quienes les cuesta ver los pequeños marcadores del mapa.
• Permitir selección de ubicación: añade botones de opción junto a cada ubicación de la lista. Esto es lo que convierte el mapa en un campo de formulario.

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

Algunos pequeños ajustes que hacen que el mapa tenga un toque distintivo en lugar de parecer genérico:

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

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

A continuación, configura el tamaño (pequeño, mediano o grande) y el color mediante el selector (colores predefinidos, un selector personalizado de arrastrar y soltar o un valor hexadecimal). Un marcador de marca más grande ayuda a que tus tiendas destaquen entre los demás negocios del mapa.

Configuración de la pestaña «Avanzadas»: haz clic en la pestaña «Avanzadas» en las opciones de campo para acceder a los controles de presentación e interacción:

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

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

He aquí un detalle que la mayoría de los tutoriales pasan por alto: es probable que tu formulario de pedido tenga campos que solo se aplican a la recogida o al envío, pero no a ambos. Si ofreces ambas opciones, añade un botón de opción en la parte superior del formulario: «¿Cómo deseas recibir tu pedido?», con las opciones «Recogida» y «Envío».

A continuación, utiliza la lógica condicional (integrada en WPForms Pro) para mostrar:

• El campo «Mapa» solo aparece cuando se selecciona «Recogida».
• Los campos de la dirección de envío solo aparecen cuando se selecciona «Enviar».

De este modo, el formulario será breve y se ajustará a lo que el cliente realmente necesita.

Paso 8: Pruébalas y, a continuación, publícalas

Guarda el formulario e incrústalo en una página utilizando el bloque de WPForms. Antes de promocionarlo en ningún sitio, pruébalo tú mismo tanto en el ordenador como en el móvil:

• ¿Se carga el mapa rápidamente?
• ¿Aparece realmente la ubicación que has seleccionado en el correo electrónico de confirmación?
• ¿Aparece correctamente en WPForms » Entradas cuando consultas el formulario enviado?

En la pestaña «Avanzadas», asegúrate de que las opciones «Mostrar en la entrada» (y, si lo deseas, «Mostrar miniatura en la entrada») estén activadas; esto es lo que permite que la ubicación seleccionada por el cliente sea visible para quien prepare los pedidos en el punto de recogida.

Aquí es donde muchos propietarios de tiendas dan el siguiente paso

Una vez que tengas la forma básica de selección en funcionamiento, hay dos mejoras que conviene conocer:

• Integración con Google Calendar. Vincula el formulario al calendario compartido de tu equipo para que cada recogida aparezca automáticamente como un evento. Algunos clientes de WPForms nos han comentado que esto les ha permitido prescindir del cuaderno de papel que tenían en el mostrador y que solía provocar reservas duplicadas.
• Guardar y continuar. Si el formulario de pedido es largo, la función «Guardar y continuar» permite a los clientes volver más tarde sin perder lo que ya han rellenado.

Ninguno de los dos es imprescindible para que el selector de pastillas funcione; simplemente son buenas mejoras para cuando estés listo.

¡Y eso es todo! Con el campo de mapa, el complemento de geolocalización y unos minutos de configuración, tendrás un selector de recogida real e interactivo.

¿Listo para añadir la opción de recogida en tienda a tu sitio web? Hazte con WPForms Pro si aún no lo tienes, instala el complemento de geolocalización y empieza con la plantilla «Formulario de pedido para recogida en tienda». ¡Tendrás un formulario operativo en un abrir y cerrar de ojos!

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

¿Necesito WPForms Pro para utilizar el campo «Mapa»?

Sí. El campo «Mapa» forma parte del complemento de geolocalización, que se incluye en la licencia Pro o superior. Si tienes la versión Lite o Basic de WPForms, tendrás que actualizarla para poder utilizar el complemento.

¿El uso de la API de Google Places es gratuito?

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 generes un tráfico masivo hacia tu formulario, es casi seguro que te mantendrás dentro del nivel gratuito. También puedes establecer límites máximos de uso en Google Cloud si quieres estar tranquilo.

¿Cuál es la diferencia entre el campo «Dirección» y el campo «Mapa»?

El campo «Dirección» recoge la dirección del cliente: este la escribe y la función de autocompletado le ayuda a seleccionar la correcta. El campo «Mapa» muestra tus ubicaciones preconfiguradas en un mapa y permite a los clientes seleccionar una. Para un selector de recogida, debes utilizar el campo «Mapa». Para una dirección de envío, debes utilizar el campo «Dirección». Muchos formularios de pedido utilizan ambos.

¿Cuántos puntos de recogida puedo añadir a un solo campo de mapa?

No hay un límite estricto: puedes seguir pulsando el botón «+» para añadir más. En la práctica, yo lo mantendría por debajo de 10 en un mismo formulario. Si eres una cadena regional con más de 30 establecimientos, plantéate añadir primero un campo de código postal y utilizar la lógica condicional para mostrar solo las tiendas cercanas relevantes.

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

Sí, pero hay que dar un paso más. Para ocultar puntos de interés, como restaurantes y tiendas cercanas, de modo que solo se vean tus marcadores personalizados, tendrás que crear unestilo de mapa personalizadoen Google Cloud Console y aplicarlo al campo «Mapa» mediante un fragmento de código. WPForms cuenta condocumentación para desarrolladores sobre cómo aplicar estilos de mapa personalizados, por si decides seguir este método.

¿Cómo puedo ver qué ubicación ha seleccionado un cliente después de enviar el formulario?

Ve a WPForms » Entradas y abre el formulario enviado. La ubicación seleccionada aparecerá en los detalles de la entrada, incluyendo el nombre y la dirección. Asegúrate de que la opción «Mostrar en la entrada» esté activada en la pestaña «Avanzado» del campo «Mapa» (está activada por defecto), para que la ubicación se muestre en los registros de las entradas y en las notificaciones por correo electrónico.

¿Puedo vincular los envíos de recogidas 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 compartido del equipo para que cada pedido de recogida genere automáticamente un evento en el calendario. Esto resuelve el problema del «cuaderno en el mostrador» al que se enfrentan muchas tiendas.

A continuación, crea un formulario de reservas de WordPress para varias ubicaciones

Incluir un selector de recogida en tu formulario de pedido no es la única forma de aprovechar esta potente función. ¿Utilizas tus formularios de WordPress para reservar citas o eventos? ¿Por qué no convertirlo en un formulario de reservas con varias ubicaciones? ¡Con el campo de mapa, puedes hacerlo! Echa un vistazo al tutorial completo para aprender cómo hacerlo.

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

Si este artículo te ha ayudado, síguenos en Facebook y Twitter para más tutoriales y guías gratuitas sobre WordPress.