Como exibir produtos por categoria no WooCommerce de forma simples

Muitos donos de loja virtual gastam horas procurando um jeito de organizar os produtos por categoria no WooCommerce sem precisar de plugins pesados ou mexer no código do tema. Quando a página de loja mostra tudo misturado, o cliente perde tempo procurando o que quer e acaba desistindo antes de fechar a compra. A boa notícia é que o WooCommerce já traz recursos nativos para filtrar e exibir os produtos por categoria de forma clara, usando apenas as opções de exibição da própria plataforma. Uma agência de marketing digital pode ajudar a configurar essa estrutura para que a navegação fique intuitiva e aumente as chances de conversão, sem complicar o dia a dia de quem gerencia a loja.

Como identificar as categorias de produtos no WooCommerce

Para saber quais categorias existem no WooCommerce, basta olhar no painel do WordPress. No menu lateral, vá até Produtos e depois Categorias. Lá você vê a lista completa, com o nome de cada uma, a quantidade de produtos vinculados e a descrição, se houver. É o ponto de partida para qualquer ajuste de exibição. Se quiser ver como cada categoria aparece na loja, clique no link "Ver" ao lado do nome. Isso abre a página da categoria no frontend, mostrando exatamente o layout que o cliente vê. Anote o slug, que é o trecho da URL depois de /product-category/. Esse slug é útil quando você vai criar links diretos ou usar códigos personalizados. Outra forma de checar é indo em Produtos e abrindo qualquer item. Na edição do produto, no bloco de categorias à direita, estão marcadas as opções que ele pertence. Se um produto estiver em mais de uma categoria, todas ficam destacadas ali. Isso ajuda a identificar sobreposições ou categorias que talvez não estejam sendo usadas. Para quem trabalha com muitos produtos, a tela de categorias tem um campo de busca no topo. Digite parte do nome e filtre rapidamente. Também é possível ordenar por nome, contagem ou ID, clicando no cabeçalho da coluna. Isso traz mais controle quando a lista cresce. Se precisar exportar essa lista para análise externa, vá até Ferramentas, depois Exportar. Escolha o tipo "Categorias" e baixe o arquivo CSV. Ele contém nome, slug, descrição e contagem, pronto para ser aberto em planilha. Use isso para mapear lacunas ou renomear com consistência. No dia a dia de quem gerencia a loja, saber onde estão as categorias evita perda de tempo. Em vez de adivinhar onde um produto aparece, você confirma direto no painel. Isso também facilita o trabalho da agência, que pode alinhar ajustes de layout ou filtros com a estrutura real já existente. A clareza nesse primeiro passo evita retrabalho depois.

Como criar uma página personalizada para cada categoria

Para criar uma página personalizada para cada categoria no WooCommerce, comece identificando o slug da categoria que deseja destacar. Esse slug é o identificador amigável que aparece na URL, como "camisetas" ou "acessorios". Acesse o painel do WordPress, vá em Produtos > Categorias e copie o slug exatamente como está, sem espaços ou caracteres especiais. Depois, crie um novo arquivo no tema ativo do seu site, dentro da pasta woocommerce. Nomeie o arquivo usando o padrão taxonomy-product_cat-{slug}.php, substituindo {slug} pelo identificador da categoria. Por exemplo, para a categoria "camisetas", o arquivo seria taxonomy-product_cat-camisetas.php. Esse arquivo substitui o layout padrão da categoria apenas quando essa específica for acessada. Dentro desse arquivo, você pode personalizar o que será exibido: título da categoria, descrição, quantidade de produtos, ordem de aparecimento ou até mesmo um banner exclusivo. Use as funções do WooCommerce como woocommerce_page_title() ou term_description() para puxar dados dinamicamente. Isso permite que cada categoria tenha uma identidade visual e informativa única, sem precisar de plugins adicionais.

• Verifique se o tema suporta sobrescrita de templates do WooCommerce
• Teste a página em modo de navegação anônima para ver como o cliente enxerga
• Mantenha o código limpo e evite modificar arquivos do núcleo do plugin
• Atualize o tema filho, se estiver usando, para não perder mudanças em atualizações
• Consulte a documentação do WooCommerce sobre estrutura de templates para casos avançados

Após salvar o arquivo, acesse a categoria diretamente na loja virtual para confirmar se o novo layout está funcionando. Se nada mudar, limpe o cache do site e verifique se o nome do arquivo está exatamente conforme o padrão exigido. Qualquer erro de digitação no slug ou no nome do arquivo fará com que o WooCommerce ignore a personalização e use o template genérico. Essa abordagem dá controle total sobre como cada categoria se apresenta, alinhando a experiência do cliente com a estratégia de merchandising da loja.

Como usar o bloco de produtos por categoria no editor de blocos

No editor de blocos do WordPress, o WooCommerce oferece um bloco específico para exibir produtos por categoria. Ele permite que você selecione uma ou mais categorias e mostre os produtos vinculados a elas diretamente na página, sem precisar de código ou plugins adicionais. Esse bloco é útil quando você quer destacar uma linha de produtos em uma página personalizada, como uma landing page ou uma seção de destaque na home. Para usar o bloco, basta editar a página desejada no modo de edição de blocos, clicar no sinal de “+” para adicionar um novo bloco e buscar por “Produtos por categoria”. Após selecioná-lo, aparecerá um campo onde você pode digitar o nome da categoria ou escolher na lista suspensa. É possível selecionar mais de uma categoria de cada vez, o que permite agrupar produtos de linhas relacionadas, como “camisetas” e “blusas” em uma mesma vitrine. O bloco também oferece opções de personalização básica, como escolher o número de produtos a exibir, ativar ou desativar a mostra de preço e botão de compra, e definir a quantidade de colunas na grade. Esses ajustes são feitos diretamente na barra lateral do bloco, sem precisar acessar as configurações globais do WooCommerce. Ele respeita o estilo do tema ativo, mas permite sobrescrever alguns elementos se o tema oferecer suporte a estilos de bloco.

Depois de configurado, o bloco se atualiza automaticamente sempre que você adicionar ou remover produtos das categorias selecionadas. Isso reduz a manutenção da página, já que não é preciso editar o conteúdo manualmente toda vez que o estoque muda. Para quem gerencia uma loja com muitas categorias, usar esse bloco em páginas estratégicas ajuda a guiar o cliente diretamente para os produtos relevantes, melhorando a experiência de navegação sem depender de desenvolvimento sob medida. A agência pode ajudar a posicionar esses blocos em pontos de alta visibilidade, alinhando a apresentação com os objetivos de campanha ou sazonalidade.

Vale lembrar que cada ajuste desses conversa com os outros: plataforma, frete, anúncio e pós-venda fazem parte da mesma engrenagem. É assim que a Agência D'avila trata um e-commerce, e não como peças soltas contratadas separado.

Como exibir produtos por categoria com shortcode simples

Um shortcode simples já resolve a necessidade de mostrar produtos de uma categoria específica em qualquer página ou post do site. Ele é útil quando o gestor quer inserir essa lista em um banner, entre textos ou em um rodapé, sem depender de blocos ou modelos prontos. O código padrão do WooCommerce para isso é [product_category category="slug-da-categoria"], onde o slug é o identificador amigável da categoria, como "camisetas" ou "acessorios". Esse slug pode ser encontrado na lista de categorias, na coluna correspondente ao passar o mouse sobre o nome ou ao editar a categoria. Para usar, basta copiar o shortcode e colar no editor clássico ou em um bloco de shortcode no editor de blocos. Se a página já estiver usando o editor de blocos, basta adicionar um bloco chamado "Shortcode" e colar o texto dentro dele. O WooCommerce processa o código e exibe os produtos daquela categoria, usando o modelo padrão de loja, com imagem, nome, preço e botão de adicionar ao carrinho. Não é preciso instalar plugin adicional nem tocar em arquivos do tema, desde que o tema seja compatível com o WooCommerce. É possível ajustar o comportamento adicionando atributos ao shortcode. Por exemplo, [product_category category="camisetas" columns="3" limit="6"] mostra até seis produtos em três colunas. O atributo "columns" define quantas colunas aparecem na linha, enquanto "limit" controla o número máximo de produtos exibidos. Se não houver produtos na categoria, o shortcode retorna uma mensagem vazia ou avisa que nenhum produto foi encontrado, dependendo da configuração da loja. Essa abordagem é prática para quem precisa de controle pontual sobre onde e como os produtos aparecem, sem criar páginas inteiras ou alterar menus. É especialmente útil em landing pages, posts de blog relacionados ou seções personalizadas da homepage. A agência pode ajudar a testar diferentes combinações de atributos, validar o funcionamento em diversos dispositivos e garantir que a apresentação siga o visual da loja, mantendo a experiência do cliente consistente. Assim, o dono da loja ganha agilidade para ajustar vitrines conforme campanhas, sazonalidades ou testes de conversão, sem depender de desenvolvedores para cada mudança pequena.

Como ajustar a quantidade de produtos mostrados por categoria

Para ajustar a quantidade de produtos mostrados por categoria no WooCommerce, você pode usar o filtro loop_shop_per_page no arquivo functions.php do seu tema filho. Esse filtro controla quantos produtos aparecem em cada página de loop, incluindo as páginas de categoria. Basta adicionar um trecho de código como este:

add_filter( 'loop_shop_per_page', function( $cols ) {
if ( is_product_category() ) {
return 12; // mostra 12 produtos por página nas categorias
}
return $cols; // mantém o padrão em outras páginas
} );

Esse código verifica se a página atual é uma categoria de produto. Se for, define a quantidade em 12. Caso contrário, deixa o valor padrão do WooCommerce (geralmente 16). Você pode trocar o número 12 por qualquer outro que faça sentido para o seu layout, 8, 9, 16, 20, desde que leve em conta quantos produtos cabem bem na linha do seu tema. Outra opção é usar o personalizador do WordPress. Vá em Aparência > Personalizar > WooCommerce > Catálogo de produtos. Lá, você encontra a opção “Produtos por página”. Porém, essa configuração é global: afeta todas as lojas, incluindo categorias, tags e resultados de busca. Se quiser algo diferente apenas para categorias, o filtro no functions.php é mais preciso. Se você não quiser tocar em código, alguns temas premium já incluem essa opção no próprio painel de tema, geralmente em WooCommerce > Configurações de layout. Vale verificar se o seu tema oferece isso antes de partir para o functions.php. Lembre-se de sempre usar um tema filho ao editar o functions.php. Assim, suas customizações não se perdem quando o tema for atualizado. Teste depois em uma categoria real: abra a página, veja se o número de produtos bate com o que você definiu e se a paginação continua funcionando normalmente. Se aparecer erro, remova o código e verifique a sintaxe. Um ponto e vírgula fora do lugar já basta para quebrar o site.

Como ordenar os produtos dentro de cada categoria

Para organizar os itens dentro de cada categoria, o WooCommerce oferece opções nativas que evitam a necessidade de plugins adicionais. A ordem padrão segue a data de publicação, do mais recente para o mais antigo, mas isso pode ser alterado diretamente nas configurações do produto ou por meio de ajustes simples no tema. Antes de aplicar qualquer mudança, vale verificar se o tema em uso respeita as configurações de ordem do WooCommerce. Alguns temas substituem essa lógica por critérios próprios, como popularidade ou avaliação, o que pode mascarar as alterações feitas. Testar em uma categoria com poucos produtos ajuda a confirmar se a ordem está sendo aplicada corretamente.

• Ordenar por data de publicação (padrão do WooCommerce)
• Ordenar por título em ordem alfabética
• Ordenar por preço, do menor para o maior
• Ordenar por popularidade, baseada nas vendas
• Ordenar por classificação média dos clientes
• Ordenar manualmente, arrastando os produtos na lista

Após escolher a ordem desejada, ela se aplica automaticamente sempre que a categoria for exibida, seja por bloco, shortcode ou página personalizada. Essa configuração fica salva por categoria, permitindo que cada uma tenha sua própria lógica de apresentação. Para lojas com muitos itens, a ordenação manual exige mais trabalho, mas garante controle total sobre a vitrine. Já as opções automáticas são úteis quando o objetivo é destacar novidades, promoções ou produtos mais bem avaliados sem intervenção constante. A agência pode ajudar a definir qual ordem faz mais sentido para cada tipo de categoria, alinhando a apresentação ao comportamento do cliente e aos objetivos de venda.

Como aplicar estilo visual aos produtos por categoria com CSS básico

Para dar identidade visual aos produtos exibidos por categoria no WooCommerce, basta usar CSS básico diretamente no painel do WordPress. Comece acessando Aparência > Personalizar > CSS adicional. Lá, você pode criar regras que afetam apenas os blocos ou shortcodes que listam produtos por categoria. Se estiver usando o bloco nativo de produtos por categoria, ele gera uma estrutura HTML com classes previsíveis. O contêiner costuma ter a classe wc-block-products-by-category. Dentro dele, cada produto aparece em um <li> com a classe wc-block-product. Você pode, por exemplo, aumentar o espaçamento entre os itens com margin-bottom nesse seletor. Para destacar o título da categoria acima dos produtos, o bloco geralmente envolve o nome em um <h2> com a classe wc-block-products-by-category__heading. Aí basta definir tamanho de fonte e cor para deixar o título mais visível e alinhado com a identidade da loja. Se preferir usar o shortcode [products category="camisetas" limit="6" columns="3"], o WooCommerce envolve a saída em uma <ul> com as classes products e columns-3. Nesse caso, você pode ajustar o tamanho das imagens e garantir que os preços fiquem em negrito usando seletores específicos. Outro ajuste comum é remover o efeito de hover padrão das imagens, caso ele conflite com o tema. Basta acrescentar uma regra que mantenha a opacidade constante para manter a imagem sempre visível. Lembre-se de usar o inspetor do navegador (clique direito > Inspecionar) para confirmar as classes exatas geradas pelo seu tema ou plugins. Alguns temas adicionam prefixos ou modificam a estrutura, então validar no front evita surpresas. Uma agência de marketing digital ajuda nesse momento ao testar como essas mudanças afetam a experiência do usuário em dispositivos diferentes, garantindo que o estilo não quebre em telas pequenas e que a carga visual mantenha o foco na conversão, não apenas na estética. Ela também pode documentar esses ajustes para que a equipe interna consiga reproduzi-los em novas categorias sem depender de desenvolvedores a cada vez.