Resumo: Como Personalizar a Página da Sua Loja WooCommerce
A página da loja WooCommerce é o arquivo de produtos da sua loja. Como ela é criada a partir de um arquivo de modelo, você não pode editá-la como uma página normal, mas pode redesenhá-la completamente com a ferramenta certa.
- O que é – A listagem principal de produtos da sua loja, gerada a partir do modelo archive-product.php do WooCommerce
- Método 1: SeedProd – Construtor de arrastar e soltar com blocos WooCommerce, mais de 300 modelos e controle total de design (sem código)
- Método 2: Editor do WordPress – Opção integrada usando o Editor de Site (temas de blocos) ou o Personalizador do WooCommerce (temas clássicos)
- Use o SeedProd para – Layouts personalizados, banners, seções em destaque e designs de loja WooCommerce que combinam com a marca
- Use o Editor do WordPress para – Ajustes rápidos de exibição, como ordem de classificação, produtos por linha ou alterações de coluna
Quando configurei minha primeira loja WooCommerce, fiquei animado para começar a vender, mas rapidamente percebi que a página da loja padrão parecia simples e não combinava nada com minha marca.
Se você está na mesma situação, não se preocupe. WooCommerce é a maneira mais popular de adicionar funcionalidades de e-commerce ao WordPress, e existem maneiras fáceis de fazer com que o layout da sua loja WooCommerce se destaque sem escrever uma única linha de código.
Você pode personalizar sua página da loja WooCommerce usando um construtor de arrastar e soltar como o SeedProd (sem necessidade de código) ou o Editor do WordPress integrado. Ambos os métodos levam menos de 30 minutos e não exigem um desenvolvedor.
Estes são os métodos exatos que usei para transformar minha página da loja padrão em algo mais limpo, mais envolvente e muito melhor em converter visitantes em compradores.
O Que é a Página da Loja WooCommerce?
A página da loja WooCommerce é a página de arquivo de produtos padrão que exibe todos os produtos da sua loja. Quando você instala o WooCommerce, ele cria automaticamente essa página usando as configurações de layout do seu tema.
Pense nisso como o catálogo principal ou a vitrine da sua loja. É onde os clientes normalmente navegam antes de clicar em páginas de produtos específicas.
Por padrão, a página da loja puxa conteúdo das suas listagens de produtos e exibe:
- Imagens dos produtos
- Títulos e descrições curtas
- Preços
- Categorias e tags de produtos
- Avaliações em estrelas e comentários (se ativados)
Ela é gerada dinamicamente usando seu tema WordPress e os arquivos de modelo do WooCommerce, e pode ser personalizada para combinar com sua marca e melhorar as conversões.
Uma página de loja bem projetada ajuda os visitantes a encontrar rapidamente o que procuram, reduz o atrito no processo de compra e aumenta as vendas.
Editar a página da loja WooCommerce diretamente no editor do WordPress não funcionará como você espera. A página da loja é gerada a partir de um arquivo de modelo chamado archive-product.php, que o WooCommerce usa para exibir seu arquivo de produtos dinamicamente usando ganchos PHP e shortcodes.
É por isso que clicar em “Editar Página” na página da loja não lhe dá controle sobre o modelo da página da loja WooCommerce ou a grade de produtos. Para personalizá-la, você precisa de um plugin como o SeedProd, que substitui o modelo pelo seu próprio design, ou das opções integradas do Personalizador do WooCommerce ou do Editor de Site.
Por Que Você Deve Personalizar a Página da Loja WooCommerce?
Imagine entrar em uma loja física onde todos os produtos estão espalhados aleatoriamente nas prateleiras. Sem placas, sem categorias, sem itens em destaque. Você provavelmente sairia rapidamente.
É exatamente isso que muitos compradores experimentam quando chegam a uma página de loja WooCommerce padrão. Uma grade de produtos simples, sem contexto ou direção, leva a altas taxas de rejeição e oportunidades de vendas perdidas.
Personalizar sua página da loja ajuda você a:
- Melhorar a experiência do usuário (UX) tornando mais fácil para os clientes encontrarem o que desejam
- Aumentar as conversões destacando os mais vendidos, promoções ou produtos de alta margem
- Melhorar o SEO adicionando conteúdo rico em palavras-chave e marcação de esquema
- Reduzir as taxas de rejeição oferecendo melhor navegação e hierarquia visual
- Construir confiança na marca com depoimentos, avaliações ou conteúdo gerado pelo usuário
Um design de loja WooCommerce bem otimizado é uma parte crítica para transformar visitantes em compradores. Se você ainda está construindo sua loja do zero, este guia sobre como configurar uma loja online no WordPress é um bom ponto de partida.
Como Personalizar a Página da Loja WooCommerce no WordPress
Existem várias maneiras de personalizar sua página da loja WooCommerce no WordPress. Aqui está uma visão geral rápida de suas opções antes de mergulharmos.
| Método | Ideal para | Código Necessário? |
|---|---|---|
| SeedProd | Controle total de design, layouts personalizados, banners, seções em destaque, loja WooCommerce com a identidade visual da marca | Não |
| Editor do WordPress (Editor de Site / Personalizador) | Mudanças rápidas de layout, ordem de classificação de produtos, colunas, sem necessidade de plugin extra | Não |
| Código personalizado | Modificações avançadas além do que as ferramentas oferecem | Sim (recomendado por desenvolvedor) |
Método 1: Use o SeedProd para Personalizar a Página da Loja WooCommerce
Usaremos o SeedProd para criar uma loja WooCommerce personalizada para o primeiro método.
SeedProd é o melhor construtor de sites de arrastar e soltar para WordPress, com mais de 1 milhão de usuários. Ele permite que você crie temas personalizados para WordPress, páginas de destino de alta conversão e layouts de sites responsivos sem código.
Em testes de desempenho, o SeedProd carregou em 556ms em comparação com 1.882ms do Elementor, com metade das requisições HTTP. Isso o torna uma ótima opção para qualquer loja WooCommerce personalizada onde a velocidade da página é importante.
Este plugin também permite que você crie lojas online inteiras com sua integração WooCommerce. Você pode personalizar sua página da loja, páginas de produtos, carrinho de compras, checkout e muito mais com apenas alguns cliques.
O SeedProd vem com mais de 300 temas e modelos profissionais. A partir daí, você pode personalizar o design da sua loja WooCommerce com blocos de conteúdo e seções fáceis de usar.
Siga estas etapas para personalizar sua página da loja WooCommerce com o SeedProd.
Etapa 1. Instale o SeedProd Website Builder
O primeiro passo é baixar uma cópia do plugin construtor de sites SeedProd.
Observação: O SeedProd oferece uma versão gratuita para criar landing pages simples. No entanto, usaremos o plano Elite do SeedProd para os recursos WooCommerce de que precisamos.
Você precisará instalar o SeedProd em seu site WordPress em seguida. Você pode seguir estas instruções para instalar um plugin do WordPress se precisar de ajuda.
Após instalar e ativar o SeedProd, vá para SeedProd » Configurações e insira sua chave de licença do plugin.
Você pode encontrar sua chave de licença fazendo login no site do SeedProd e copiando-a da seção 'Downloads'.
Insira sua chave de licença e clique no botão Verificar Chave antes de prosseguir para a próxima etapa.
Etapa 2. Crie um Tema WooCommerce Personalizado
Usaremos o recurso de construtor de temas do SeedProd para personalizar sua página da loja WooCommerce. Ele substituirá seu tema WordPress existente, substituindo-o por suas personalizações.
Você pode encontrá-lo acessando SeedProd » Theme Builder no seu painel do WordPress.
Existem 2 maneiras de criar seu tema de e-commerce com o SeedProd:
- Crie cada parte (template) do seu tema individualmente
- Crie todos os templates do seu tema com um template de tema WordPress pré-fabricado
Usaremos a segunda opção para este tutorial porque ela cria automaticamente todas as partes do seu site WooCommerce.
Clique no bot ildeo Temas no topo da sua tela para abrir a galeria de modelos de tema do SeedProd. Voc ilde{a> pode escolher entre v ildea>rios temas, incluindo designs para lojas online.
Usaremos o tema ilde>Loja de M ilde>veis ilde> para este tutorial.
Para importar o tema, passe o mouse sobre a miniatura e clique no ilde>cone de checkmark.
Como voc ilde{a> pode ver na captura de tela abaixo, o SeedProd criar ilde> todos os modelos para o seu tema automaticamente, incluindo:
- Navega ilde>o do Cabe ilde>alho
- Arquivos de Produto
- Página do Produto
- Página da Loja
- Página Única
- Post Único
- Indexa ilde>o do Blog, Arquivos, Pesquisa
- Página inicial
- Barra lateral
- Rodapé
Você pode personalizar cada modelo com o construtor de arrastar e soltar do SeedProd. Mostraremos como personalizar o modelo da página da loja na etapa 3.
Etapa 3. Personalizar P ilde>gina da Loja WooCommerce
Para personalizar sua p ilde>gina da loja WooCommerce com o SeedProd, passe o mouse sobre o modelo ilde>P ilde>gina da Loja ilde> e clique no link Editar Design.
Ap ilde>s clicar no link, seu modelo de p ilde>gina da loja ser ilde> aberto no construtor visual de p ilde>ginas de arrastar e soltar do SeedProd.
Na esquerda est ilde>o blocos e se ilde>es que voc ilde{a> pode adicionar ilde> sua p ilde>gina. Voc ilde{a> pode ver uma pr ilde>via de como sua p ilde>gina fica em tempo real ilde> direita.
Sua página da loja exibirá uma lista de todos os seus produtos por padrão. Você pode alterar isso adicionando novos layouts, blocos de conteúdo e seções.
Vamos dizer que voc ilde{a> quer adicionar um banner deslizante mostrando uma promo ilde>o ou oferta. Nesse caso, voc ilde{a> pode arrastar o bloco Carrossel de Imagens e carregar imagens de banner personalizadas.
Voc ilde{a> pode ent ilde>o personalizar seu carrossel nas configura ilde>es do bloco, mudando para um tema escuro ou claro, reproduzindo o slider automaticamente e mostrando as legendas das imagens.
E se voc ilde{a> quiser destacar seus produtos em destaque ou mais vendidos? Para fazer isso, adicione uma nova se ilde>o ilde> sua p ilde>gina, ent ilde>o role para baixo at ilde> o painel de blocos WooCommerce e arraste o bloco Produtos Mais Vendidos para sua p ilde>gina.
Este bloco exibir ilde> seus produtos mais vendidos em uma grade uniforme.
Voc ilde{a> pode fazer esta nova se ilde>o da p ilde>gina se destacar mais, dando a ela uma cor de fundo personalizada.
Ent ilde>o, nas Configura ilde>es Avan ilde>adas do bloco Produtos Mais Vendidos, voc ilde{a> pode alterar a cor, a tipografia e os bot ilde>es adicionar ao carrinho.
Voc ilde{a> tamb ilde>m pode exibir produtos por categoria com o bloco WooCommerce do SeedProd. Para fazer isso, arraste o bloco Grades de Produtos, altere o ilde>Tipo de Consulta ilde> para Consulta Personalizada e clique na op ilde>o Selecionar por Categoria.
A partir da ilde>, voc ilde{a> pode escolher quais categorias incluir na grade de produtos.
Alguns outros blocos que voc ilde{a> pode adicionar ilde> sua p ilde>gina da loja incluem:
- Depoimentos para aumentar a confian ilde>a e credibilidade
- Contadores regressivos para criar urg ilde>ncia para sua promo ilde>o
- Acorde ilde>o para exibir perguntas frequentes
- Incorpora ilde>es do Facebook ou Twitter para exibir conte ilde>do gerado pelo usu ilde>rio
Voc ilde{a> pode at ilde> mesmo alterar o t ilde>tulo da sua p ilde>gina da loja WooCommerce facilmente.
Quando voc ilde{a> estiver satisfeito com sua p ilde>gina da loja, clique no bot ilde>o verde Salvar no canto superior direito da sua tela.
Agora você pode seguir o mesmo processo para personalizar as outras partes da sua loja WooCommerce. Clique em 'Editar Design' em qualquer um dos seus modelos de tema e personalize o layout e o estilo para se adequar à sua marca.
Etapa 4. Publique sua página de loja personalizada
Quando seu site WooCommerce estiver do jeito que você deseja, é hora de publicá-lo. Para fazer isso, vá para SeedProd » Theme Builder e no canto superior direito, ative o controle deslizante 'Enable SeedProd Theme' para a posição 'Yes'.
Agora você pode visualizar sua página de loja WooCommerce ao vivo em seu site.
Método 2: Personalizar a Página da Loja WooCommerce Usando o Editor do WordPress
Se você prefere não usar um construtor de terceiros, o WordPress e o WooCommerce incluem ferramentas integradas para ajustar o layout da sua loja. Qual opção você usa depende do seu tema de e-commerce ativo.
Usando o Editor de Site (Temas de Blocos)
Se o seu site usa um tema de blocos (como Twenty Twenty-Four ou Twenty Twenty-Five), você pode editar o modelo da página da loja WooCommerce diretamente no Editor de Site.
Acesse Aparência » Editor no seu painel do WordPress. Abra a lista Modelos e procure pelo modelo Catálogo de Produtos (alguns temas o chamam de Loja). Clique nele para abrir o editor de modelos.
A partir daí, você pode adicionar, remover ou reorganizar blocos para alterar o layout da sua loja WooCommerce. Quando terminar, clique em Salvar.
Usando o Personalizador Clássico (Temas Clássicos)
Se o seu site usa um tema clássico, o WooCommerce adiciona configurações de exibição diretamente ao Personalizador do WordPress.
Vá para Aparência » Personalizar no seu painel do WordPress. Em seguida, clique em WooCommerce » Catálogo de Produtos para ver as opções de personalização.
Clique no menu suspenso ‘Exibição da página da loja’ e escolha um layout.
Por exemplo, escolha ‘Mostrar categorias’ para exibir apenas as categorias de produtos na página da loja.
Ou escolha ‘Mostrar produtos’ para exibir apenas produtos.
Você também pode exibir suas categorias de produtos primeiro, seguidas por uma grade de produtos com a opção ‘Mostrar categorias e produtos’.
Adicionalmente, você pode mostrar produtos por:
- Popularidade
- Avaliação média
- Mais recentes
- Preço
Você também pode escolher quantos produtos por linha e quantas linhas exibir em cada página.
Aqui está uma prévia de uma página da loja estilizada usando o Personalizador do WooCommerce.
FAQ: Personalizando a página da loja WooCommerce
Por que não consigo editar minha página da loja WooCommerce diretamente no WordPress?
A página da loja WooCommerce é gerada a partir de um arquivo de modelo chamado archive-product.php, não é armazenada como conteúdo de página regular. Clicar em “Editar Página” dá acesso ao objeto da página, mas a grade de produtos e o layout vêm do sistema de modelos PHP do WooCommerce, não do editor de blocos. Para alterar o design, você precisa de uma ferramenta que substitua o modelo, como o SeedProd, ou as opções integradas do Personalizador e do Editor de Site.
Como altero quais produtos são exibidos na página da loja WooCommerce?
Você pode controlar a visibilidade dos produtos nas configurações individuais de cada produto no WordPress. Defina um produto como “Em Destaque” para destacá-lo, ajuste seu status de publicação para mostrá-lo ou ocultá-lo, ou use categorias e tags de produtos para organizar o que aparece. O Personalizador do WooCommerce também permite alterar a ordem de classificação padrão (popularidade, avaliação média, mais recentes, preço) em Aparência » Personalizar » WooCommerce » Catálogo de Produtos.
Qual é o nome do arquivo de modelo da página da loja WooCommerce?
A página da loja WooCommerce usa o arquivo de modelo archive-product.php. Você pode encontrá-lo na pasta do plugin WooCommerce em woocommerce/templates/. Para personalizá-lo com código, copie-o para a pasta woocommerce/ do seu tema e modifique-o lá. Isso evita que suas alterações sejam substituídas em atualizações do plugin.
Como adiciono um banner ou seção em destaque à minha página da loja WooCommerce?
A maneira mais fácil é usar o construtor de arrastar e soltar do SeedProd. Abra o modelo da sua página da loja no SeedProd, em seguida, arraste um bloco de Carrossel de Imagens acima da grade de produtos para criar um banner deslizante. Para uma seção de produtos em destaque, adicione uma nova seção e insira o bloco de Produtos Mais Vendidos ou Produtos em Destaque. Você pode estilizar cada seção independentemente com fundos, cores e tipografia personalizados.
Qual é a diferença entre a página da loja WooCommerce e as páginas de produtos?
A página da loja (também chamada de arquivo de produtos) é uma página de listagem que exibe todos os seus produtos em uma grade. As páginas de produtos são páginas individuais para cada item, mostrando descrições detalhadas, imagens, preço e o botão Adicionar ao Carrinho. Os clientes geralmente chegam primeiro à página da loja, navegam e, em seguida, clicam nas páginas de produtos individuais. Ambas podem ser personalizadas com o SeedProd.
Espero que este artigo tenha ajudado você a aprender como personalizar sua página da loja WooCommerce.
SeedProd oferece controle total sobre o layout da sua loja WooCommerce sem tocar em uma linha de código. O construtor de arrastar e soltar torna tudo simples, mesmo que você nunca tenha personalizado uma loja WooCommerce antes.
Pronto para impulsionar suas vendas WooCommerce?
Você também pode gostar deste guia sobre como configurar o rastreamento de conversão do WooCommerce enquanto estiver aqui. Ou este sobre os melhores plugins de afiliados do WooCommerce.
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
