Como Personalizar Facilmente a Página da Sua Loja WooCommerce 

A primeira loja WooCommerce que configurei para um cliente tinha uma página de loja que parecia simples e não combinava nada com a marca deles.

Se você está na mesma situação, não se preocupe. WooCommerce é a maneira mais popular de adicionar comércio eletrônico ao WordPress, e você pode personalizar sua página de loja WooCommerce sem escrever uma única linha de código.

Vou mostrar como redesenhar a página inteira com um construtor de arrastar e soltar ou com o editor integrado do WordPress. Depois disso, passaremos para o título da página da loja, suas páginas de categoria de produtos e galerias de produtos.

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 geralmente navegam antes de clicar nas páginas de produtos específicos.

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)

O WordPress o gera dinamicamente a partir do seu tema e dos arquivos de modelo do WooCommerce.

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 sinalização, categorias ou itens em destaque. Você provavelmente sairia rápido.

É 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 1: Use o SeedProd para Personalizar a Página da Loja WooCommerce

Para o primeiro método, usarei o SeedProd para construir uma loja WooCommerce completamente personalizada.

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.

Quando medi a velocidade da página com o GTmetrix, o SeedProd carregou em 556ms em comparação com os 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 criar lojas online completas com sua integração WooCommerce. Você pode personalizar sua página da loja, páginas de produtos, carrinho de compras, checkout e muito mais em poucos 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.

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

O Theme Builder do SeedProd é o que personaliza sua página da loja WooCommerce. Ele substitui seu tema WordPress existente, substituindo-o pelo seu próprio design.

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:

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ê 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ê pode até alterar o título da sua página da loja WooCommerce, o que abordarei mais adiante neste guia.

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ê preferir 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 eCommerce 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’.

Você também pode ordenar os 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.

Como Alterar o Título da Página da Loja no WooCommerce

O WooCommerce nomeia sua página da loja como ‘Loja’ quando você a instala, e muitos proprietários de lojas nunca a alteram. Um título mais descritivo, como ‘Criações Artesanais’ para uma loja de artesanato, informa aos visitantes o que você vende antes que eles comecem a navegar.

Isso também pode ajudar seu SEO. Os motores de busca usam títulos para entender do que se trata uma página, então um título com uma palavra-chave relevante dá à sua loja uma chance melhor de ranquear.

O método certo depende de qual título você deseja alterar: o da própria página ou o dos resultados da pesquisa. Aqui estão todos os quatro.

Renomear a Página da Loja no WordPress

A correção mais rápida é renomear a página Loja como qualquer outra página do WordPress. Vá para Páginas no seu painel do WordPress, encontre sua página da loja (geralmente listada como ‘Loja – Página da Loja’) e clique em Editar.

Exclua o título antigo no topo do editor, digite o novo e clique em Atualizar.

Isso altera o título em todos os lugares: na página, na aba do navegador, nos resultados da pesquisa e em quaisquer breadcrumbs ou menus de navegação que listam a página.

Alterar o Título SEO da Página da Loja com AIOSEO

Às vezes, você quer que o título na página permaneça o mesmo, enquanto o dos resultados da pesquisa faz a venda. Esse título listado na pesquisa é o título de SEO, e é o que as pessoas veem no Google antes mesmo de visitar sua loja.

Para alterá-lo, eu uso o All in One SEO (AIOSEO), o melhor plugin de SEO para WordPress com mais de 3 milhões de usuários. A versão gratuita lida com títulos de página personalizados, e a versão Pro adiciona suporte completo de SEO para WooCommerce.

Depois que o plugin estiver configurado, abra sua página da loja no editor do WordPress e role para baixo até a caixa Configurações do AIOSEO.

Digite seu título personalizado no campo Título da Página, ou use Smart Tags para criar um automaticamente. Em seguida, clique em Atualizar, e os motores de busca mostrarão o novo título na próxima vez que rastrearem sua página.

Alterar o Título da Página da Loja no SeedProd

Se você criou sua página da loja com o SeedProd no Método 1, o título é um bloco como todo o resto. Vá para SeedProd » Theme Builder e clique em ‘Editar Design’ no seu modelo de página da loja.

Clique no título no editor visual e digite o seu novo. No mesmo painel, você pode ajustar seu tamanho, nível de cabeçalho, alinhamento e visibilidade no celular.

Para alterar a cor e as fontes do título, clique na guia Avançado e use as opções de estilo de apontar e clicar.

Quando estiver satisfeito com o resultado, clique em Salvar.

Como Ocultar o Título da Página da Loja

Às vezes, o melhor título é nenhum título, como quando um banner personalizado ou uma imagem principal fala por si. Você pode ocultar o título da página da loja com um pequeno trecho de CSS.

Vá para Aparência » Personalizar no seu painel do WordPress e clique em CSS adicional.

Na caixa de texto, insira o seguinte código e clique em Publicar:

.woocommerce-products-header {
   display: none;
}

Para trazer o título de volta mais tarde, exclua o código e publique novamente. Você também pode adicionar o trecho com o WPCode, o melhor plugin de trechos de código do WordPress, para que você possa ativá-lo e desativá-lo com um clique.

Como Alterar a Página da Loja Padrão no WooCommerce

O WooCommerce também permite que você altere qual página atua como sua página da loja. Isso é útil se você criou uma página personalizada que prefere usar como porta de entrada da sua loja.

Vá para WooCommerce » Configurações e abra a guia Produtos. Na seção 'Páginas da loja', escolha qualquer página no menu suspenso 'Página da loja' e clique em Salvar alterações.

O WooCommerce agora usa essa página como seu arquivo de produtos. A página da loja também pode atuar como base para os seus permalinks de produtos, portanto, verifique novamente os URLs dos seus produtos após a troca.

Como personalizar páginas de categoria de produto no WooCommerce

Sua página da loja não é a única página em que os compradores chegam. Os motores de busca geralmente enviam as pessoas diretamente para uma página de categoria de produto, pois ela corresponde melhor a uma pesquisa específica como 'bicicletas de estrada' do que a uma vitrine geral.

A maioria das lojas deixa essas páginas como grades de produtos simples. Personalizar suas páginas de categoria com um título, banner e layout adequados ajuda-as a classificar para as palavras-chave que seus compradores pesquisam e dá às pessoas um motivo para permanecerem quando chegam.

Adicione Categorias de Produtos Primeiro

Se seus produtos ainda não estão organizados em categorias, comece por aí. Vá para Produtos » Categorias no seu painel do WordPress.

Dê a cada categoria um nome, slug, descrição e miniatura. O WooCommerce, então, cria uma página para cada categoria automaticamente, e são essas páginas que você personalizará em seguida.

Personalize seu Modelo de Página de Categoria no SeedProd

Cada página de categoria em sua loja vem de um único modelo de tema chamado Arquivos de Produto. Personalize-o uma vez e todas as suas páginas de categoria serão atualizadas para corresponder.

Se você construiu sua loja com SeedProd no Método 1, este modelo já faz parte do seu tema WooCommerce. Vá para SeedProd » Theme Builder, passe o mouse sobre o modelo 'Arquivos de Produto' e clique em Editar Design.

O modelo abre no mesmo editor de arrastar e soltar que você usou para sua página da loja. Você encontrará dois blocos já no lugar: Título do Arquivo e Produtos do Arquivo.

O bloco Título do Arquivo mostra o título correto para cada categoria automaticamente. Se um comprador abrir sua categoria 'Bicicletas Pretas', o título será 'Categoria: Bicicletas Pretas' sem que você precise fazer nada.

O bloco Produtos do Arquivo faz o mesmo para seus produtos, exibindo uma grade filtrada para qualquer categoria que o comprador esteja visualizando.

Clique em qualquer um dos blocos para estilizá-lo no painel de configurações à esquerda. Você pode alterar o tamanho, o alinhamento e o nível de título, em seguida, ajustar as fontes, cores e espaçamento na guia Avançado.

A partir daí, você pode redesenhar todo o layout com qualquer um dos blocos e seções do SeedProd. Arraste um bloco de Imagem para adicionar um banner de categoria promovendo sua última promoção, ou solte o bloco de Depoimentos ao lado de seus produtos para que os compradores vejam avaliações reais de clientes enquanto navegam.

Aqui, movi os blocos de arquivo para uma coluna larga e adicionei depoimentos na coluna estreita ao lado deles.

Quando estiver satisfeito com o design da sua página de categoria, clique em Salvar. Se o seu tema SeedProd já estiver ativado a partir do Método 1, as alterações entram em vigor em todas as páginas de categoria imediatamente.

Quer mostrar links de categoria na página da loja também? Defina o bloco Grades de Produtos para uma consulta personalizada como no Método 1, Passo 3, ou ative 'Mostrar categorias' nas configurações do Catálogo de Produtos.

Como Adicionar uma Galeria de Imagens de Produto no WooCommerce

Sua página da loja tem uma função: fazer os compradores clicarem em um produto. A página do produto, então, tem que fechar a venda, e uma única foto raramente consegue isso.

Trabalhei em lojas WooCommerce onde tudo parecia polido, exceto as páginas de produto. Elas tinham uma imagem, talvez duas, sem nada para mostrar ângulos, cores ou detalhes diferentes.

Adicionar uma galeria de imagens de produtos mudou isso rapidamente. Os clientes permaneceram na página por mais tempo, fizeram menos perguntas e puderam inspecionar os produtos da maneira que fariam em uma loja real.

O WooCommerce inclui uma galeria de produtos básica. Veja como configurá-la e, em seguida, personalize sua aparência com o mesmo tema SeedProd que você criou no Método 1.

Adicione Imagens de Galeria aos seus Produtos WooCommerce

Primeiro, dê aos seus produtos algumas fotos extras para exibir. Vá para Produtos » Todos os Produtos no seu painel do WordPress, encontre o produto que deseja atualizar e clique em Editar.

No editor de produtos, procure o painel ‘Galeria de Produtos’ no lado direito. Clique no link Adicionar imagens à galeria de produtos.

Isso abre a Biblioteca de Mídia do WordPress, onde você pode carregar novas fotos ou escolher as existentes. Segure Shift para selecionar várias imagens de uma vez e clique em Adicionar à Galeria.

Agora você verá a imagem principal do seu produto com as miniaturas da galeria abaixo dela. Clique em Atualizar para salvar o produto.

O conteúdo da galeria está resolvido. A forma como ele é exibido (layout, zoom e lightbox) depende do seu modelo de página de produto, que é onde o SeedProd entra em jogo.

Exiba a Galeria com o Bloco de Imagens da Galeria de Produtos do SeedProd

Se você criou sua loja com o SeedProd no Método 1, já tem um modelo de Página de Produto. Ele controla a aparência de cada página de produto individual.

Vá para SeedProd » Theme Builder, passe o mouse sobre o modelo ‘Página de Produto’ e clique em Editar Design.

O modelo abre no mesmo construtor de arrastar e soltar que você usou para a página da sua loja.

A maioria dos modelos usa o bloco Imagem em Destaque do Produto por padrão, que mostra uma foto por produto. Para exibir sua galeria completa em vez disso, passe o mouse sobre esse bloco até ver uma borda laranja e clique no ícone da lixeira para removê-lo.

Agora encontre o bloco Imagens da Galeria de Produtos no painel esquerdo e arraste-o para o espaço que você limpou. Ele puxa todas as imagens da galeria diretamente do WooCommerce, então o bloco permanece atualizado quando você altera as fotos de um produto.

Clique no bloco da galeria para abrir suas configurações. A opção de zoom da imagem permite que os compradores ampliem uma foto passando o mouse sobre ela, e você pode ajustar a posição, o tamanho e as cores do botão de zoom.

Você também pode estilizar as bordas da imagem principal e das miniaturas, e a aba Avançado adiciona controles de espaçamento, visibilidade de dispositivo e animação.

Quando estiver satisfeito com o design, clique em Salvar. Se o seu tema SeedProd já estiver ativado a partir do Método 1, a alteração estará ativa imediatamente.

Aqui está a galeria de produtos finalizada em ação, com um slider clicável e uma visualização em tela cheia no lightbox:

FAQ: Personalizando a página da loja WooCommerce

Você não precisa de um desenvolvedor ou de uma única linha de código para personalizar sua página da loja WooCommerce.

O SeedProd cuida do redesenho completo das suas páginas de loja e categorias, o editor do WordPress cobre ajustes rápidos de exibição, e renomear ou ocultar o título da loja leva alguns cliques.

Você pode começar a personalizar sua página da loja agora mesmo.

Você também pode gostar deste guia sobre como configurar o rastreamento de conversão do WooCommerce enquanto estiver aqui. Ou este sobre como criar uma página de carrinho WooCommerce personalizada.

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.

Stacey Corrin Especialista em Marketing de Conteúdo

Stacey Corrin é uma especialista certificada em marketing de conteúdo e SEO com mais de 15 anos de experiência escrevendo sobre WordPress, SEO e marketing digital. Ela gerencia o conteúdo para SeedProd e RafflePress, cobrindo ferramentas e estratégias que ela mesma usa e testa ativamente.

Ver Biografia Completa

WordPress SEO Marketing de Conteúdo Marketing Digital SaaS Redação publicitária Design de Sites