Articles

Como criar uma página personalizada da categoria WooCommerce

Você está procurando uma alternativa para o design padrão da página da categoria WooCommerce no seu tema WordPress? Criar um design personalizado para as suas categorias de produtos WooCommerce permite-lhe oferecer uma experiência de compra optimizada, que pode ter um efeito positivo no resultado final da sua loja.

Com o plugin certo, criar o seu próprio layout de página de categoria WooCommerce personalizado também não tem de ser difícil. É isso que lhe vamos mostrar neste post. Vamos cobrir como criar um layout personalizado baseado em tabelas para suas categorias de WooCommerce. Isto coloca-o no controlo sobre exactamente que informação é apresentada e como os compradores irão interagir com os seus produtos.

Aqui está um exemplo do que irá construir neste post:

A WooCommerce category page with a table layout

Comecemos com alguns dos benefícios desta abordagem de tabela. Depois, vamos entrar num guia passo a passo sobre como fazê-lo na sua própria loja WooCommerce com o plugin WooCommerce Product Table.

Os benefícios de usar um layout de tabela para suas páginas de categoria

Embora o design exato do layout da página de categoria da sua loja de eCommerce dependa do seu tema WordPress, a maioria dos designs de página de categoria dos temas parecem algo assim:

How most themes handle archive pages

Esse layout é bom para algumas situações, mas limita o número de produtos que você pode exibir. Também restringe quanta informação você pode fornecer sobre cada produto (embora adicionar botões de visualização rápida do produto seja uma forma de mitigar isso).

Woo Multistore escreveu sobre a importância de projetar a página da categoria WooCommerce de uma forma que impulsione as conversões. Um layout de tabela ajuda a superar as deficiências, exibindo mais produtos e informações em um layout compacto que acaba usando menos espaço, além de adicionar recursos extras de navegação, como busca e filtragem.

Isso significa que você pode obter mais detalhes de seus produtos/produtos na frente dos olhos dos compradores, o que garante que eles possam ver todo o seu catálogo e aumenta a sua chance de fazer uma compra.

Você também verá benefícios de SEO com os mecanismos de busca, pois você pode exibir mais conteúdo personalizado em uma página totalmente personalizada (ou páginas de destino também). Isto permite-lhe mostrar produtos que são relevantes, e depois adicionar texto contextual também. Tudo isto deve ser recompensado com rankings mais elevados.

Embora este tipo de layout possa beneficiar todos os tipos de loja de eCommerce, é especialmente útil para:

  • Lojas de venda por grosso
  • Arquivos digitais (vídeos, arquivos de áudio, ebooks, etc.)
  • Restaurantes
  • Catálogos de produtos
  • …muito mais!

Como criar uma página personalizada da categoria WooCommerce com a Tabela de Produtos WooCommerce

Outro benefício de usar um layout de tabela para o design da sua página da categoria WooCommerce é que você pode configurar tudo sem precisar de nenhum conhecimento técnico especial.

Para fazer isso, você vai usar o plugin da Tabela de Produtos WooCommerce. Este plugin lista seus produtos WooCommerce em um layout de tabela flexível que você controla, juntamente com a habilidade de adicionar filtros, caixas de busca, paginação e mais.

Você também pode usar o plugin para exibir apenas produtos de categorias ou subcategorias específicas. WooCommerce Tabela de Produtos oferece duas formas de fazer isso:

  1. Você pode habilitar centralmente o layout da tabela de produtos em todas as páginas de categorias de produtos. (Ideal se você quiser personalizar todas as suas páginas de categoria de produtos.)
  2. Alternativamente, você pode usar um atalho para criar manualmente suas próprias páginas de categoria do WooCommerce. (Por exemplo, se você quiser usar a tabela para listar produtos de categorias específicas apenas.)

Below, vamos mostrar-lhe como configurar a Tabela de Produtos do WooCommerce para conseguir ambas as opções.

Configurar a Tabela de Produtos do WooCommerce

Após ter instalado e ativado o plugin da Tabela de Produtos do WooCommerce, você vai querer configurar suas configurações padrão.

Isso permite controlar quais informações são exibidas em sua tabela de produtos e como tudo funciona, como exibir ou não certos atributos do produto ou como a funcionalidade adicionar ao carrinho funcionará.

Para começar, vá para WooCommerce → Settings → Products → Product tables to access the category plugin’s settings.

Vale a pena usar todas as configurações disponíveis e escolher aquelas que se ajustam à sua situação única. No entanto, vamos apenas cobrir o básico que é essencial para projetar sua página de categoria do WooCommerce.

Primeiro, encontre a configuração das colunas na seção Conteúdo da tabela. Aqui é onde você vai controlar quais informações aparecem na sua tabela. Além de exibir informações centrais do produto, você também pode exibir atributos do produto, campos personalizados e mais.

Você pode encontrar uma lista completa de opções de coluna aqui, mas esta configuração é uma boa versão básica que funcionará para a maioria das lojas:

image, name, description, price, buy

Configuring WooCommerce Product Table columns

Outras descidas, você encontrará a seção Adicionar ao carrinho de compras, que lhe permite controlar os botões de adicionar ao carrinho.

Para atrair compras a granel, você pode adicionar caixas de seleção que permitem aos compradores adicionar vários produtos a seus carrinhos de compras a granel. Ou, você também pode apenas adicionar um botão separado para adicionar ao carrinho de cada produto (ou ambos!):

Configuring WooCommerce Product Table add to cart

Após terminar, certifique-se de salvar suas alterações.

Após configurar as configurações do produto, você tem duas formas de criar suas categorias reais de WooCommerce. Vamos ver estas a seguir.

2a. Activar tabelas de produtos em todas as páginas de categoria

WooCommerce Product Table vem com uma opção para adicionar automaticamente o layout da tabela de produtos a todas as páginas de categoria. Esta é a opção mais fácil, e leva apenas um segundo para configurar.

Na página de configurações do plugin, simplesmente marque a caixa ‘Arquivos de categorias de produtos’:

WooCommerce add product table to shop and category pages

Esta opção irá habilitar globalmente o layout da tabela para todas as categorias, substituindo o layout padrão que veio com seu tema.

Saiba mais sobre este método.

2b. Use um atalho para criar a sua própria página de categoria do WooCommerce

Pode também usar um atalho para listar os produtos do WooCommerce por categoria. Esta opção é perfeita se você não quiser usar o layout da tabela de produtos em TODAS as suas categorias.

Simplesmente adicione o atalho do plugin a uma página regular do WordPress, e especifique de quais categorias você quer listar os produtos. Repita o processo quantas vezes quiser – uma vez para cada categoria.

Com este método, você está essencialmente criando uma nova página de categoria de produtos WooCommerce para cada categoria de produtos que você quer exibir, ao invés de redesenhar a página de categoria do WooCommerce globalmente.

Você pode continuar usando suas páginas de categoria existentes em conjunto com o layout da sua nova tabela. Ou, você pode simplesmente substituir os links para cada página de categoria de produto existente por suas novas páginas de categoria alimentadas por tabela. (Dica: Se você não estiver mais usando as páginas de categoria incorporadas, redirecione-as para as novas páginas onde você está usando tabelas de produtos.)

Para começar, vá para Páginas → Adicionar novo para criar uma página básica do WordPress. Depois, adicione o código de atalho [product_table] à página. Você também pode adicionar um título de categoria usando o campo de título regular.

Add the shortcode to your category page

Por padrão, o atalho exibirá todos os seus produtos WooCommerce.

No entanto, você pode usar o parâmetro de atalho de categoria para filtrar produtos de categorias e/ou subcategorias específicas. Você também pode combinar várias categorias ou criar condições como um produto ter que estar em várias categorias ou subcategorias para ser exibido.

Por exemplo, para filtrar produtos da categoria “cadeira”, você pode usar o seguinte atalho:

[product_table category="chair"]

Se você quiser adicionar uma imagem de categoria ou nome de categoria, você também pode fazer isso acima do atalho usando o editor WordPress regular.

Após você publicar a página, você deve ver sua nova página de categoria WooCommerce design:

A WooCommerce category page with a table layout

Para criar páginas para categorias adicionais do WooCommerce, repita o processo para cada categoria ou subcategoria de produto que você deseja exibir.

WooCommerce Tabela de Produtos
Um plugin fácil de usar para listar marcações e compromissos do WooCommerce em um layout de tabela de front-end.

Faça as suas categorias de WooCommerce mais pesquisáveis com filtros

Se quiser adicionar mais ferramentas de pesquisa e filtragem às suas categorias de WooCommerce, tem duas opções:

  1. Pode adicionar opções de pesquisa, classificação e filtragem através das definições da Tabela de Produtos do WooCommerce. Estas aparecerão acima ou abaixo da sua tabela de produtos.
  2. WooCommerce Product Table inclui widgets que você pode usar para adicionar filtros à sua barra lateral.

Você pode escolher o seu método preferido, ou também é totalmente bom usar as duas abordagens ao mesmo tempo. Isso permitirá que seus compradores escolham o método preferido.

Para adicionar opções de busca, classificação e filtragem diretamente ao layout da tabela, vá para WooCommerce → Configurações → Produtos → Tabelas de produtos. Em seguida, desça até a seção Controles da tabela e configure as opções de acordo com suas preferências:

Table filters

Você pode aprender mais neste artigo de ajuda.

Para usar os widgets de filtro, você pode ir para Appearance → Widgets. Lá, você encontrará quatro novos widgets prefixados por “Tabela de Produtos:”. Você pode adicionar todos os widgets, ou apenas escolher os filtros específicos que você gostaria de incluir:

Filter widgets

Aqui está um exemplo de como os dois conjuntos de filtros podem se parecer:

Example of WooCommerce category filters

Como criar uma página de categoria WooCommerce personalizada com código

Se você conhece PHP, HTML e CSS, também é possível criar uma página de categoria WooCommerce personalizada usando código, sem um plugin WooCommerce.

Você vai querer trabalhar com o arquivo archive-product.php no seu tema ou tema infantil. Você também pode usar esta mesma abordagem para editar suas páginas de produto único através do arquivo single-product ou outras partes da sua vitrine.

Felizmente, porque você precisará editar diretamente o código nos arquivos template do seu tema para fazer cada alteração, este método não é acessível a não desenvolvedores. Recomendamos que você procure o Codeable se precisar de alguma ajuda ou se ficar pelo método mais simples de layout de tabela acima.

Crie hoje mesmo o seu design de página de categoria WooCommerce personalizado!

Criar um design de página de categoria WooCommerce personalizado permite que você utilize uma forma mais amigável para os compradores para exibir seus produtos.

Ao usar um layout de página de categoria baseado em tabela, você será capaz de exibir mais produtos, juntamente com mais detalhes sobre cada produto.

>

Você também pode adicionar muitas opções úteis de busca e filtro para ajudar os seus compradores a encontrar produtos.

Conectando mais eficazmente os compradores com os produtos em que estão interessados, você pode vender mais produtos e aumentar o rendimento da sua loja.

Para usar um design de tabela para as suas categorias WooCommerce, você pode usar o plugin WooCommerce Product Table. A configuração é fácil, e você não precisará de nenhum conhecimento técnico especial para começar a funcionar como você faria se quisesse editar diretamente seu arquivo de modelos de arquivo.

WooCommerce Product Table
Um plugin fácil de usar para listar marcações e compromissos do WooCommerce em um layout de tabela de front-end.

Comece hoje e crie uma forma mais eficaz para os compradores navegarem pelas categorias de produtos na sua loja WooCommerce.