Quando tentei mudar a aparência das minhas páginas de categoria do WooCommerce, esbarrei em um obstáculo. Eu queria mover elementos, adicionar algumas imagens e fazer o layout parecer mais com o resto do meu site, mas não havia uma maneira fácil de fazer isso.
O WooCommerce oferece um layout padrão para páginas de categoria, mas ele não é feito para personalização. Você não pode simplesmente arrastar e soltar blocos ou adicionar seu próprio estilo, a menos que se sinta confortável editando arquivos de tema, e eu não me sinto.
Neste guia, mostrarei como personalizar e editar uma página de categoria de produto no WooCommerce, desde ajustar o layout até criar seu próprio modelo personalizado de categoria WooCommerce, sem necessidade de código.
O que você aprenderá:
- Como criar um layout personalizado de categoria WooCommerce
- Qual modelo editar para alterações específicas de categoria
- Dicas para adicionar banners, depoimentos e mais
- Duas maneiras de exibir categorias de produtos na sua página da loja
Por que Personalizar Páginas de Categoria de Produto no WooCommerce?
Existem várias razões para personalizar suas páginas de categoria do WooCommerce:
- Aumentar Vendas: Cerca de 70% das vendas vêm de páginas de categoria, o que significa que elas contribuem diretamente para o sucesso do seu negócio. Criar páginas de categoria personalizadas, adaptadas às necessidades dos compradores, pode levar a altas taxas de conversão.
- Melhorar o SEO: Otimizar páginas de categoria pode ajudar a melhorar seu ranking nos resultados de busca. Como muitas lojas online têm conteúdo mínimo em suas páginas de categoria, é uma oportunidade ideal para otimizar categorias de produtos e subcategorias para as palavras-chave que seu público está procurando.
- Chamar a Atenção: Os motores de busca frequentemente levam os usuários às páginas de categoria de produtos mais do que às páginas da loja, pois elas focam em resultados específicos. Você pode personalizar essas páginas com conteúdo gerado pelo usuário, melhores imagens de produtos e avaliações para chamar a atenção e convencer os compradores a conferir.
No final, personalizar páginas de categoria de produto no WooCommerce pode ajudá-lo a atender melhor os compradores, melhorar os rankings nos motores de busca e aumentar suas vendas.
Antes de mostrarmos como personalizar suas páginas de categoria, vamos ver como adicioná-las à sua loja WooCommerce.
Como Adicionar Categorias de Produtos no WooCommerce
Adicionar páginas de categoria de produto no WooCommerce é bastante simples. Vá para Produtos » Categorias no seu painel do WordPress, e você verá vários campos de entrada.
Você pode adicionar quantas categorias quiser, mas lembre-se de inserir as seguintes informações para facilitar a exibição dos dados da categoria nas páginas de produto:
- Nome
- Slug da categoria
- Categoria pai
- Descrição
- Tipo de exibição
- Miniatura
Após adicionar categorias à sua loja online, você está pronto para criar e personalizar suas páginas de categoria.
Primeiro, mostraremos como criar uma página de categoria de produto personalizada no WooCommerce usando o SeedProd. Depois, compartilharemos várias maneiras de exibir categorias de produtos no WooCommerce.
Como Personalizar e Editar Páginas de Categoria de Produto no WooCommerce
Embora o WooCommerce ofereça várias maneiras de exibir páginas de categoria, ele não oferece muito controle sobre o layout ou design real. Se você deseja editar o layout da sua página de categoria de produto no WooCommerce, minha principal sugestão é usar um construtor visual como o SeedProd.
O SeedProd é o melhor construtor de sites para WordPress. Com mais de 1 milhão de instalações ativas, é a maneira mais fácil de criar temas personalizados para WordPress, layouts e páginas de destino sem código.
Ele também é rápido, leve e suporta totalmente o WooCommerce, permitindo que você crie lojas online inteiras com seu fácil construtor de arrastar e soltar.
Siga as etapas abaixo para criar páginas de categoria personalizadas com o SeedProd.
Etapa 1. Instale e Ative o Construtor de Sites SeedProd
O primeiro passo é baixar o construtor de sites SeedProd.
Observação: Existe uma versão gratuita do SeedProd disponível, mas usaremos o plano SeedProd Elite para os recursos do WooCommerce.
Em seguida, instale e ative o arquivo .zip do plugin no seu site WordPress. Se precisar de ajuda com esta etapa, você pode seguir estas instruções sobre como instalar um plugin do WordPress.
Após instalar e ativar o SeedProd, vá para SeedProd » Configurações e cole sua chave de licença.
Você pode encontrar sua chave de licença fazendo login no site do SeedProd e copiando-a da guia Downloads.
Clique no botão Verificar Chave; então você estará pronto para configurar suas páginas de categoria personalizadas do WooCommerce.
Etapa 2. Crie um Tema WooCommerce
O SeedProd é um construtor flexível de páginas de categoria do WooCommerce que permite criar um layout de categoria do WooCommerce totalmente personalizado de duas maneiras:
- Theme Builder – O Theme Builder substitui seu tema atual e permite personalizar todas as partes do seu site com seu editor visual.
- Landing Page Builder – O Landing Page Builder permite que você mantenha seu tema atual e crie páginas de destino individuais que você pode personalizar com o editor de arrastar e soltar.
Usaremos a opção Theme Builder para criar todas as páginas automaticamente para uma loja WooCommerce.
Para configurar seu tema WooCommerce, vá para SeedProd » Theme Builder.
Normalmente, você verá uma lista dos modelos que compõem seu tema nesta página. Por enquanto, você verá apenas o modelo Global CSS.
A grande vantagem do SeedProd é que ele vem com mais de 150 páginas de destino e modelos de tema responsivos para dispositivos móveis. Dessa forma, você não precisará começar do zero com o design do seu site WooCommerce.
Clique no botão Temas para ver uma lista dos modelos de tema WordPress atuais do SeedProd. Mais modelos são adicionados regularmente a esta lista, muitos dos quais são voltados para lojas online.
Por exemplo, o tema Bicycle Shop seria adequado para lojas que vendem bicicletas e acessórios de ciclismo.
Para escolher um tema, passe o mouse sobre ele e clique no ícone de checkmark.
Após importar seu tema, o SeedProd criará todas as partes da demonstração do tema. No nosso caso, ele inclui os seguintes modelos de tema:
- Arquivos de Produto: um arquivo completo de todos os produtos.
- Página de Loja: um espaço para exibir detalhes sobre produtos individuais.
- Página da Loja: uma vitrine personalizável.
- Página Única: uma página individual para conteúdo, como informações sobre você ou de contato.
- Índice do Blog, Arquivos, Pesquisa: uma página para mostrar suas postagens do blog, resultados de pesquisa e arquivos de postagens.
- Página Inicial: a página principal do seu site.
- Barra Lateral: uma área pronta para widgets que você pode personalizar.
- Rodapé: um local para links personalizados, conteúdo e informações de direitos autorais.
- Cabeçalho: um espaço para seu logotipo e menus de navegação.
Observação: Frequentemente nos referimos a partes individuais de um tema como “templates”.
Clicar em cada template de tema o abrirá no editor de arrastar e soltar do SeedProd, onde você pode personalizar o conteúdo e o design.
Um template de tema crucial para este tutorial é o Arquivo de Produto. Quando os usuários clicarem em uma categoria em sua loja, eles verão o Arquivo de Produto para essa categoria de produtos.
É esse template que você precisará abrir para personalizar suas páginas de categoria de produtos WooCommerce. Passe o mouse sobre o template e clique no link Editar Design para abri-lo no editor visual.
Etapa 3. Personalize seu Template de Página de Categoria de Produto
Ao abrir os templates de arquivo de produto, você verá um layout de 2 colunas. À esquerda estão os blocos e seções que você pode adicionar à sua página. Em seguida, há uma pré-visualização ao vivo do seu design à direita.
Já deve haver 2 blocos em sua página:
- Título do Arquivo
- Produtos do Arquivo
O bloco Título do Arquivo ajuda você a mostrar o título correto para cada categoria automaticamente. É uma maneira simples de personalizar o design da sua categoria de produtos WooCommerce sem editar arquivos de template.
Por exemplo, se você clicar na categoria “bicicleta preta” em sua loja, a página que você verá terá o título: “Categoria: Bicicletas Pretas”. O título mudará automaticamente dependendo da categoria que você clicar.
Da mesma forma, o bloco Produtos do Arquivo é uma das Tags de Template WooCommerce do SeedProd. Este bloco exibirá uma grade de produtos dessa categoria específica.
Para usar nosso exemplo anterior, se você clicar na categoria “bicicleta preta”, verá uma grade de produtos que exibe apenas bicicletas pretas.
Personalizar ambos os blocos é fácil. Simplesmente clique em qualquer um dos blocos e ajuste a estilização no painel de configurações à esquerda.
Por exemplo, você pode alterar o tamanho, alinhamento e nível de título do título do arquivo. Em seguida, na aba Avançado, você pode ajustar as fontes, cores, espaçamento, sombras e muito mais.
No painel de configurações de Produtos do Arquivo, você pode alterar as colunas, paginação, consulta, contagem de itens e muito mais. Você também pode alterar a estilização na aba Avançado.
Além disso, é super fácil alterar todo o layout da sua página de categoria de produto com qualquer um dos blocos e seções do SeedProd.
Por exemplo, você pode arrastar o bloco de imagem e adicionar uma imagem de banner atraente. Em seguida, você pode vinculá-la a uma promoção ou oferta que esteja realizando no momento.
Você também pode adicionar depoimentos de clientes anteriores para convencer os compradores de que seus produtos são a melhor escolha.
Neste exemplo, arrastamos os blocos de título do arquivo e de produtos para uma seção de 2 colunas, uma larga e outra estreita. Em seguida, usamos o bloco de Depoimentos na coluna menor.
As possibilidades são praticamente infinitas.
Quando estiver satisfeito com sua página de categoria, lembre-se de clicar no botão Salvar no canto superior direito. Em seguida, você pode personalizar o restante do seu tema WooCommerce da mesma maneira.
Etapa 4. Publicar seu tema WooCommerce
Quando estiver pronto para publicar seu novo design, acesse a página SeedProd » Theme Builder. Em seguida, no canto superior direito, clique no alternador Ativar Tema SeedProd até que ele esteja na posição "ligado".
Agora você pode visualizar qualquer página de categoria de produto para ver suas personalizações.
Como Exibir Categorias de Produtos na Página da Sua Loja WooCommerce
Agora que você sabe como personalizar páginas de categorias de produtos no WooCommerce, veja como exibi-las na sua página da loja.
Exibir Categorias de Produtos na Página da Loja com SeedProd
Se você deseja exibir categorias de produtos na sua página da loja WooCommerce com SeedProd, vá para SeedProd » Theme Builder e abra o modelo da Página da Loja.
A partir daí, abra as configurações do bloco Grade de Produtos e altere o Tipo de Consulta para Consulta Personalizada. Em "Atributo de Consulta", clique em "Selecionar por Categoria". Em seguida, na caixa de categoria, clique nas categorias que você deseja exibir na página.
Observação: Você pode selecionar várias categorias pressionando o comando no Mac ou Ctrl no Windows.
Clique em Salvar para armazenar suas alterações.
Exibir Categorias de Produtos na Página da Loja com WooCommerce
Para exibir categorias de produtos na sua página da loja com as configurações padrão do WooCommerce, vá para Aparência » Personalizar » WooCommerce » Catálogo de Produtos.
Em seguida, em "Exibição da página da loja", escolha a opção "mostrar categorias".
Perguntas Frequentes
Mais Maneiras de Personalizar o WooCommerce
Personalizar páginas de categorias de produtos é apenas uma das muitas maneiras de ajustar sua loja. Para mais personalizações do WooCommerce, consulte os seguintes guias:
- Como Personalizar a Aba Informações Adicionais do WooCommerce
- Como Adicionar o Botão Ver Carrinho no WooCommerce
- Como Alterar o Título da Página da Loja no WooCommerce
- Como Criar uma Galeria de Imagens de Produtos Deslumbrante no WooCommerce
- Como Adicionar Avaliação por Estrelas às Páginas de Produto do WooCommerce
- Como Exibir Produtos Relacionados no WooCommerce
- Como Exibir Categorias e Tags de Produtos no WooCommerce
- Como Obter e Exibir Descrições de Produtos no WooCommerce
- Como Exibir Produtos em Destaque no WooCommerce
- Como Corrigir o Erro de Carrinho de Compras do WooCommerce Não Funciona
- Como Ocultar Produtos Fora de Estoque no WooCommerce
É isso!
Esperamos que este artigo tenha ajudado você a aprender como personalizar páginas de categorias de produtos no WooCommerce.
Você também pode gostar deste guia sobre como acelerar sua loja 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.
