Elementor e WooCommerce juntos formam uma das combinações mais flexíveis para construir lojas online personalizadas no WordPress. Enquanto o WooCommerce lida com a funcionalidade de e-commerce (produtos, carrinho, checkout, pagamentos), o Elementor oferece controle visual sobre como essas páginas da loja se parecem e funcionam. Neste guia, vamos percorrer a construção de páginas-chave do WooCommerce com o Elementor, incluindo páginas de produtos, arquivos de loja e a experiência do carrinho.
Este tutorial assume que você tem WordPress, WooCommerce e Elementor Pro instalados. O Elementor Pro é necessário para os widgets do WooCommerce— a versão gratuita do Elementor não os inclui.
O Que Você Precisa Antes de Começar
| Requisito | Por Que É Necessário | Onde Obter |
|---|---|---|
| WordPress 6.x+ | Plataforma CMS principal | wordpress.org |
| WooCommerce (grátis) | Funcionalidade de e-commerce | Diretório de plugins do WordPress |
| Elementor Pro | Widgets do WooCommerce e Theme Builder | PluginTheme.net |
| Tema compatível | Base para sua loja | Guia de seleção de temas |
| Produtos de exemplo | Conteúdo para projetar modelos | WooCommerce → Ferramentas → Importar dados de exemplo |
Entendendo o Construtor WooCommerce do Elementor
O Elementor Pro inclui um Construtor WooCommerce dedicado dentro do seu sistema Theme Builder. Isso permite que você crie modelos personalizados para:
- Página de Produto Único: Controle o layout das páginas de produtos individuais
- Arquivo de Produtos: Personalize a página da loja e as páginas de categorias
- Página do Carrinho: Projete um layout de carrinho personalizado
- Página de Checkout: Personalize o layout do formulário de checkout
- Página Minha Conta: Redesenhe o painel da conta do cliente
Cada modelo utiliza widgets específicos do WooCommerce que puxam dados dinâmicos dos seus produtos. Isso significa que você projeta o layout uma vez, e ele se aplica a todos os produtos (ou categorias específicas) automaticamente.
Construindo uma Página de Produto Personalizada
Passo 1: Criar o Modelo
- Navegue até Modelos → Theme Builder no seu admin do WordPress
- Clique em "Adicionar Novo" e selecione "Produto Único" como o tipo de modelo
- Escolha um modelo de página de produto pré-construído ou comece a partir de uma tela em branco
- O editor do Elementor será aberto com widgets do WooCommerce disponíveis no painel
Passo 2: Adicionar Widgets do WooCommerce
Widgets principais do WooCommerce para páginas de produtos:
| Widget | O Que Ele Exibe | Opções de Personalização |
|---|---|---|
| Imagens do Produto | Galeria com miniaturas e lightbox | Layout da galeria, posição da miniatura, alternância de zoom |
| Título do Produto | Nome do produto (H1) | Tipografia, cor, alinhamento |
| Preço do Produto | Preço regular e preço promocional | Tipografia, cor do selo de promoção, layout |
| Avaliação do Produto | Avaliação em estrelas a partir de avaliações | Cor das estrelas, tamanho, alinhamento |
| Adicionar ao Carrinho | Selecionador de quantidade + botão de adicionar ao carrinho | Estilo do botão, cores, layout da quantidade |
| Descrição Curta do Produto | Resumo breve do produto | Tipografia, espaçamento |
| Meta do Produto | SKU, categorias, tags | Layout, tipografia, separador |
| Aba de Dados do Produto | Descrição, avaliações, abas de informações adicionais | Estilo da aba, borda, espaçamento |
| Produtos Relacionados | Produtos da mesma categoria | Colunas, contagem, ordem |
| Upsells | Upsell vinculado manualmente |
Passo 3: Melhores Práticas de Layout
Uma página de produto com alta conversão segue um padrão de layout testado:
- Abaixo da dobra: Imagens do produto (esquerda, 50-60% de largura) + título, preço, avaliação, descrição curta e botão de adicionar ao carrinho (direita, 40-50% de largura)
- Abaixo da dobra: Abas de dados do produto (descrição completa, especificações, avaliações)
- Seção inferior: Produtos relacionados e upsells em uma grade (3-4 colunas)
- Elementos de confiança: Informações de envio, política de devolução, selos de segurança próximos ao botão de adicionar ao carrinho
Mantenha o botão de adicionar ao carrinho visível sem rolar tanto no desktop quanto no mobile. Use cores contrastantes para o botão para chamar a atenção.
Personalizando a Página da Loja (Arquivo de Produtos)
Passo 1: Criar um Modelo de Arquivo
- Vá para Modelos → Construtor de Temas → Arquivo de Produtos
- Adicione um novo modelo e selecione "Arquivo de Produtos" como o tipo
- Atribua condições de exibição (todos os arquivos, categorias específicas ou páginas de tags)
Passo 2: Configurar a Grade de Produtos
O widget Produtos do Arquivo exibe sua lista de produtos com estas opções:
- Colunas: 2-6 colunas (3-4 funciona bem para a maioria das lojas)
- Produtos por página: 12-24 é o padrão para a experiência do usuário
- Paginacão: Páginas numeradas, botão "carregar mais" ou rolagem infinita
- Dropdown de ordenação: Permita que os clientes classifiquem por preço, popularidade ou avaliação
- Selo de venda: Personalize a posição, cor e texto do selo de venda
Para lojas com muitos produtos, adicione filtragem de categorias acima da grade. Você pode usar o widget Menu do Elementor ou um plugin de filtro de produtos como JetWooBuilder para opções de filtragem avançadas.
Projetando a Página do Carrinho
O Elementor Pro permite que você personalize o layout da página do carrinho. Uma boa página de carrinho deve:
- Exibir imagens, nomes, preços e quantidades dos produtos em uma tabela limpa
- Mostrar o total acumulado de forma proeminente
- Incluir um botão "Continuar Comprando" que retorna à página da loja
- Exibir um calculador de frete para que os clientes possam estimar os custos de entrega
- Mostrar produtos de cross-sell abaixo da tabela do carrinho
O widget de Carrinho do Elementor substitui o layout padrão do carrinho do WooCommerce por um editor visual onde você pode estilizar cada elemento—bordas da tabela, cores dos botões, tipografia e espaçamento.
Personalizando a Página de Checkout
A página de checkout impacta diretamente sua taxa de conversão. O widget de Checkout do Elementor Pro oferece controle sobre:
- Layout do formulário: Formulário de cobrança/envio em uma coluna ou duas colunas
- Posição do resumo do pedido: Lado a lado com o formulário ou acima/abaixo
- Estilo do botão: Cor, tamanho e texto do botão de finalizar pedido
- Seção de pagamento: Layout de botão de opção ou abas para métodos de pagamento
- Selos de confiança: Adicione ícones de segurança e texto de garantia próximo ao formulário de pagamento
Para dicas de otimização de conversão no checkout, consulte nosso guia de otimização de checkout do WooCommerce.
Considerações de Desempenho
O Elementor adiciona CSS e JavaScript às suas páginas. Para uma loja WooCommerce, o desempenho está diretamente ligado às conversões. Mantenha estas dicas em mente:
- Use contêineres Flexbox em vez de seções/colunas para menos elementos DOM
- Otimize imagens de produtos: Use formato WebP, dimensões adequadas e carregamento preguiçoso. Consulte nosso guia de otimização de imagens
- Limitar a contagem de widgets: Cada widget adiciona marcação; use apenas o que você precisa
- Ativar os recursos de desempenho do Elementor: Carregamento de ativos aprimorado, carregamento de CSS aprimorado
- Use um plugin de cache: WP Rocket funciona bem com configurações do Elementor WooCommerce
Complementos Essenciais para Elementor WooCommerce
Esses complementos do Elementor ampliam as capacidades de construção do WooCommerce:
| Complemento | Principais Recursos do WooCommerce |
|---|---|
| JetWooBuilder | Grades de produtos avançadas, modelos de arquivo personalizados, layouts de produtos únicos com lógica condicional |
| Essential Addons Pro | Grade de produtos, carrossel de produtos, checkout do WooCommerce |
| Happy Elementor Addons | Grade de categorias de produtos, mini carrinho, carrossel de produtos |
Perguntas Frequentes
Preciso do Elementor Pro para WooCommerce ou a versão gratuita funciona?
O Elementor Pro é necessário para widgets específicos do WooCommerce (Imagens de Produtos, Adicionar ao Carrinho, Abas de Dados do Produto, Carrinho, Checkout, etc.). A versão gratuita do Elementor não inclui esses widgets. Você pode usar a versão gratuita para projetar páginas regulares, mas modelos personalizados do WooCommerce exigem Elementor Pro.
Posso usar o Elementor para a página de checkout?
Sim. O Elementor Pro inclui um widget de Checkout que substitui o layout padrão do checkout do WooCommerce. Você pode personalizar os campos do formulário, o resumo do pedido, a seção de pagamento e o layout geral. No entanto, tenha cuidado com personalizações pesadas que podem quebrar integrações de gateways de pagamento—sempre teste o fluxo completo de compra após fazer alterações.
Como crio diferentes layouts de página de produto para diferentes categorias?
No Construtor de Temas do Elementor, você pode atribuir condições de exibição a cada modelo. Crie um modelo de página de produto para roupas (com seletores de tamanho/cor), outro para produtos digitais (sem informações de envio), e assim por diante. Cada modelo se aplica apenas a produtos nas categorias especificadas.
O Elementor desacelera o WooCommerce?
O Elementor adiciona sobrecarga de CSS e JavaScript a qualquer página. Em páginas de produtos com muitos widgets, isso pode aumentar os tempos de carregamento em 0,5-1,5 segundos em comparação com os modelos padrão do WooCommerce. Usar os recursos de desempenho integrados do Elementor, otimizar imagens e usar um plugin de cache ajuda a mitigar esse impacto. Para lojas críticas em desempenho, considere um tema mais leve como GeneratePress.
Posso usar modelos do Elementor WooCommerce com qualquer tema?
A maioria dos modelos do Elementor WooCommerce funciona com qualquer tema que suporte WooCommerce. No entanto, alguns temas podem ter seu próprio estilo de página de produto que conflita com os modelos do Elementor. Temas como Astra, GeneratePress e OceanWP são projetados para funcionar perfeitamente com o Elementor e fornecer a tela mais limpa para modelos personalizados.
Adquira o Elementor Pro para Construção de Lojas WooCommerce
Acesse todos os widgets do WooCommerce, Construtor de Temas e mais de 100 modelos Pro. Crie páginas de produtos personalizadas, arquivos de loja e layouts de checkout visualmente.
Navegue pelo Elementor Pro →
