Como exibir categorias e tags de produtos no WooCommerce

Publicados: 2022-04-18

Quer aprender a exibir categorias de produtos no WooCommerce?

Mostrar categorias de produtos em sua loja WooCommerce ajuda a orientar os usuários para o que eles estão procurando facilmente. Ele também pode organizar sua loja, dando-lhe uma aparência mais amigável.

Este artigo mostrará como exibir categorias e tags de produtos no WooCommerce.

Como adicionar categorias e tags ao WooCommerce

Adicionar categorias e tags no WooCommerce é fácil. Você pode adicionar novas categorias e tags ao criar listagens de produtos ou no painel do WooCommerce.

Adicionando categoria de produto WooCommerce

Siga estas etapas para adicionar categorias ou subcategorias de produtos no WooCommerce:

Primeiro, vá para Produtos »Categorias na sua área de administração do WordPress. A partir daí, insira as informações da categoria do seu produto.

Add woocommerce product category

Você pode incluir:

  • Nome
  • lesma
  • Categoria Parental
  • Descrição
  • Tipo de exibição (produtos/subcategorias/ambos)
  • Miniatura

Clique no botão Adicionar nova categoria para adicionar a lista de categorias à sua lista.

Adicionando tags de produtos WooCommerce

Você pode seguir estas etapas para adicionar tags de produtos no WooCommerce:

Primeiro, vá para Produtos »Tags da sua área de administração do WordPress. Na próxima página, você pode inserir as seguintes informações de tag:

  • Nome
  • lesma
  • Descrição
Add woocommerce product tags

Clique no botão Adicionar nova tag para adicionar a tag à sua lista.

Como exibir categorias de produtos no WooCommerce

Depois de aprender como adicionar categorias e tags de produtos ao WooCommerce, como você os exibe em sua loja online? Siga os métodos abaixo para mostrar categorias e tags de produtos WooCommerce em diferentes seções da sua loja.

Índice
  1. Como adicionar categorias e tags ao WooCommerce
    • Adicionando categoria de produto WooCommerce
    • Adicionando tags de produtos WooCommerce
  2. Como exibir categorias de produtos no WooCommerce
    • Mostrar categorias de produtos na página inicial
    • Exibir categorias de produtos na página da loja com o SeedProd
    • Exibir categorias na página da loja com WooCommerce
    • Mostrar subcategorias do WooCommerce na página da loja
    • Mostrar categorias de produtos WooCommerce na barra lateral
    • Exibir categorias de produtos no menu

Mostrar categorias de produtos na página inicial

Primeiro, vamos ver como exibir a categoria de produtos em sua página inicial do WooCommerce. O WooCommerce não oferece uma maneira fácil de mostrar categorias de produtos em sua página inicial.

As opções atuais são:

  • Use um tema WordPress compatível com WooCommerce que inclua seções da página inicial do WooCommerce.
  • Edite seu tema e adicione o código de acesso das categorias de produtos WooCommerce.

Ambas as opções envolvem muito trabalho, por isso recomendamos o uso de um construtor de sites como o SeedProd para personalizar sua loja WooCommerce.

SeedProd WordPress website builder

SeedProd é o melhor construtor de sites para WordPress. Ele permite que você crie sites WooCommerce inteiros, páginas de destino e temas personalizados do WordPress sem código.

Você pode escolher entre centenas de modelos prontos e personalizá-los facilmente no construtor de páginas de arrastar e soltar. O SeedProd oferece muitos blocos e seções para adicionar conteúdo WooCommerce ao seu site com apenas alguns cliques.

Siga estas etapas para usar o SeedProd para adicionar categorias de produtos à sua página inicial.

Etapa 1. Instale e ative o SeedProd

Para começar, baixe o plugin SeedProd e instale-o e ative-o em seu site WordPress. Você pode seguir este guia sobre como instalar um plugin do WordPress se precisar de ajuda.

Observação: você precisará de um plano SeedProd Elite para acessar os recursos do WooCommerce.

Em seguida, vá para SeedProd » Configurações , insira sua chave de licença e clique em Verificar chave . Fazê-lo vai desbloquear os recursos do plano escolhido.

enter your license key

Você pode encontrar sua chave de licença na área da sua conta SeedProd na guia Downloads.

Find your SeedProd license key

Etapa 2. Crie um tema personalizado do WooCommerce

O próximo passo é criar um tema personalizado para o seu site WooCommerce. Isso permitirá que você personalize cada parte do seu site com o poderoso editor visual do SeedProd.

Para fazer isso, vá para SeedProd » Theme Builder e clique no botão Temas .

add a theme template

Você verá uma biblioteca de temas profissionais do WordPress nesta tela. Eles são uma excelente maneira de criar sites incríveis sem contratar um desenvolvedor, e você não precisará começar do zero.

Basta passar o mouse sobre um tema que você gosta e clicar no ícone de marca de seleção.

choose a woocommerce theme

O SeedProd criará automaticamente todos os modelos diferentes para o seu tema e os listará no painel do Theme Builder. A partir daí, você pode personalizar cada modelo no editor visual.

woocommerce theme templates

Etapa 3. Personalize sua página inicial do WooCommerce

Para exibir categorias em sua página inicial do WooCommerce, você precisará editar o modelo de página inicial. Encontre o modelo em sua lista e clique no link "Editar design" para abri-lo no construtor de páginas do SeedProd.

edit woocommerce homepage design

Personalizar sua página inicial com o SeedProd é super fácil. Há blocos e seções à esquerda e uma visualização ao vivo à direita.

Customize WooCommerce homepage

Adicionar um bloco de conteúdo à sua página é tão simples quanto arrastar e soltar. Você pode clicar em qualquer elemento para editar suas configurações de conteúdo e estilo.

Existem 2 maneiras de exibir categorias de produtos em sua página inicial com o SeedProd:

  1. Exibir produtos por categoria
  2. Adicione o widget de categoria de produto WooCommerce

Para usar a primeira solução, encontre o bloco Products Grid na seção WooCommerce blocks. Em seguida, arraste o bloco para uma seção ou linha em sua página inicial.

SeedProd products grid block

Clique na grade do produto para abrir o painel de configurações no lado esquerdo. Nesse painel, selecione "Consulta personalizada" no menu suspenso Tipo e ative a alternância "Selecionar por categoria".

how to display product category in woocommerce

Você pode escolher os produtos de qual categoria exibir na grade. Você pode selecionar várias categorias mantendo pressionado o botão shift.

Agora, apenas os produtos das categorias escolhidas serão exibidos em sua página inicial.

Você pode seguir etapas semelhantes para produzir apenas os produtos por tag. Basta alternar a opção “Selecionar por Tag” e escolher quais tags incluir nas opções.

WooCommerce display product tags

Você também pode usar widgets nativos do WooCommerce no editor visual do SeedPod, incluindo o widget de categorias de produtos.

Para fazer isso, vá para a seção do bloco Widgets e encontre o widget “Categorias de produtos”. Em seguida, arraste-o para o lugar no design da sua página inicial.

WooCommerce product categories widget

Clicar no widget permite:

  • Escolha um título de widget
  • Ordenar categorias por nome
  • Mostrar como lista suspensa
  • Mostrar contagens de produtos
  • Mostrar hierarquia
  • E mais
Product categories widget settings

Você também pode controlar as opções de estilo do widget na guia Avançado.

Etapa 4. Personalize o resto da sua loja WooCommerce

Agora você pode editar os outros modelos do seu tema WooCommerce.

Aqui estão alguns guias para ajudar:

  • Como personalizar seu cabeçalho do WordPress
  • Como criar um modelo de postagem único personalizado
  • Como criar uma página de checkout personalizada do WooCommerce
  • Como adicionar um carrinho de compras ao WordPress

Você também pode ler o restante deste artigo para saber como exibir categorias de produtos na barra lateral e no menu de navegação.

Etapa 5. Publique seu tema WooCommerce

Quando estiver satisfeito com a aparência do seu tema, vá para SeedProd » Theme Builder e, no canto superior direito, gire o botão Ativar tema do SeedProd para a posição “ativado”.

Enable seedprod theme

Agora você pode visualizar sua página inicial para ver como ela fica.

how to display product category in woocommerce homepage

Exibir categorias de produtos na página da loja com o SeedProd

Além da sua página inicial, você pode usar o SeedProd para exibir categorias na página da sua loja WooCommerce.

Para fazer isso, vá para SeedProd » Theme Builder e clique em Edit Design no template “Shop Page”.

edit woocommerce shop page

A página agora será aberta no editor visual, onde você pode personalizar o design da página da sua loja. Siga as etapas do método anterior para exibir seus produtos por categoria.

display woocommerce product category on shop page

Como alternativa, você pode criar uma grade separada para cada categoria de produto. Por exemplo, você pode ter uma grade para bebidas, uma para cuidados com o cabelo etc.

display product grid by category on woocommerce shop page

Você também pode usar o método anterior para exibir suas categorias de produtos em uma lista ou menu suspenso em sua página inicial.

Basta adicionar uma nova coluna à página da sua loja e arrastar o widget “Categorias de produtos”.

Product category widget woocommerce shop page

Aqui está um exemplo de como isso ficaria em tempo real:

Display woocommerce product categories on shop page

Exibir categorias na página da loja com WooCommerce

Alguns proprietários de sites podem não desejar criar um novo tema para exibir tags e categorias de produtos. Nesse caso, você pode usar as configurações padrão da loja do WooCommerce para gerar as categorias.

Vá para Aparência » Personalizar e clique em WooCommerce e categorias de produtos.

Sob o título “Exibição da página da loja”, selecione Mostrar categorias.

Show categories shop page woocommerce

Mostrar subcategorias do WooCommerce na página da loja

Você também pode usar as configurações padrão do WooCommerce para mostrar subcategorias na página da loja.

Para fazer isso, vá para Aparência » Personalizar » WooCommerce » Catálogo de produtos e, no título “Exibição de categoria”, selecione “Mostrar subcategorias” no menu suspenso.

Show subcategories shop page woocommerce

Lembre-se de clicar no botão Publicar para salvar suas alterações.

Mostrar categorias de produtos WooCommerce na barra lateral

Adicionar categorias de produtos à barra lateral do seu site é uma excelente maneira de ajudar os compradores a encontrar o que precisam rapidamente. Felizmente, o SeedProd permite adicionar barras laterais personalizadas ao WordPress facilmente.

Para personalizar uma barra lateral com o SeedProd e exibir suas categorias de produtos, vá para SeedProd » Theme Builder e abra o modelo Sidebar.

edit sidebar template

Você pode arrastar sobre o bloco Product Grid e personalizar as opções de exibição de consulta para mostrar produtos de uma categoria ou tag.

Show WooCommerce Product Categories in the Sidebar

Usamos 2 blocos Product Grid para exibir 2 categorias diferentes em nossa barra lateral de blog neste exemplo.

Show WooCommerce Product Categories in the Sidebar

Exibir categorias de produtos no menu

Adicionar categorias de produtos ao seu menu WooCommerce é tão fácil quanto. Vá para Aparência »Menus e clique na guia Opções de tela no canto superior direito.

WordPress menu screen options

Nesse painel, clique na caixa de seleção “Categorias de produtos”. Isso exibirá todas as suas categorias do WooCommerce na tela do menu.

Em seguida, abra a guia “Categorias de produtos”, selecione todas as categorias que deseja adicionar ao seu menu e clique no botão Adicionar ao menu .

Add product categories to WooCommerce navigation menu

Você pode então arrastá-los para alterar sua posição no menu. Por exemplo, você pode agrupá-los em sua Página de loja para mostrar um menu suspenso de categorias.

Re-order woocommerce menu items

Lembre-se de salvar seu menu antes de prosseguir.

Agora você pode visitar a página inicial do seu site e ver as categorias de produtos no menu de navegação do WooCommerce.

Display product categories in woocommerce menu

Aí está!

Esperamos que este artigo tenha ajudado você a aprender como exibir categorias de produtos no WooCommerce, exibir tags de produtos e personalizar suas páginas de produtos.

Se você ainda está trabalhando em seu site, você pode gostar deste guia sobre como adicionar uma página em breve ao WooCommerce.

Obrigado por ler. Siga-nos no YouTube, Twitter e Facebook para obter mais conteúdo útil para expandir seus negócios.