Quando tentei mudar a aparência das minhas páginas de categoria do WooCommerce, me deparei com um obstáculo. Eu queria mudar as coisas de lugar, adicionar algumas imagens e fazer com que o layout ficasse mais parecido com o resto do meu site, mas não havia uma maneira fácil de fazer isso.
O WooCommerce oferece um layout de página de categoria padrão, mas não foi criado para personalização. Não é possível arrastar blocos ou adicionar seu próprio estilo, a menos que você se sinta à vontade para editar arquivos de tema, o que não é o meu caso.
Neste guia, mostrarei como personalizar e editar uma página de categoria de produto no WooCommerce, desde o ajuste do layout até a criação do seu próprio modelo de categoria personalizado do WooCommerce, sem necessidade de código.
O que você aprenderá:
- Como criar um layout de categoria personalizado do WooCommerce
- Qual modelo editar para alterações específicas da categoria
- Dicas para adicionar banners, depoimentos e muito mais
- Duas maneiras de exibir categorias de produtos em sua página da loja
Por que personalizar as páginas de categoria de produto do WooCommerce?
Há vários motivos para personalizar suas páginas de categoria do WooCommerce:
- Aumentar as vendas: Cerca de 70% das vendas são provenientes de páginas de categorias, o que significa que elas contribuem diretamente para o sucesso de seus negócios. A criação de páginas de categorias personalizadas, adaptadas às necessidades dos compradores, pode levar a altas taxas de conversão.
- Melhorar o SEO: A otimização das páginas de categoria pode ajudar a aumentar sua classificação nos resultados de pesquisa. Como muitas lojas on-line têm um conteúdo mínimo nas páginas de categoria, essa é a oportunidade ideal para otimizar as categorias e subcategorias de produtos para as palavras-chave que seu público está pesquisando.
- Chamar a atenção: Os mecanismos de pesquisa geralmente levam os usuários às páginas de categorias de produtos mais do que às páginas de lojas, porque eles se concentram 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 finalizar a compra.
No final, a personalização das páginas de categorias de produtos no WooCommerce pode ajudá-lo a atender melhor os compradores, melhorar as classificações nos mecanismos de pesquisa 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 categorias de produtos no WooCommerce é bastante simples. Vá para Products " Categories (Produtos " Categorias ) no 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 dos produtos:
- Nome
- Slug da categoria
- Categoria dos pais
- Descrição
- Tipo de tela
- Miniatura
Depois de adicionar categorias à sua loja on-line, você estará 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 categorias de produtos 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 o design real. Se você quiser editar o layout da 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, layouts e páginas de destino personalizados do WordPress sem código.
Ele também é rápido, leve e oferece suporte total ao WooCommerce, permitindo que você crie lojas on-line inteiras com seu construtor fácil de arrastar e soltar.
Siga as etapas abaixo para criar páginas de categorias personalizadas com o SeedProd.
Etapa 1. Instalar e ativar o construtor de sites SeedProd
A primeira etapa é fazer o download do construtor de sites SeedProd.
Observação: há 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 plug-in em seu site do WordPress. Se precisar de ajuda com essa etapa, siga estas instruções sobre como instalar um plug-in do WordPress.
Depois de instalar e ativar o SeedProd, acesse SeedProd " Settings e cole sua chave de licença.
Você pode encontrar a chave de licença fazendo login no site do SeedProd e copiando-a da guia Downloads.
Clique no botão Verify Key e você estará pronto para configurar suas páginas de categoria personalizadas do WooCommerce.
Etapa 2. Criar um tema WooCommerce
O SeedProd é um construtor de páginas de categoria do WooCommerce flexível que permite criar um layout de categoria do WooCommerce totalmente personalizado de duas maneiras:
- Theme Builder - O Theme Builder substitui o tema atual e permite que você personalize cada parte do seu site com o editor visual.
- Landing Page Bu ilder - O Landing Page Builder permite que você mantenha seu tema atual e crie páginas de destino individuais que podem ser personalizadas 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 do 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 temas atuais do WordPress da SeedProd. Mais modelos são adicionados regularmente a essa lista, muitos dos quais são adaptados para lojas on-line.
Por exemplo, o tema Bicycle Shop seria adequado para lojas que vendem bicicletas e acessórios para ciclismo.
Para escolher um tema, passe o mouse sobre ele e clique no ícone de marca de seleção.
Depois de importar seu tema, o SeedProd criará todas as partes da demonstração do tema. Em nosso caso, ele inclui os seguintes modelos de tema:
- Arquivos de produtos: um arquivo completo de todos os produtos.
- Página do produto: um espaço para exibir detalhes sobre produtos individuais.
- Página da loja: uma página de vitrine personalizável.
- Página única: uma página individual para conteúdo, como suas informações sobre ou de contato.
- Blog Index, Archives, Search: uma página para mostrar as postagens do seu blog, os resultados da pesquisa e os arquivos das postagens.
- Página inicial: a página inicial de 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: geralmente nos referimos a partes individuais de um tema como "modelos".
Ao clicar em cada modelo de tema, ele será aberto no editor de arrastar e soltar do SeedProd, onde você poderá personalizar o conteúdo e o design.
Um modelo de tema essencial para este tutorial é o Product Archive. Quando os usuários clicam em uma categoria em sua loja, eles veem o Product Archive dessa categoria de produtos.
É esse modelo que você precisará abrir para personalizar suas páginas de categoria de produto do WooCommerce. Passe o mouse sobre o modelo e clique no link Edit Design para abri-lo no editor visual.
Etapa 3. Personalize seu modelo de página de categoria de produto
Ao abrir os modelos de arquivos de produtos, você verá um layout de duas colunas. À esquerda, há blocos e seções que podem ser adicionados à sua página. Em seguida, há uma visualização ao vivo de seu design à direita.
Já deve haver dois blocos em sua página:
- Título do arquivo
- Produtos de arquivo
O bloco Archive Title ajuda você a mostrar automaticamente o título correto para cada categoria. É uma maneira simples de personalizar o design da categoria de produto do WooCommerce sem editar os arquivos de modelo.
Por exemplo, se você clicar na categoria "bicicleta preta" em sua loja, a página que você verá terá o título: "Category: Black Bikes". O título será alterado automaticamente, dependendo da categoria em que você clicar.
Da mesma forma, o bloco Archive Products é uma das tags de modelo do WooCommerce do SeedProd. Esse bloco exibirá uma grade de produtos nessa categoria específica.
Para usar nosso exemplo anterior, se você clicar na categoria "black bike", verá uma grade de produtos que mostra apenas bicicletas pretas.
É fácil personalizar os dois blocos. Basta clicar em um dos blocos e ajustar o estilo no painel de configurações à esquerda.
Por exemplo, você pode alterar o tamanho, o alinhamento e o nível do cabeçalho do título do arquivo. Em seguida, na guia Advanced (Avançado), você pode ajustar as fontes, a cor, o espaçamento, as sombras e muito mais.
No painel de configurações Archive Products, você pode alterar as colunas, a paginação, a consulta, a contagem de itens e muito mais. Você também pode alterar o estilo na guia Advanced (Avançado).
Além disso, é muito 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 imagens e adicionar uma imagem de banner atraente. Em seguida, você pode vinculá-la a uma venda ou promoção 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 opção.
Neste exemplo, arrastamos o título do arquivo e os blocos de produtos para uma seção ampla e estreita de duas colunas. Em seguida, usamos o bloco Testimonials 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 Save (Salvar) no canto superior direito. Em seguida, você poderá personalizar o restante do tema do WooCommerce da mesma forma.
Etapa 4. Publique seu tema WooCommerce
Quando estiver pronto para ativar seu novo design, vá para a página SeedProd " Theme Builder . Em seguida, no canto superior direito, clique no botão Ativar tema do 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 em sua página de loja do WooCommerce
Agora que você sabe como personalizar as páginas de categorias de produtos no WooCommerce, veja como exibi-las na página da sua loja.
Exibir categorias de produtos na página da loja com o SeedProd
Se você quiser mostrar as categorias de produtos na página da loja do WooCommerce com o SeedProd, acesse SeedProd " Theme Builder e abra o modelo Shop Page.
A partir daí, abra as configurações do bloco Product Grid e altere o Query Type (Tipo de consulta) para Custom Query (Consulta personalizada). Sob o título Query Attribute (Atributo de consulta), clique em "Select by Category" (Selecionar por categoria). Em seguida, na caixa de categoria, clique nas categorias que você deseja mostrar na página.
Observação: Você pode selecionar várias categorias mantendo pressionada a tecla command no Mac ou ctrl no Windows.
Clique em Save (Salvar) para armazenar suas alterações.
Exibir categorias de produtos na página da loja com o WooCommerce
Para mostrar as categorias de produtos na página da sua loja com as configurações padrão do WooCommerce, acesse Appearance " Customize " WooCommerce " Product Catalog.
Em seguida, sob o título "Shop page display" (Exibição da página da loja), escolha a opção "show categories" (mostrar categorias).
Perguntas frequentes
Mais maneiras de personalizar o WooCommerce
A personalização das páginas de categorias de produtos é apenas uma das muitas maneiras de ajustar sua loja. Para obter mais personalizações do WooCommerce, consulte os seguintes guias:
- Como personalizar a guia Informações adicionais do WooCommerce
- Como adicionar o botão Exibir carrinho no WooCommerce
- Como alterar o título da página da loja no WooCommerce
- Como criar uma impressionante galeria de imagens de produtos no WooCommerce
- Como adicionar classificação por estrelas às páginas de produtos 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 problema de não funcionamento do WooCommerce View Cart
- Como ocultar produtos fora de estoque no WooCommerce
É isso aí!
Esperamos que este artigo tenha ajudado você a aprender como personalizar as páginas de categorias de produtos no WooCommerce.
Você também pode gostar deste guia sobre como acelerar sua loja WooCommerce.
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
