Como criar filtro de localização por CEP ou cidade com JetEngine e Elementor
Introdução
Criar um filtro de localização e distância com JetEngine e Elementor é uma das funcionalidades mais avançadas e úteis em projetos WordPress. Esse tipo de recurso permite que usuários encontrem conteúdos com base na proximidade geográfica, como imóveis, estabelecimentos ou serviços.
Apesar do alto valor, a implementação costuma gerar dúvidas, principalmente na integração entre backend (dados e query) e frontend (filtros e interface). Neste guia passo a passo, você vai entender como estruturar corretamente essa lógica utilizando JetEngine, JetSmartFilters e Elementor.
Referência do tutorial (crédito ao autor)
O processo apresentado neste artigo é baseado no conteúdo do canal:
Osamu Wakabayashi at Zen Ideas
Assista ao conteúdo original:
How to Show Posts in Listing based on Location and Distance (JetEngine Ver. 3.3)
Visão geral do processo
O filtro de localização funciona a partir de três pilares:
-
Estrutura de dados (endereços e campos personalizados)
-
Query geográfica (cálculo de distância)
-
Interface de filtro (interação do usuário)
O fluxo completo envolve backend + frontend trabalhando de forma integrada.
Estrutura do processo (visão visual)
Use o infográfico abaixo como referência para entender a arquitetura:
-
Backend → configuração de dados e lógica
-
Frontend → filtros e exibição
O processo de criação de um filtro de localização e distância com JetEngine e Elementor envolve etapas de backend e frontend, como mostrado no infográfico abaixo.
Configuração de dados e lógica (Backend)
O primeiro passo é preparar a base de dados.
Ativação e campos meta
No JetEngine:
-
Ative a funcionalidade Map Listings
-
Crie um campo meta do tipo mapa
-
Use um ID como:
_address
Esse campo será responsável por armazenar as coordenadas geográficas dos itens.
Construção da query geográfica
No Query Builder do JetEngine:
-
Crie uma nova query
-
Selecione o tipo Geo Search
-
Configure o campo
_address -
Defina o raio de busca (ex: 5km, 10km, etc.)
Aqui acontece o núcleo da lógica: o sistema passa a calcular distância entre pontos.
Interface e filtros (Front-end)
Depois do backend configurado, entra a parte visível para o usuário.
Criação do Smart Filter
No JetSmartFilters:
-
Crie um novo filtro
-
Tipo: Location Distance
-
Configure busca por CEP ou cidade
Esse filtro permitirá que o usuário informe sua localização.
Integração com Elementor
No Elementor:
-
Adicione o widget de filtro
-
Adicione o Listing Grid
-
Vincule ambos à Query criada
Sem essa conexão, o filtro não funciona corretamente.
Boas práticas na implementação
Aqui está o que diferencia um projeto básico de um profissional:
-
Defina um raio padrão adequado (não genérico)
-
Evite queries pesadas (impacto em performance)
-
Valide entradas do usuário (CEP/cidade)
-
Teste cenários reais de busca
Quando usar esse tipo de filtro
Use quando:
-
marketplaces
-
imobiliárias
-
diretórios de serviços
-
buscas locais
Evite quando:
-
conteúdo institucional simples
-
sites sem necessidade geográfica
Aplicações práticas
Esse tipo de filtro pode ser usado em:
-
sites de imóveis
-
plataformas de serviços locais
-
sistemas de busca por unidades
-
diretórios empresariais
Conclusão
O filtro de localização e distância com JetEngine e Elementor é um recurso avançado que eleva significativamente a experiência do usuário em projetos WordPress.
Quando bem implementado, ele permite buscas inteligentes, melhora a usabilidade e agrega valor real ao sistema. A combinação entre JetEngine, JetSmartFilters e Elementor oferece uma solução robusta, desde que configurada corretamente.