Os filtros dinâmicos no Elementor são controles de busca que refinam uma listagem de posts ou produtos em tempo real, sem trocar de página. Eles dependem de uma grade dinâmica (Loop Grid ou Listing Grid) e de um plugin de filtragem que leia a query do WordPress. Sem essa ligação, o Elementor PRO sozinho monta a vitrine, mas não filtra por taxonomia, meta ou preço. Este guia mostra como ligar JetSmartFilters, JetEngine e ACF PRO a uma grade, configurar o modo AJAX e evitar os erros que mais aparecem no suporte. Para dominar o construtor antes de avançar, vale revisar o guia para dominar o Elementor e a categoria de todos os artigos de Elementor da FULL.

Primeiros passos: O que são filtros dinâmicos no Elementor

Filtros dinâmicos no Elementor combinam três peças: uma grade que repete um template, uma fonte de dados estruturada e um widget de filtro que reescreve a query daquela grade em tempo real. Sem essas três peças ligadas, o Elementor PRO 3.x monta a vitrine, mas não refina nada por taxonomia, meta ou preço.

A grade pode ser o Loop Grid do Elementor PRO ou o Listing Grid do JetEngine; a fonte de dados é uma taxonomia, um custom field ou um atributo WooCommerce; e o widget que reescreve a WP_Query é o JetSmartFilters, da Crocoblock. Esse plugin conecta o filtro à grade por um campo chamado provider. A gente vê no suporte da FULL que boa parte dos sites com catálogo grande trava sem AJAX configurado, porque o Page Reload recarrega a página inteira a cada clique. A tabela abaixo resume os três componentes que você vai montar.

Por que o Elementor PRO sozinho não filtra listagens

O Elementor PRO 3.x monta a vitrine com o Loop Grid, mas não traz um motor de filtragem AJAX nativo: ele exibe os itens que a query inicial retornou e para por aí. Para refinar essa query depois que a página carrega, é preciso um plugin que intercepte a consulta e devolva só os itens que batem com a seleção do usuário.

Esse é exatamente o papel do JetSmartFilters. Sem ele, a única alternativa nativa é o Query Control do Elementor, que define filtros fixos no editor, não controles que o visitante manipula em tempo real. A diferença prática aparece em catálogos acima de 200 itens: a filtragem fixa obriga a criar dezenas de páginas manuais, uma para cada combinação, enquanto a filtragem dinâmica resolve tudo numa grade só. É por isso que portais, diretórios e lojas com muitos atributos dependem de um plugin de query, e não apenas do construtor visual do Elementor.

Como montar filtros dinâmicos no Elementor passo a passo

Montar filtros dinâmicos no Elementor leva cerca de 30 minutos numa instalação limpa com Elementor PRO, JetEngine e JetSmartFilters ativos. O fluxo é sempre o mesmo: crie a grade, defina a fonte de dados, adicione o widget de filtro, aponte o provider para a grade e escolha o modo de aplicação. Cada passo abaixo corresponde a uma etapa real do editor da Crocoblock, ancorada na documentação oficial do plugin.

Passo 1: Crie a loop grid ou listing grid

Adicione um widget Loop Grid (Elementor PRO) ou Listing Grid (JetEngine) à página e selecione o template que repete por item. Defina o Query ID dessa grade em Layout > Query ID com um valor único, por exemplo produtos-loja. Esse identificador é o que o filtro vai procurar depois.

Passo 2: Defina a fonte de dados

Estruture o que será filtrado. Cadastre uma taxonomia no JetEngine, um campo no ACF PRO ou use os atributos de produto do WooCommerce. Filtro sem dado estruturado por trás não tem o que refinar.

Passo 3: Adicione o widget de filtro

Arraste o widget Checkboxes, Radio, Select, Range ou Search do JetSmartFilters para perto da grade. Cada tipo cobre um caso: Checkboxes para múltipla escolha, Range para preço, Search para texto livre.

Passo 4: Aponte o provider para a grade

No campo “This filter for”, escolha o provider da sua grade (JetEngine Listing Grid ou Elementor Loop Grid) e cole o mesmo Query ID do Passo 1. É essa amarração que diz ao filtro qual grade obedecer.

Passo 5: Escolha o apply type AJAX

Em Apply type, selecione AJAX para aplicar a filtragem sem recarregar a página. As outras opções são Page Reload, que recarrega tudo, e Mixed, que mistura os dois comportamentos por filtro.

Tipos de filtro do JetSmartFilters e quando usar cada um

O JetSmartFilters oferece pelo menos seis tipos de widget de filtro, e a escolha errada custa cliques: um Range em campo de texto devolve resultado vazio. Os tipos principais são Checkboxes para múltipla escolha por taxonomia, Radio para escolha única, Select como dropdown que economiza espaço, Range como slider numérico de preço, Search por texto livre e Date Range por intervalo de datas.

Segundo a base de conhecimento da Crocoblock, cada widget traz o campo “This filter for” justamente para amarrar o filtro ao provider certo. A regra de campo da FULL é direta: use Checkboxes para categorias com até 15 opções, Select acima disso e Range só sobre custom fields numéricos. Combinar Search com Checkboxes cobre a maior parte das lojas e portais de conteúdo dinâmico, porque junta busca textual com refino por categoria na mesma grade. Errar o tipo é a causa silenciosa de filtro que devolve zero resultado mesmo com dados cadastrados.

AJAX, page reload e mixed: O impacto na performance

O Apply type define se a filtragem é instantânea ou se cada clique custa um recarregamento completo da página. No modo AJAX, o JetSmartFilters dispara uma requisição em segundo plano e troca só a grade, em geral em menos de 1 s; no Page Reload, a página inteira recarrega, o que pesa mais em conexões móveis 3G.

O modo Mixed permite escolher o comportamento por filtro, útil quando um botão “Aplicar” deve disparar a busca de uma vez só, em vez de a cada clique. Em catálogos grandes, o AJAX sem o Indexer ativo tende a travar a contagem de resultados: ative o JetSmartFilters Indexer para que cada opção mostre quantos itens existem antes do clique, o que evita a consulta ao banco a cada interação. Para não pesar o servidor com requisições repetidas, vale revisar como otimizar a velocidade do Elementor com plugins específicos junto com o cache de página e o PHP 8.2.

Erros comuns ao criar filtros dinâmicos no Elementor

A maior parte dos chamados sobre filtros dinâmicos no Elementor que chegam ao suporte da FULL cai em três causas: provider errado, Query ID ausente e meta field incompatível. O sintoma mais comum é o filtro que “não faz nada” quando o JetSmartFilters aponta para um provider diferente da grade real.

O segundo erro recorrente aparece quando duas Loop Grid dividem a página sem Query ID único: o filtro aplica a busca na primeira grade que encontra no código, e o usuário acha que travou. Definir um Query ID único por grade e apontar o filtro para ele resolve o conflito na hora. O terceiro caso é o slider de Range ligado a um meta field de texto: sem valor numérico por trás, o JetEngine não calcula mínimo e máximo, e o resultado volta vazio. A correção é sempre estrutural: defina um Query ID por grade, confirme o provider e garanta que o campo filtrado guarde o tipo de dado certo antes de publicar.

Quanto custa e onde a FULL entra

Montar filtros dinâmicos no Elementor com Crocoblock exige duas licenças pagas: Elementor PRO e o pacote JetSmartFilters mais JetEngine. Compradas avulsas, em dólar e por ano, as renovações somam um custo recorrente que pesa para quem mantém uma carteira de vários sites ativos.

No plano PRO da FULL, por R$849, você ativa Elementor PRO, Crocoblock e mais de quinze plugins premium num clique, o que dá cerca de R$85 por site quando distribui o plano entre dez projetos. A gente vê no suporte da FULL que esse é o ponto de virada para agências: em vez de gerenciar chaves de licença soltas e datas de renovação espalhadas, o estúdio ativa o stack inteiro de filtragem dinâmica de uma vez, num painel só. Compare os planos em FULL.services/planos antes de comprar a licença avulsa de cada plugin separado.

Perguntas frequentes sobre filtros dinâmicos no Elementor

Próximos passos para listagens dinâmicas

Com provider, Query ID e Apply type AJAX configurados, sua grade já filtra posts ou produtos em tempo real, sem recarregar a página. O caminho recomendado é começar com Checkboxes e Search numa Loop Grid de teste, ativar o Indexer e só então levar para o catálogo de produção. Para listagens mais complexas, o próximo passo é estudar templates dinâmicos com Elementor e JetEngine e a combinação Crocoblock com Elementor PRO, que abre relacionamentos entre posts e filtragem por meta. Para continuar aprendendo, o FULL Academy reúne tutoriais, guias e reviews de Elementor em um só lugar, em FULL.services/academy.

Legenda: o campo provider amarra o filtro Checkboxes à Loop Grid pelo Query ID, base de toda filtragem AJAX.