O Elementor WooCommerce é a combinação do construtor visual Elementor Pro com a loja WooCommerce para desenhar páginas de produto, carrinho e checkout sem código. Funciona pelo WooCommerce Builder, ativo só no Elementor Pro 3.x. O veredicto: monte o template de produto único primeiro e exclua carrinho e checkout do cache. É isso que evita 90% dos travamentos de loja.

O Elementor WooCommerce permite controlar cada bloco da loja, da galeria do produto ao botão de compra, dentro do mesmo editor visual do tema. A integração só existe na versão Pro: o Elementor gratuito não traz o WooCommerce Builder nem os widgets de produto. Na base da FULL, com 150 mil sites WordPress hospedados, a maioria das lojas que abre ticket de carrinho quebrado tem o mesmo problema, cache de página servindo o total do carrinho desatualizado. Antes de personalizar a vitrine, vale entender o fluxo completo. 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 Elementor 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. Em 7 de 10 lojas que chegam ao suporte da FULL, só o template de produto único já resolve a necessidade de personalização da vitrine.

A tabela abaixo mostra o que cada parte controla e o que vigiar em cada uma antes de publicar.

Cada template é editado em Modelos > Theme Builder, com a condição de exibição apontando para a loja inteira ou para categorias específicas. Segundo a documentação oficial de templates do WooCommerce, que mantém a referência canônica de como os templates de loja são sobrescritos, qualquer construtor visual atua nessa mesma camada de template, então a lógica vale também para o Elementor: veja a referência 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. Na prática, a maior dor não é o preço: é performance, porque cada página de loja ganha scripts extras 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 aumenta o TTFB no primeiro acesso. A limitação honesta: o Elementor adiciona CSS e JS próprios em cada página de loja, e isso pesa mais do que uma vitrine feita só com Gutenberg. Por isso a gente vê no suporte da FULL que a combinação que funciona é Elementor Pro mais um plugin de cache bem configurado. No bundle FULL, o Elementor Pro entra junto com 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 licença ativa e cache pronto no mesmo lugar.

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: Montar a página de produto no Elementor

A montagem da página de produto 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.

Os passos abaixo seguem a ordem que reduz retrabalho, porque definir a condição de exibição antes do design evita refazer o layout inteiro depois.

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.

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 as abas de descrição completa e avaliações. Mantenha menos de 15 widgets por página para não inflar o tempo de renderização.

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.

Como personalizar carrinho e checkout sem quebrar a venda

O carrinho e o checkout são páginas dinâmicas, e 8 em cada 10 lojas com checkout travado no suporte da FULL erram no mesmo ponto: cacheiam o que não deveria, e o cliente vê o valor errado na hora de pagar.

O Elementor Pro com o template de checkout personalizado e cache de página ativo sem exclusão dessas URLs em servidor Apache serve o total do carrinho desatualizado. Para personalizar com segurança, edite os templates de carrinho e checkout no Theme Builder, mas adicione carrinho, checkout e minha-conta à lista de 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. Um detalhe que só aparece em operação: em lojas com cupom dinâmico, o widget de checkout do Elementor precisa do campo de cupom nativo do WooCommerce, senão o desconto não recalcula no total.

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 é 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, desde que carrinho, checkout e minha-conta fiquem fora do cache. Se a loja ainda arrasta, vale revisar o passo a passo de por que o Elementor fica lento antes de trocar de servidor.

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. Se a loja vende dezenas de variações com design próprio por categoria, o WooCommerce Builder do Elementor paga o esforço. Para decidir o investimento, o artigo sobre se o Elementor Pro vale a pena compara os cenários com números, e o guia de como gerenciar uma loja WooCommerce cobre a operação do dia a dia.

FAQ

O que fazer agora para colocar a loja no ar

Comece pelo template de produto único no WooCommerce Builder, configure o widget Add to Cart e só depois personalize carrinho e checkout, sempre com essas 3 páginas fora do cache. Essa ordem é a que menos gera retrabalho nas lojas que a gente vê no suporte da FULL.

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 R$849 nas licenças avulsas, em full.services/planos. Para aprofundar, o Elementor Pro tem a página completa de recursos, e o glossário da FULL detalha conceitos como WooCommerce, cache de página e TTFB. Veja também todos os artigos de Elementor da FULL e o guia Domine o Elementor no FULL Academy para continuar aprendendo.