Como Adicionar um Seletor de Retirada na Loja ao Seu Formulário de Pedido do WordPress

Imagine este cenário: um cliente acessa seu site, adiciona dois itens ao formulário de pedido e chega ao checkout pronto para comprar. Então, ele chega à seção de envio e pausa. Ele mora a três quarteirões da sua loja. Ele realmente quer pagar pelo frete e esperar dois dias quando poderia ir até lá na hora do almoço?

Se o seu formulário não oferecer uma opção de retirada, ele provavelmente fechará a aba e entrará em contato com você. Ou pior, comprará de um concorrente que facilita a retirada.

Comprar Online, Retirar na Loja (BOPIS) não é mais apenas para grandes varejistas. Lojas locais, restaurantes, padarias e até floriculturas estão oferecendo isso porque os clientes esperam. E a boa notícia é que você não precisa de uma plataforma de comércio eletrônico completa para fazer isso funcionar. Com o WPForms e o addon Geolocation, você pode adicionar um seletor interativo de retirada na loja a qualquer um dos seus formulários de pedido do WordPress.

Posso te mostrar exatamente como fazer isso. Vamos lá!

Como Adicionar um Seletor de Retirada na Loja ao Seu Formulário de Pedido do WordPress (Passo a Passo)

O que você precisará antes de começar

Verificação rápida de inventário antes de mergulhar:

• WPForms Pro ou superior. O addon Geolocation está incluído nos planos Pro e acima.
• O addon Geolocation instalado e ativado.
• Uma chave de API do Google Places ou um token de acesso do Mapbox. Ambos funcionam — cobriremos como configurar qualquer um deles.
• Uma lista de seus locais de retirada com endereços completos, nomes de empresas e quaisquer detalhes que você queira que os clientes vejam (horários, observações sobre estacionamento, instruções de entrada).

É isso! Código personalizado? Não. Plugin de localizador de lojas separado? Não é necessário. Malabarismo entre ferramentas? Nunca!

Mas também... Por quê?

Por que adicionar um seletor de retirada em vez de um simples dropdown?

Você poderia usar um campo dropdown normal que lista os locais da sua loja. Funcionaria. Mas um mapa interativo faz três coisas que um dropdown nunca fará:

• Responde visualmente "qual está mais perto de mim?". Isso é especialmente útil se os nomes dos seus locais não forem óbvios (um cliente pode não saber "Riverside" vs. "Bridgeview" pelo nome).
• Constrói confiança. Um pino de mapa real diz aos clientes que você é um negócio real com um endereço real. Isso importa para compradores de primeira viagem.
• Reduz erros de retirada. Quando um cliente vê o pino do mapa e o seleciona, é muito menos provável que ele apareça no local errado.

Passo 1: Instale e ative o addon Geolocation

Faça login no seu painel do WordPress e vá para WPForms » Addons. Procure por "Geolocation" e clique em Instalar Addon. O WordPress cuida do resto.

Assim que estiver ativo, você verá uma nova aba Geolocation nas configurações do seu WPForms.

Passo 2: Conecte o Google Places

O campo Mapa obtém dados de mapas do Google Places. Você precisará de uma conta gratuita do Google Cloud e uma chave de API.

Depois de obter sua chave de API, vá para WPForms » Configurações » Geolocation, cole a chave e salve as configurações.

Se você tiver dificuldades na etapa da chave de API, temos um guia de configuração detalhado na documentação do Addon Geolocation que percorre o Console do Google Cloud tela por tela.

Esta é a única etapa um pouco técnica em toda a configuração — cerca de 10 minutos, e você só a faz uma vez.

Passo 3: Comece com o modelo de Formulário de Pedido com Retirada na Loja

Você pode criar isso do zero, mas o WPForms já tem um modelo que faz 90% do trabalho para você. Em WPForms » Adicionar Novo, procure por "Formulário de Pedido de Retirada na Loja."

O modelo vem pré-carregado com:

• Seleção de produtos baseada em imagem
• Opções de quantidade e cor
• Campos de contato do cliente
• Um campo Mapa para seleção de local
• Um campo de cartão de crédito Stripe
• Um total calculado que atualiza em tempo real
• Caixas de seleção de reconhecimento de termos

Com este modelo, você tem um formulário de pedido funcional com um seletor de retirada já configurado. A partir daqui, você está personalizando — não construindo do zero.

Passo 4: Adicione seus locais de retirada ao campo Mapa

No construtor de formulários, encontre o campo Mapa na seção Campos Elaborados. Clique nele ou arraste-o para a visualização do formulário para adicioná-lo.

Em seguida, clique no campo Mapa na visualização para abrir suas Opções de Campo. Na guia Geral, você verá uma seção Locais com campos para cada local de retirada que deseja exibir.

Para cada local:

1. Digite um endereço no campo Endereço. O Google Places autocompletará — escolha a opção correta.
2. Adicione um Nome (algo que os clientes reconhecerão, como "Loja Principal do Centro" ou "Balcão de Retirada Leste").
3. Adicione uma Descrição opcional — é aqui que você coloca os detalhes que evitam chamadas de atendimento ao cliente (horário de retirada, qual porta usar, se deve ligar ao chegar).
4. Clique no botão + para adicionar o próximo local.

Algumas configurações do lado do administrador que valem a pena saber:

• Encontrar Locais Próximos — quando você ativa esta opção no construtor, seu navegador solicita sua localização (a do administrador), e o autocompletar de endereços prioriza sugestões perto de você. Útil se todos os seus locais de retirada estiverem na mesma cidade do seu escritório. Isso não afeta o que os clientes veem no frontend.
• Nível de Zoom — o padrão é 15, que é um bom zoom ao nível da rua. Esta configuração é usada apenas quando você tem um único local; assim que você adiciona vários locais e habilita a seleção, o mapa se ajusta automaticamente para mostrá-los todos e esta configuração é desativada.

Passo 5: Transforme o mapa em um seletor (este é o importante)

Por padrão, o campo Mapa é apenas para exibição — os clientes podem ver seus locais, mas não podem escolher um. Para transformá-lo em um seletor de retirada real, habilite ambas as opções na guia Geral:

• Mostrar Lista de Locais — exibe o nome e o endereço de cada local em uma lista de texto abaixo do mapa. Isso é importante para acessibilidade e para usuários de dispositivos móveis que têm dificuldade com pequenos marcadores de mapa.
• Permitir Seleção de Localização — adiciona botões de rádio ao lado de cada localização na lista. É isso que transforma o mapa em um campo de formulário.

Passo 6: Personalize os marcadores do mapa e a exibição

Alguns ajustes que fazem o mapa parecer personalizado em vez de genérico:

Marcadores personalizados — Para cada localização, abra o menu suspenso Ícone e escolha:

• Ícone — escolha entre mais de 2.000 ícones do Font Awesome (pesquise no seletor de ícones). O padrão é uma estrela.
• Imagem — clique em Enviar Imagem para usar seu logotipo ou um pino personalizado da sua biblioteca de mídia.

Em seguida, defina o Tamanho (Pequeno, Médio ou Grande) e a cor usando o seletor (cores predefinidas, um seletor personalizado de arrastar e soltar ou um valor hexadecimal). Um marcador personalizado maior ajuda suas lojas a se destacarem de outros negócios no mapa.

Configurações da aba Avançado — clique na aba Avançado em Opções de Campo para controles de apresentação e interação:

• Apresentação: Ocultar Tela Cheia, Ocultar Tipo de Mapa (satélite/terreno), Ocultar Informações de Localização (pop-ups que aparecem ao clicar em um marcador), Ocultar Street View. A maioria está oculta por padrão para um visual mais limpo.
• Interativo: Ocultar Controle de Câmera, Ocultar Zoom, Desativar Arrastar, Desativar Zoom do Mouse.
• Outros: Mostrar na Entrada, Mostrar Miniatura na Entrada (como o mapa aparece nos registros de envio), Ocultar Rótulo.

Passo 7: Use a lógica condicional para mostrar detalhes exclusivos de retirada

Aqui está um detalhe que a maioria dos tutoriais pula: seu formulário de pedido provavelmente tem campos que se aplicam apenas à retirada ou ao envio — não a ambos. Se você oferece ambas as opções, adicione um botão de rádio no topo do formulário: “Como você gostaria de receber seu pedido?” com as opções Retirar e Enviar.

Em seguida, use a lógica condicional (integrada ao WPForms Pro) para mostrar:

• O campo Mapa apenas quando “Retirar” for selecionado.
• Os campos de endereço de entrega apenas quando “Enviar” for selecionado.

Isso mantém seu formulário curto e relevante para o que o cliente realmente deseja.

Passo 8: Teste, depois publique

Salve seu formulário e incorpore-o em uma página usando o bloco WPForms. Antes de promovê-lo em qualquer lugar, teste-o você mesmo em desktop e mobile:

• O mapa carrega rapidamente?
• Sua localização selecionada realmente aparece no e-mail de confirmação?
• Ele aparece corretamente em WPForms » Entradas quando você visualiza o envio?

Na aba Avançado, certifique-se de que Mostrar na Entrada (e opcionalmente Mostrar Miniatura na Entrada) esteja ativado — é isso que torna a localização selecionada pelo cliente visível para quem está preparando os pedidos no lado da retirada.

Onde muitos proprietários de lojas levam isso a seguir

Depois de ter o formulário básico de retirada funcionando, duas atualizações valem a pena conhecer:

• Integração com o Google Agenda. Conecte o formulário ao calendário compartilhado da sua equipe para que cada retirada apareça automaticamente como um evento. Alguns clientes do WPForms nos disseram que isso substituiu um caderno de papel no balcão que levava a agendamentos duplicados.
• Salvar e Continuar. Se o seu formulário de pedido for longo, Salvar e Continuar permite que os clientes retornem mais tarde sem perder o progresso.

Nenhum dos dois é necessário para que o seletor de retirada funcione, são apenas melhorias úteis quando você estiver pronto.

E essa é toda a configuração! Um campo de mapa, mais o complemento Geolocation e alguns minutos de configuração resultam em um seletor de retirada real e interativo.

Pronto para adicionar retirada ao seu site? Adquira o WPForms Pro se ainda não o fez, instale o complemento Geolocation e comece com o modelo de Formulário de Pedido de Retirada na Loja. Você pode ter um formulário funcionando em pouco tempo!

Perguntas Frequentes Sobre Como Adicionar um Seletor de Retirada na Loja

Preciso do WPForms Pro para usar o campo de Mapa?

Sim. O campo de Mapa faz parte do complemento Geolocation, que está incluído na licença Pro ou superior. Se você estiver usando o WPForms Lite ou Basic, precisará fazer um upgrade antes que o complemento fique disponível.

A API do Google Places é gratuita para usar?

O Google Cloud requer uma conta de faturamento, mas o Google Places inclui um crédito mensal generoso que cobre o uso gratuito para a maioria das pequenas empresas. A menos que você esteja gerando um tráfego massivo para seu formulário, você quase certamente permanecerá dentro do nível gratuito. Você também pode definir limites rígidos de uso no Google Cloud se quiser tranquilidade.

Qual é a diferença entre o campo de Endereço e o campo de Mapa?

O campo de Endereço coleta o endereço do cliente — ele digita, e o preenchimento automático o ajuda a escolher o correto. O campo de Mapa exibe seus locais pré-configurados em um mapa e permite que os clientes escolham um. Para um seletor de retirada, você quer o campo de Mapa. Para um endereço de entrega, você quer o campo de Endereço. Muitos formulários de pedido usam ambos.

Quantos locais de retirada posso adicionar a um único campo de Mapa?

Não há um limite rígido — você pode continuar clicando no botão + para adicionar mais. Na prática, eu manteria abaixo de 10 em um único formulário. Se você é uma rede regional com mais de 30 locais, considere adicionar um campo de CEP primeiro e usar a lógica condicional para mostrar apenas as lojas próximas relevantes.

Posso ocultar outros negócios e pontos de interesse no meu mapa?

Sim, mas leva um passo extra. Para ocultar POIs como restaurantes e lojas vizinhas para que apenas seus marcadores personalizados sejam exibidos, você precisará criar um estilo de mapa personalizado no Google Cloud Console e aplicá-lo ao campo de Mapa usando um trecho de código. O WPForms tem documentação para desenvolvedores sobre como aplicar estilos de mapa personalizados se você quiser seguir este caminho.

Como vejo qual local um cliente escolheu após o envio do formulário?

Vá para WPForms » Entradas e abra o envio. O local selecionado aparece nos detalhes da entrada, incluindo o nome e o endereço. Certifique-se de que Exibir na Entrada esteja ativado na guia Avançado do campo de Mapa (ele está ativado por padrão) para que o local seja exibido nos registros de entrada e nas notificações por e-mail.

Posso conectar envios de retirada ao Google Agenda?

Sim — e é uma das atualizações mais úteis para um formulário de retirada. Instale o complemento Google Agenda e conecte seu formulário a uma agenda compartilhada da equipe para que cada pedido de retirada crie automaticamente um evento na agenda. Isso substitui o problema do caderno no balcão com o qual muitas lojas lidam.

Em seguida, Crie um Formulário de Reserva WordPress com Vários Locais

Colocar um seletor de retirada em seu formulário de pedido não é a única maneira de usar este poderoso recurso. Você está agendando consultas ou eventos com seus formulários do WordPress? Por que não transformá-lo em um formulário de agendamento multilocalização? Com o campo de mapa, você pode! Confira o tutorial completo para saber como.

Pronto para criar seu formulário? Comece hoje mesmo com o plugin de criação de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.

Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.