Elementor WooCommerce usa o WooCommerce Builder do Elementor Pro 3.x para desenhar produto, carrinho e checkout sem código. Segundo a documentação oficial do WooCommerce, esses templates sobrescrevem o tema. Monte o produto único primeiro e exclua carrinho e checkout do cache de página.

O WooCommerce Builder do Elementor Pro é a combinação do construtor visual com a loja WooCommerce para controlar cada bloco da vitrine, da galeria do produto ao botão de compra, dentro do mesmo editor. O WooCommerce Builder só existe na versão Pro: o Elementor gratuito não traz esse construtor de loja nem os widgets de produto. Na base da FULL, com 150 mil sites WordPress hospedados, a gente vê no suporte que a loja Elementor que mais abre ticket de carrinho quebrado erra no cache. Antes de personalizar a vitrine, vale entender o fluxo: este guia usa WooCommerce 9.x e PHP 8.2 e cobre o que o tutorial geral de WooCommerce não detalha sobre o Elementor.

Como o WooCommerce builder se integra ao WooCommerce

O WooCommerce Builder do Elementor Pro 3.x substitui 4 templates do WooCommerce: produto único, arquivo de produtos, carrinho e finalização de compra. Cada template é editado no WooCommerce Builder, em Modelos > Theme Builder, com uma condição de exibição própria.

A gente vê no suporte da FULL que, na maioria das lojas, só o template de produto único já resolve a vitrine, porque arquivo, carrinho e checkout ficam nos padrões do tema sem prejuízo. O mapa abaixo está no hub todos os artigos de Elementor da FULL.

Segundo a documentação oficial do WooCommerce, que mantém a referência de como os templates de loja são sobrescritos, a lógica vale para o Elementor Pro: veja em WooCommerce Docs.

O que esperar do Elementor pro na sua loja

O Elementor Pro custa cerca de US$59 por site por ano na licença avulsa, e o WooCommerce Builder vem incluso desde a versão 2.5 do plugin. Na prática, a maior dor não é o preço: é performance, porque cada página de loja ganha CSS e JS próprios do construtor visual.

Nos tickets da FULL sobre lojas Elementor, o gargalo mais comum é o template de produto único com muitos widgets dinâmicos sem object cache, o que eleva o TTFB no primeiro acesso. A limitação honesta: o Elementor adiciona em média 3 a 5 requisições extras por página, e isso pesa mais do que uma vitrine feita só com Gutenberg. Por isso a combinação que funciona é Elementor Pro mais um plugin de cache bem configurado, como WP Rocket ou Perfmatters. Se a loja já está lenta, vale revisar por que o Elementor fica lento.

Legenda: o Theme Builder concentra os 4 templates de loja, o que comprova por que o produto único é o ponto de partida.

Passo a passo: Monte a página de produto no WooCommerce builder

A montagem da página de produto no WooCommerce Builder leva cerca de 30 minutos na primeira vez e usa só o template de produto único. Antes de começar, confirme 3 pré-requisitos: WooCommerce 9.x ativo, Elementor Pro 3.x ativo e ao menos 1 produto cadastrado com imagem. A ordem dos passos abaixo reduz retrabalho, porque definir a condição de exibição antes do design evita refazer o layout depois. Cada passo leva poucos minutos quando os pré-requisitos estão prontos.

Ative o WooCommerce builder no theme builder

Vá em Modelos > Theme Builder > Produto único e clique em Adicionar novo. O Elementor Pro abre um template em branco já conectado a um produto de exemplo da sua loja. Confirme que o WooCommerce aparece como fonte de dados no canto superior; se não aparecer, o WooCommerce não está ativo. Esse template vai valer para todos os produtos que casarem com a condição de exibição definida no último passo, então não precisa repetir o desenho por item da loja.

Configure os widgets de produto na ordem certa

Arraste os widgets na sequência que o cliente lê: Título do Produto, Galeria de Imagens, Preço, Descrição Curta e o widget Add to Cart. O widget Add to Cart é o que renderiza o seletor de variações e o botão de compra; sem ele, produtos variáveis não adicionam ao carrinho. Use o widget Short Description para o resumo e o Product Data Tabs para descrição completa e avaliações. Mantenha menos de 15 widgets por página para não inflar o tempo de renderização no mobile.

Defina a condição de exibição e publique

Clique em Publicar e o Elementor pede a condição de exibição. Escolha Produtos > Todos para aplicar a vitrine inteira, ou Produto por categoria para layouts diferentes por linha. Salve e abra qualquer produto no modo anônimo para validar. Esse teste no modo anônimo é o que pega botão de compra quebrado antes do cliente, porque mostra a página como o WooCommerce realmente entrega ao visitante, sem a sessão de administrador interferindo no resultado.

Como personalizar carrinho e checkout sem quebrar a venda

Personalizar carrinho e checkout no Elementor exige uma regra antes do design: tirar essas URLs do cache de página. A gente vê no suporte da FULL que a loja com checkout travado quase sempre cacheia o que não deveria, e o cliente vê o valor errado na hora de pagar. O Elementor Pro com cache de página ativo sem exclusão dessas URLs em servidor Apache serve o total do carrinho desatualizado para visitantes diferentes.

Para personalizar com segurança, edite os templates de carrinho e checkout no WooCommerce Builder, mas adicione carrinho, checkout e minha-conta à exclusão do WP Rocket antes de publicar. Mantenha o gateway de pagamento fora da minificação de JS, porque scripts inline de Stripe e PagSeguro quebram quando concatenados. Em lojas com cupom dinâmico, o widget de checkout precisa do campo de cupom nativo do WooCommerce, senão o desconto não recalcula no total. Para campos extras, o melhor plugin de checkout para WooCommerce cobre as extensões que se integram ao Elementor.

Como evitar que o Elementor deixe a loja lenta

O Elementor adiciona em média 3 a 5 requisições extras por página de loja, e em catálogos grandes isso derruba o LCP no mobile. A causa raiz que mais aparece nos testes é cache mal configurado, com carrinho e checkout entrando indevidamente no cache de página.

Em lojas com mais de 500 produtos, o template de produto único com muitos widgets dinâmicos tende a elevar o TTFB no primeiro acesso quando o object cache não está ativo; a saída é ativar Redis ou Memcached e limitar widgets por página. Plugins como WP Rocket, Perfmatters e LiteSpeed Cache resolvem na maioria dos cenários testados, desde que carrinho, checkout e minha-conta fiquem fora do cache. Para a operação no dia a dia, o guia de como gerenciar uma loja WooCommerce detalha a rotina de manutenção que sustenta a performance.

Quando o Gutenberg resolve sem o Elementor

Para lojas com até 50 produtos e layout padrão, o Gutenberg com os blocos nativos do WooCommerce resolve sem custo de licença e com menos peso de página, o que mantém o LCP baixo no mobile sem ajuste extra. O Elementor Pro compete por liberdade visual; o Gutenberg compete por custo zero; o Crocoblock JetWooBuilder compete por widgets de loja avançados, como filtros AJAX e comparadores.

A escolha depende do que a loja precisa entregar. Se o objetivo é uma vitrine institucional com poucos SKUs, o Elementor pode ser excesso de ferramenta para o resultado. Se a loja vende dezenas de variações com design próprio por categoria, o WooCommerce Builder paga o esforço. Para decidir o investimento com números, o artigo sobre se o Elementor Pro vale a pena compara os cenários de uso lado a lado e mostra em que ponto a licença se justifica.

Ative o Elementor pro com o cache pronto pela FULL

A gente vê no suporte da FULL que a loja Elementor performa quando a licença e o cache vivem no mesmo lugar, sem configuração avulsa de plugin por plugin. Esse é o atrito que mais consome tempo de quem monta a vitrine sozinho.

Se você ainda não tem o Elementor Pro com o cache pronto, o plano PRO da FULL entrega o Elementor Pro, o WP Rocket e mais 15 plugins premium por R$85 por site, contra os R$849 que a soma das licenças avulsas custaria no varejo. Para a loja, isso significa Elementor Pro ativo, WP Rocket configurado e WooCommerce Builder no mesmo painel, com a exclusão de cache de carrinho e checkout já tratada no onboarding da conta. Veja os planos em planos da FULL, e a lista completa de recursos em Elementor Pro, com os widgets de loja incluídos no plano.

Perguntas frequentes sobre Elementor WooCommerce

Próximos passos para colocar a loja no ar

Comece pelo template de produto único no WooCommerce Builder, configure o widget Add to Cart dentro do WooCommerce Builder e só depois personalize carrinho e checkout, sempre com essas 3 páginas fora do cache de página. Essa ordem é a que menos gera retrabalho nas lojas que a gente vê no suporte da FULL, entre janeiro e maio de 2026. O object cache com Redis ativo fecha a conta da performance em catálogos grandes.

Para aprofundar conceitos, o glossário da FULL detalha WooCommerce, Elementor, cache de página e TTFB. E o guia Domine o Elementor reúne os tutoriais de construtor visual em um só lugar para continuar aprendendo.