Como personalizar a página da categoria WooCommerce no WordPress sem codificação

como personalizar a página da categoria wooCommerce

Você está pensando se deve editar a página da categoria de produto WooCommerce no Elementor?

Bem, se estiver, eu recomendo fortemente que você faça isso. Personalizar a página do arquivo WooCommerce e otimizá-la pode aumentar suas vendas.

Mas a questão é como personalizar a página da categoria de produto WooCommerce no WordPress?

Bem, você com certeza não precisa fazer nenhuma codificação para personalizar a página da categoria WooCommerce se seguir o processo mostrado neste blog.

Neste artigo você aprenderá como personalizar a página da categoria WooCommerce sem qualquer codificação. Além disso, você também conhece como você pode criar diferentes modelos de arquivo personalizados para cada categoria individualmente. E também maneiras de otimizar sua página de arquivo para aumentar a taxa de conversão.

Então, continue lendo….

Por que personalizar as páginas da categoria WooCommerce

De acordo com construídoCom, WooCommerce é usado por mais de 29% por cento dos 1 milhão de sites principais. Embora esta popularidade indique a credibilidade do WooCommerce como uma ferramenta de comércio eletrônico, também reflete que milhares e milhares de sites usam o mesmo layout padrão que o WooCommerce tem a oferecer.

WooCommerce
Uso do WooCommerce entre os principais 1 milhão de sites

E se você pensa em usar o padrão WooCommerce página apenas minimizará a chance do seu site se destacar na multidão, então você está errado. Existem outros motivos que você também precisa considerar. Para saber mais sobre esses outros motivos, vamos dar uma olhada na página da categoria padrão do WooCommerce com o Tema WordPress Vinte e Vinte e Dois ativado.

Página de categoria padrão do WooCommerce
Página de categoria padrão do WooCommerce

Se você observar, a página da categoria padrão do WooCommerce tem uma aparência básica que não é muito atraente. Além disso não tem opções avançadas como pesquisar produtos por nomes, filtrar produtos com base em diferentes atributos, etc. Tudo isso é importante para garantir uma boa experiência do usuário em sua loja online.

Além disso, quem não gosta de um site bonito, agradável aos olhos e fácil de navegar? 

Bem, a resposta é todo mundo! E vamos para a próxima seção, onde você aprenderá como personalizar modelos de páginas de categorias de produtos WooCommerce sem qualquer codificação.

Personalize WooCommerce usando ShopEngine

Como personalizar a página de categoria de produto WooCommerce em 6 etapas

Este é um tutorial fácil de seguir sobre como personalizar páginas de categoria WooCommerce no WordPress sem qualquer codificação. Seguindo este processo, você pode escolher o layout e também o design da sua página de arquivo WooCommerce rapidamente. Então vamos começar…

Etapa #1: Instale o construtor de páginas Elementor e ShopEngine

Para editar a página de categoria de produto do WooCommerce no Elementor usando o processo mostrado neste blog, você precisará de dois plug-ins do WordPress:

ShopEngine é o construtor WooCommerce definitivo para construtor de páginas arrastar e soltar - Elementor. É um complemento para Elementor que vem com um enorme número de widgets e módulos para facilitar a personalização do WooCommerce.

Observação: Você pode use o cupom comunidade20 para obter 20% OFF no ShopEngine Pro. Instale o Elementor primeiro, pois o ShopEngine depende deste construtor de páginas. Se precisar de ajuda para ativar o ShopEngine Pro, consulte o documentação.

Etapa #2: Crie um modelo de página de categoria WooCommerce personalizado

Depois de instalar e ativar todos os plug-ins necessários, você precisa criar um modelo de categoria. Para criar um modelo de página de categoria personalizada WooCommerce,

  • Navegar para: ShopEngine ⇒ Modelo de Construtores
  • Clique em Adicionar novo
  • Forneça um nome de modelo
  • Escolha Tipo como arquivo no menu suspenso
  • Deixe o campo Categoria Aplicável como está é criar um modelo comum para todas as categorias
  • Ative a opção Definir padrão para substituir qualquer modelo de página de categoria/arquivo existente
  • Selecione a opção em branco em Exemplo de Design 
  • Clique em Editar com Elementor para começar a construir o modelo
criar modelo de página de categoria personalizada WooCommerce
Crie um modelo de página de categoria WooCommerce em branco

Observação: Escolhi a opção em branco porque neste blog vou mostrar como fazer crie uma página de categoria personalizada do zero. ShopEngine oferece vários modelo de página de categoria WooCommerce pré-construído. Se você quiser usar um modelo pré-construído, escolha o que você gosta e vá para a etapa 5. (os passos 3 e 4 são obrigatórios se você quiser construir do zero)

Etapa #3: Escolha um layout/estrutura para a página da categoria WooCommerce

Quando estiver no modo editor, você precisa escolher uma estrutura para sua página de categoria WooCommerce.

Usarei três tipos diferentes de layouts para três seções diferentes para construir uma página de arquivo personalizada. Você pode fazer o mesmo mostrado no blog ou escolher o layout que desejar.

Para escolher uma estrutura, clique no ícone “+”, passe o mouse sobre o layout de sua preferência e clique nele.

selecione uma estrutura para a página de categoria personalizada como personalizar o tutorial da página de categoria de produto WooCommerce
Escolha uma estrutura

Observação: você pode repetir o mesmo processo para escolher layouts diferentes.

Relacionado: Como personalizar a página do produto WooCommerce

Etapa #4: Arraste e solte widgets do ShopEngine e personalize as configurações

ShopEngine fornece mais de 8 widgets dedicados para criar páginas de arquivo WooCommerce personalizadas. Esses widgets de página de categoria são

  • Descrição do arquivo
  • Arquivar produtos
  • Título do arquivo
  • Contagem de resultados do arquivo
  • Modo de visualização de arquivo
  • Ordenar por filtro
  • Filtro de produtos por página
  • Lista de produtos
  • Filtros de produto

Vou usar alguns desses. Você pode optar por usar todos eles para editar a página da categoria de produto Elementor WooCommerce. Mas antes disso, você precisa garantir que todos os widgets estejam ativados e disponíveis para uso. 

Você pode ativar/habilitar os widgets de ShopEngine ⇒ Widgets. Aqui ligue todos os widgets ou aqueles que você vai usar e finalmente clique no botão “Salvar alterações” para atualizar o status.

Habilite todos os widgets da página de categoria do ShopEngine
Habilite todos os widgets da página de categoria do ShopEngine

vou escolher um layout de uma coluna e arraste e solte widgets de pesquisa avançada e contagem de resultados de arquivamento.

arrastar e soltar widget de pesquisa e contagem de resultados para a página da categoria wooCommerce como personalizar a página da categoria WooCommerce
Arraste e solte widgets de pesquisa avançada e contagem de resultados de arquivamento

Você pode selecionar o widget e personalizar as configurações relacionadas. Por exemplo, se você clicar no widget Pesquisa Avançada, no painel esquerdo, você terá opções como Coluna de produtos, Mostrar categoria no resultado da pesquisa, Mostrar lista suspensa de categorias, Texto para todas as categorias, Ícone de pesquisa, etc.

Personalize o widget de pesquisa avançada WooCommerce
Personalize o widget de pesquisa avançada WooCommerce

Agora, para a próxima seção, usarei as etapas descritas na etapa 3 para inserir um novo layout de duas colunas. Em seguida, arraste e solte os widgets Filtros de produtos e Arquivar produtos.

filtros de produto drad and drop e widgets de arquivo de produto personalizam a página de arquivo do WooCommerce
Selecione uma nova estrutura Elementor

Observação: O O widget de filtro de produto está disponível apenas no ShopEngine Pro. Portanto, certifique-se de ter instalado e ativado o ShopEngine Pro.

Você pode personalizar opções relacionadas ao filtro, como filtro de preço, filtro de classificação, filtro de cores, filtro de categoria, etc. Além disso, você pode personalizar opções relacionadas ao layout, como modo de visualização de filtro, ativar botão de alternância de contêiner, colunas (por linha), etc. Você também pode adicionar uma lista de atributos personalizada, se desejar.

Personalize o widget Proudct Filters como personalizar a página da categoria WooCommerce
Personalizar o widget Filtros de Proudct

Você pode alterar as configurações de layout de arquivamento de produtos na opção de layout WooCommerce. Para mais detalhes sobre como alterar a opção de layout, você pode verificar isto documento. Além disso, você pode personalizar as configurações de conteúdo, como emblema de venda em Flash, mostrar categorias, mostrar classificação de descrição, etc. Você também pode escolher um ícone de paginação personalizado e uma ordem personalizada do botão CTA, como Adicionar ao carrinho, Adicionar à lista de desejos, Visualização rápida, etc. .

Personalizar o widget Arquivar produtos

Relacionado: Como personalizar a página Minha conta do WooCommerce

Etapa #5: Personalizar as configurações de estilo da página WooCommerce Archive

Depois de definir seus layouts e widgets personalizados, é hora de mudar a aparência alterando as configurações de estilo desses widgets. Para alterar as configurações de estilo você precisa clicar no widget e no painel ir até a aba Estilo para acessar todas as configurações de estilo. Vamos dar uma olhada na opção de estilo dos widgets usados neste tutorial:

Busca Avançada:  Você pode personalizar várias opções do formulário de pesquisa, ícone de pesquisa/estilo de texto, estilo de categoria, estilo de produto, botão mais produtos e fonte global. 

Alterar as configurações de estilo do widget de pesquisa avançada como personalizar a página da categoria WooCommerce
Alterar as configurações de estilo do widget de pesquisa avançada

Contagem de resultados do arquivo: Você pode personalizar as opções de alinhamento, cor e tipografia.

widget de contagem de resultados do ElementsKit
Alterar as configurações de estilo do widget Archive Result Count

Filtros de produto: Você pode encontrar opções para estilizar a seção de filtros de produto em diferentes categorias, como Estilos Comuns, Filtro de Preço / Controle deslizante de Faixa, Filtro de Classificação e Filtro de Categoria.

Configurações de estilo de filtro de produto para editar a página de categoria de produto WooCommerce no WordPress
Personalize as opções de estilo do widget Filtro de Produto

Produtos de arquivo: Você pode personalizar as configurações de estilo do produto de arquivo personalizando as opções fornecidas em seções como Contêiner do produto, Imagem do produto, Categorias do produto, Título do produto, Preço do produto, Etiqueta fora, Botão Adicionar ao carrinho, Classificação, Venda flash e Paginação.

Arquive as configurações de estilo do produto para editar a página da categoria Elementor WooCommerce
Personalize o estilo do widget Arquivar produtos

Relacionado: Como personalizar a página do carrinho WooCommerce

Etapa #6: Atualizar e visualizar o modelo de página de categoria personalizada WooCommerce

Após finalizar a customização do estilo, clique no botão Atualizar para salvar. Agora você pode clicar no botão de visualização para ver a visualização ou visitar qualquer página de categoria manualmente e você verá que o novo modelo está ativado como a visualização abaixo:

Personalize a visualização da página da categoria
Página de categoria WooCommerce personalizada usando ShopEngine

Agora, este foi o processo de criação de uma página de categoria personalizada para sua loja WooCommerce. Mas que tal criar um design diferente para cada categoria da sua loja? Bem, você também pode fazer isso com o ShopEngine. Para saber mais detalhes, vá para a próxima seção.

Personalize WooCommerce usando ShopEngine

Como construir uma página personalizada do arquivo WooCommerce para cada categoria separadamente?

Você pode construir um design totalmente diferente para cada categoria ou apenas uma categoria específica de sua loja WooCommerce. Para isso, o processo permanece praticamente o mesmo que Mostrado acima. Mas em passo 2, Crie um modelo de página de categoriavocê não é possível deixar o campo Categoria Aplicável em branco.

Você precisa selecione a categoria no campo Categoria Aplicável para o qual você deseja aplicar o modelo de design que está construindo. Por exemplo, se você deseja criar um design que seja aplicável apenas à categoria Música, no campo Categoria Aplicável escolha Música. 

crie uma página de arquivo diferente para cada categoria de WooCommerce usando ShopEngine

O restante das etapas será igual à construção de um design de modelo de categoria geral mostrado no seção acima.

Observação:  Ao criar um modelo de arquivo para uma categoria específica, ele aplicam-se apenas a essa página de categoria e não ao resto das páginas de categoria.
Para o restante das categorias você precisa criar um modelo de categoria diferente com o campo “Categoria Aplicável” em branco para todas as categorias ou um modelo diferente para cada uma delas. Caso contrário, o restante das categorias terá o modelo de arquivo WooCommerce padrão ou o modelo que seu tema ativado oferece.

diferentes modelos de página de arquivo WooCommerce usando ShopEngine - o construtor WooCommerce definitivo

Aqui está uma prévia da página de diferentes categorias do WooCommerce com design diferente criado com ShopEngine:

visualização de diferentes páginas de categorias WooCommerce personalizadas para cada categoria usando ShopEngine

Observação: A opção de criar diferentes modelos/designs para diferentes categorias do seu site WooCommerce está disponível apenas na versão Pro do ShopEngine.

Bônus: 5 maneiras de otimizar a página da categoria WooCommerce para aumentar a taxa de conversão 

Aqui estão algumas dicas úteis que você pode seguir para otimizar sua página de arquivo WooCommerce para aumentar a taxa de conversão:

Fornece opção de filtro de produto

adicione filtros de produtos para aumentar a conversão
Filtro de produto na página de categoria WooCommerce

Por padrão, sua página de categoria mostra todos os produtos dessa categoria. Mas geralmente as pessoas procuram um produto de uma determinada cor ou tamanho ou qualquer outro atributo.

Portanto, você deve fornecer opções para filtrar e restringir o número de produtos de uma categoria de acordo com seu atributo preferido. Dessa forma, as pessoas poderão encontrar facilmente seus produtos e isso ajudará você a aumente suas vendas.

Verifique também Como adicionar um alternador de moeda ao site WooCommerce em 5 etapas

Adicionar opção de comparação de produtos

adicione comparação de produtos e aprenda como personalizar a página da categoria WooCommerce no WordPress
Opção de comparação de produtos no WooCommerce

Adicionando um Comparação de Produto opção para o seu WooCommerce ajudará os consumidores a comparar produtos de tipo semelhante. Esta opção é necessária especialmente se você oferece produtos digitais como celulares, relógios, etc.

A opção de comparação de produtos ajudará os clientes a tomar uma decisão com mais rapidez. E isso o ajudará a atingir rapidamente sua meta de vendas maiores.

Botão de lista de desejos

personalizar a lista de desejos da página de arquivo do woocommerce para personalizar a página da categoria do WooCommerce
Botão de lista de desejos na página da categoria

Lista de Desejos oferece a opção de adicionar produtos ao carrinho para compra posterior. Algumas pessoas não consideram a lista de desejos tão eficaz quando se trata de conversão. Mas, honestamente, é altamente eficaz.

Porque as pessoas geralmente adicionam produtos à sua lista de desejos quando realmente gostam do produto, mas por algum motivo não conseguem comprá-lo imediatamente. Mas isso não significa que essa pessoa não comprará os produtos mais tarde.

Na maioria dos casos, as pessoas tendem a comprar produtos que adicionaram à sua lista de desejos. Portanto, adicione uma opção de lista de desejos na página da categoria WooCommerce.

Opção de visualização rápida

visualização rápida adicional para aumentar a taxa de conversão da página de categoria usando o modelo de página de categoria personalizado woocommerce
Opção de visualização rápida na página WooCommerce Archive

Adicionando um olhada rápida O botão garante uma ótima experiência do usuário, pois as pessoas não precisam visitar páginas separadas para conhecer um produto. Utilizando esta opção de visualização rápida, seu cliente pode permanecer na página da categoria e conhecer detalhes dos produtos com apenas um clique.

Se as pessoas precisarem acessar a página de um produto para visualizá-lo, poderão sair do site sem comprar o produto, caso não gostem. No entanto, se você fornecer a opção de visualização rápida para que os clientes possam conferir vários produtos enquanto permanecem na mesma página, isso elevará a experiência de compra. E como resultado, vai te ajudar a aumentar as vendas da sua loja.

Otimização SEO na página

Na página SEO

As páginas de categoria são o indicador da hierarquia de páginas do seu site. Então, otimizando sua página de categoria para motores de busca nunca deve ser negligenciado. Porque, embora você queira que sua página inicial e de produto sejam classificadas, sua página de categoria, se classificada, também pode gerar muito tráfego.

Quanto mais tráfego você obtiver em seu site, mais chances você terá de obter mais conversões. Portanto, certifique-se de adicionar metadados de SEO adequados, otimizar links internos e externos, otimizar o URL, etc. Você pode obter ajuda de plug-ins de SEO como Classificação matemática, Yoast SEO etc.

Você acha que todos os pontos parecem válidos, mas precisarei de vários plug-ins para adicionar essas opções ao meu site e aumentar a conversão?

Bem, você não tem nada com que se preocupar. Porque o ShopEngine, além de ser um fabuloso personalizador WooCommerce com abundância de Widgets WooCommerce, também fornece Mais de 13 módulos como lista de desejos, check-out rápido, comparação de produtos, etc.

Além disso, você pode personalizar sua loja WooCommerce completa com este plugin. usando este editor de categorias, você pode editar todas as suas páginas WooCommerce; de página da loja para obrigado página. Assista ao vídeo para conhecer os vastos recursos que o ShopEngine tem a oferecer.

ShopEngine – O construtor WooCommerce definitivo

Outros blogs relacionados ao WooCommerce:

👉 Como adicionar um campo de checkout personalizado avançado do WooCommerce
👉 Melhores plug-ins de carrinho de compras para WooCoomerce
👉 Como resolver erro de carrinho vazio do WooCommerce
👉 Como adicionar check-out em várias etapas do WooCommerce

Palavras finais na página da categoria WooCommerce personalizada

Uma página de categoria é uma página essencial tanto para seus clientes quanto para os mecanismos de pesquisa. Personalizar e otimizar suas páginas de categoria só pode ajudá-lo a obter mais sucesso em seu negócio de comércio eletrônico. 

O bom é que agora você sabe como personalizar a página da categoria WooCommerce no WordPress e como otimizar a página para dobrar sua taxa de conversão. Além disso, agora você sabe como criar páginas de categoria WooCommerce personalizadas para cada categoria separadamente.

Você pode aproveitar o construtor WooCommerce mais completo disponível no mercado, chamado ShopEngine, para otimizar a página de categoria da sua eStore. E você pode obter seu plugin WooCommerce versátil em 20% OFF agora!

🔔 🔔 Para comprar ShopEngine Pro por 20% menos preço use o código do cupom comunidade20.

Então, vamos nos apressar e nos juntar à comunidade de amantes do WooCommerce agora!

Comentários

Deixe um comentário

Seu endereço de e-mail não será publicado. Campos obrigatórios marcados com *