| Template do Elementor | O que controla na loja | Ponto de atenção |
|---|---|---|
| Produto único | Galeria, preço, descrição e botão de compra de cada produto. | Use o widget Add to Cart para produtos variáveis. |
| Arquivo de produtos | Grade da loja, categorias e filtros de listagem. | Limite widgets dinâmicos para não pesar o TTFB. |
| Carrinho | Layout do carrinho e resumo de itens. | Exclua esta página do cache de página. |
| Checkout | Campos de cobrança, entrega e pagamento. | Não minifique o JS do gateway de pagamento. |
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.Não, não dá para personalizar a loja sem o Pro. O WooCommerce Builder e os widgets de produto existem apenas no Elementor Pro 3.x; o Elementor gratuito não edita páginas de produto, carrinho ou checkout. Com a versão gratuita, a loja fica presa aos templates padrão do WooCommerce 9.x ou do tema. Para personalizar a vitrine no editor visual, escolha o Pro, e no bundle FULL ele sai por R$85 por site com WP Rocket incluso.
Porque o Elementor injeta CSS e JS próprios em cada página, somando de 3 a 5 requisições extras por tela de loja. Em servidores sem object cache e com catálogo acima de 500 produtos, o template de produto único com muitos widgets dinâmicos eleva o TTFB no primeiro acesso. Para corrigir, ative Redis ou Memcached, configure o WP Rocket e limite a quantidade de widgets por página de produto. Essa combinação resolve a lentidão na maioria dos casos.
Leva cerca de 30 minutos na primeira vez, contando a configuração do template de produto único no Theme Builder. Depois que o template está pronto, ele se aplica a todos os produtos que casam com a condição de exibição, então novos itens não exigem novo design. O tempo cresce se a loja precisar de layouts diferentes por categoria, porque cada condição de exibição vira um template separado dentro do WooCommerce Builder do Elementor Pro 3.x.
É o widget Add to Cart, responsável por renderizar o botão de compra e o seletor de variações no template de produto único. Sem ele, produtos variáveis não conseguem ser adicionados ao carrinho, porque o seletor de atributos não aparece para o cliente. Coloque o Add to Cart logo após o widget Preço e teste sempre em modo anônimo. Em lojas com variações, esse widget é o que mais quebra quando esquecido no layout do Elementor.
Abra o WP Rocket, vá em Configurações avançadas e adicione as URLs de carrinho, checkout e minha-conta em Nunca armazenar em cache. O WooCommerce 9.x já marca essas páginas como dinâmicas, mas o plugin de cache precisa respeitar a exclusão. Sem isso, o total do carrinho é servido desatualizado para visitantes diferentes. Essa exclusão é o ajuste que mais evita ticket de checkout travado no suporte da FULL.