Como Personalizar Facilmente a Página da Sua Loja WooCommerce 

Quando configurei uma loja WooCommerce pela primeira vez, 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. Ela apenas mostrava uma grade básica de produtos, e eu não tinha ideia de como personalizá-la sem contratar um desenvolvedor.

Se você está na mesma situação, não se preocupe. WooCommerce é a maneira mais popular de adicionar funcionalidades de eCommerce ao WordPress, e existem maneiras fáceis de fazer sua página da loja se destacar sem escrever uma única linha de código.

Neste guia, mostrarei passo a passo como:

• Personalizar o layout da sua loja WooCommerce visualmente
• Organizar produtos por categoria, popularidade ou tags
• Adicionar elementos de design como depoimentos, banners e produtos em destaque
• Usar ferramentas como SeedProd para construir uma vitrine que pareça sua

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 pode ajudar os visitantes a encontrar rapidamente o que procuram, reduzir o atrito no processo de compra e aumentar as vendas. É por isso que personalizar o layout padrão da página da loja WooCommerce é tão importante.

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. Ela mostra todos os seus produtos em uma grade simples, com pouco contexto ou direção. Isso pode levar 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 layout de loja WooCommerce bem otimizado é uma parte crítica para transformar visitantes em compradores.

Como Personalizar a Página da Loja WooCommerce no WordPress

Existem várias maneiras de personalizar sua página da loja no WordPress. Você pode usar um plugin WooCommerce, construtores de páginas ou codificar as personalizações do zero.

Como quero manter este tutorial o mais simples possível, vou me concentrar em 2 das maneiras mais fáceis de personalizar páginas WooCommerce.

O primeiro método usará um poderoso plugin construtor de sites WordPress que é fácil de usar e repleto de opções de personalização. Em seguida, mostrarei como usar o personalizador WooCommerce para alterar o layout da sua página da loja.

Método 1: Use o SeedProd para Personalizar a Página da Loja WooCommerce

Usaremos o SeedProd para adicionar personalizações à sua loja online para o primeiro método.

SeedProd é o melhor construtor de sites para WordPress, com mais de 1 milhão de usuários. Ele permite que você crie temas personalizados para WordPress, landing pages de alta conversão e layouts de sites responsivos sem código.

Este poderoso plugin também permite que você crie lojas online inteiras com sua integração WooCommerce. Como resultado, você pode criar e personalizar sua página da loja WooCommerce, páginas de produtos, carrinho de compras, checkout e muito mais com apenas alguns cliques.

O SeedProd vem com mais de 150 temas e modelos profissionais para criar seu site. A partir daí, você pode personalizar seu design 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 indo em SeedProd » Theme Builder no seu painel do WordPress.

Existem 2 maneiras de criar seu tema de e-commerce com o SeedProd:

1. Crie cada parte (template) do seu tema individualmente
2. 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 ilde{a> pode personalizar cada modelo com o construtor de arrastar e soltar do SeedProd. Mostraremos como personalizar o modelo da p ilde>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 ilde>gina da loja exibir ilde> uma lista de todos os seus produtos por padr ilde>o. No entanto, voc ilde{a> pode mudar isso facilmente adicionando novos layouts, blocos de conte ilde>do e se ilde>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. Basta clicar em ‘Editar Design’ em qualquer um dos modelos do seu tema e personalizar o layout e o estilo para se adequar à sua marca.

Etapa 4. Publique sua página de loja personalizada

Quando seu site WooCommerce estiver com a aparência desejada, é hora de publicá-lo. Para fazer isso, vá para SeedProd » Theme Builder, e no canto superior direito, mude 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: Personalize a página da loja WooCommerce usando o Personalizador de Temas

Se você prefere não usar um construtor de terceiros, o WooCommerce inclui opções básicas de personalização através do Personalizador do WordPress.

As opções de personalização que você vê dependerão do tema do WordPress que você usa em seu site. Estamos usando o tema padrão Twenty Twenty-Two para este guia.

Para personalizar sua página de loja com o personalizador, clique em Aparência » Personalizar no seu painel do WordPress. A partir daí, clique em WooCommerce  » Catálogo de Produtos para ver as opções de personalização.

Em seguida, clique no menu suspenso ‘Exibição da página da loja’ e escolha um layout.

Por exemplo, você pode escolher ‘Mostrar categorias’ para exibir apenas suas categorias de produtos na página da loja.

Ou você pode escolher ‘Mostrar produtos’ para exibir apenas produtos.

Alternativamente, você pode exibir suas categorias de produtos primeiro, depois 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.

Lembre-se de publicar suas alterações quando estiver satisfeito com seu design. Aqui está uma prévia de uma página de loja que estilizamos usando o Personalizador do WooCommerce.

FAQ: Personalizando a página da loja WooCommerce

Espero que este artigo tenha ajudado você a aprender como personalizar a página da loja WooCommerce.

Como você pode ver, o SeedProd torna super fácil criar um site WooCommerce exclusivo e amigável sem a necessidade de experiência prévia em design ou código. É tão simples quanto apontar e clicar, com resultados impressionantes que os clientes em potencial vão adorar.

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.