Como criar uma bela página de loja WooCommerce (em 5 etapas)

Publicados: 2022-09-13


Procurando a maneira mais fácil de personalizar a página da loja WooCommerce?

O WordPress oferece uma ampla variedade de blocos para ajudá-lo a criar sites profissionais. Se você usa o WooCommerce, também obtém acesso a blocos dedicados do WooCommerce que podem ser usados ​​para sua loja online.

Portanto, você pode estar se perguntando como usar esses elementos para criar uma página de loja WooCommerce que gere conversões.

Felizmente, o processo é muito simples. Usando esses blocos, o WooCommerce permite exibir seus produtos de diferentes maneiras. Além disso, você pode adicionar filtros e funções de pesquisa para facilitar a navegação dos usuários em sua loja.

Neste artigo, mostraremos como criar uma bela página de loja WooCommerce usando blocos . Você pode seguir nossas diretrizes e escolher quais blocos deseja usar, dependendo de suas necessidades. Vamos começar!

Índice:

  1. Coloque o bloco Todos os Produtos
  2. Adicionar blocos de produtos em destaque e/ou produtos escolhidos a dedo
  3. Ativar a pesquisa de produtos na página da loja
  4. Use os blocos de categoria em destaque
  5. Adicione uma opção para filtrar produtos por preço

Como personalizar a página da loja WooCommerce com blocos

Para começar, abra o editor da página Loja da sua loja. Em seguida, siga estas instruções para personalizar seu conteúdo.

1. Coloque o bloco Todos os Produtos

As páginas da loja vêm em todas as formas e tamanhos. Em uma loja online, essa página normalmente exibe todos os produtos que você tem à venda. Os usuários podem clicar em itens individuais para abrir suas respectivas páginas de produtos ou adicioná-los diretamente aos seus carrinhos (se a loja permitir):

Uma página de loja WooCommerce

Com WordPress e WooCommerce, você tem controle total sobre quais elementos incluir na página da sua loja. A aparência desta página dependerá do tema que você está usando e de como você o configura.

O WooCommerce configura automaticamente uma página de loja quando você começa a usar o plug-in, para que você possa ir em frente e conferir como é a sua. Quando estiver pronto para editá-lo, vá para Páginas e encontre a opção Comprar .

Abra esta página no Editor de Blocos e você deverá ver algo assim:

O bloco WooCommerce All Products

Por padrão, a página Loja inclui o bloco Todos os produtos e um cabeçalho. Caso não veja este bloco, você pode adicioná-lo à página clicando no sinal de mais (+) e selecionando-o na lista de opções:

Adicionando o bloco Todos os produtos

O bloco Todos os produtos exibe uma grade que contém todos os produtos da sua loja, ordenados do novo ao antigo. Para alterar a ordem de exibição de seus produtos, clique no bloco e vá para o painel de configurações à direita. Em seguida, navegue até a seção Configurações de conteúdo e selecione sua preferência no menu Ordenar produtos por :

Configurando o bloco Todos os Produtos

Enquanto isso, em Configurações de layout , você pode escolher o número de colunas e linhas que deseja exibir na grade do produto. Sinta-se à vontade para explorar as outras opções disponíveis com este bloco.

2. Adicionar blocos de produtos em destaque e/ou produtos escolhidos a dedo

Muitas páginas da loja destacam produtos específicos. Normalmente, esses são itens para os quais os lojistas desejam chamar a atenção, como estoque novo ou com desconto ou produtos adicionados recentemente. O WooCommerce vem com um bloco de produto em destaque que permite exibir qualquer item em sua loja.

Depois de colocar este bloco em sua página, você precisará selecionar o produto que deseja destacar e clicar em Concluído :

Selecionando um produto em destaque no WooCommerce

Em seguida, o WooCommerce exibirá a imagem, o nome, o preço, a descrição do produto e um call-to-action (CTA). O bloco deve ficar assim:

Selecionando um produto em destaque no WooCommerce

Você pode então personalizar este bloco ao seu gosto. Por exemplo, você pode alterar a imagem e modificar o botão CTA.

A desvantagem de adicionar o bloco de produto em destaque à sua página de loja WooCommerce é que ele pode distrair os usuários do restante de seus produtos. Para combater isso, sugerimos o uso de colunas para exibir vários produtos em destaque lado a lado:

Exibindo vários produtos em destaque usando colunas

Uma alternativa ao bloco Produtos em destaque é a opção Produtos escolhidos a dedo . Este bloco permite escolher vários produtos e exibi-los lado a lado. Ele usa o mesmo estilo do bloco Todos os produtos :

O bloco de produtos escolhidos a dedo

Os blocos Produtos em destaque e Produtos escolhidos a dedo atendem a propósitos semelhantes. Idealmente, você escolherá uma das duas opções para não sobrecarregar os visitantes com muitos itens em destaque. Também recomendamos colocar esses blocos no topo da página, para que os usuários não os percam.

3. Ative a pesquisa de produtos na página da loja

Se você tiver uma loja com um grande catálogo de produtos, precisará oferecer um recurso de pesquisa. Dessa forma, os usuários podem procurar qualquer item específico que tenham em mente, sem precisar navegar por toda a loja.

Ao adicionar um bloco de pesquisa à página da sua loja, você deve procurar a opção Product Search , não o bloco de pesquisa padrão do WordPress. A Pesquisa de Produtos limitará os resultados aos produtos WooCommerce, enquanto o outro bloco de pesquisa incluirá todas as outras páginas do seu site.

Veja como é a função de pesquisa do WooCommerce:

Adicionando uma função de pesquisa na página da loja WooCommerce.

Lembre-se de que o bloco Product Search não funciona no editor, portanto, você precisará testá-lo no front-end. Além disso, o bloco não oferece a funcionalidade de preenchimento automático, portanto, os usuários precisarão digitar uma consulta completa e carregar uma nova página para ver os resultados.

4. Use os blocos de categoria em destaque

Além de direcionar os usuários para produtos escolhidos a dedo, você também pode destacar categorias específicas de produtos. Isso pode ser particularmente útil se você vender vários tipos de produtos, pois permitirá que os usuários procurem itens em um departamento específico.

Comece adicionando o bloco Categoria em destaque à página da sua loja WooCommerce. Em seguida, selecione a categoria de produto que deseja destacar e clique em Concluído :

O bloco de categoria em destaque no WooCommerce

Veja como será o bloco Categoria em destaque :

Um bloco de categoria em destaque na página da loja WooCommerce.

O bloco permite alterar a cor do plano de fundo e do texto, mas não oferece muitas opções adicionais de personalização. Além disso, como o bloco ocupa muito espaço, recomendamos colocar várias categorias em destaque lado a lado usando colunas:

Exibindo várias categorias de produtos em destaque na página da loja WooCommerce.

Como o bloco Featured Product Category é muito básico, recomendamos que você procure plugins como Otter Blocks para personalização adicional.

Com o Otter Blocks, você pode modificar os blocos do WooCommerce adicionando animações e outras configurações de visibilidade:

Configurando animações do Otter Blocks no WooCommerce.

Além disso, Otter Blocks adiciona uma variedade de novos blocos que você pode usar em sua loja online. Isso inclui opções como pop-ups (perfeitos para coletar inscrições de e-mail) e análises de produtos.

5. Adicione uma opção para filtrar produtos por preço

Até agora, sua loja tem uma barra de pesquisa, produtos escolhidos a dedo, categorias em destaque e todo o seu catálogo de produtos. Tudo o que está faltando é uma maneira de os usuários filtrarem produtos.

O bloco Filtrar Produtos por Preço permite que os clientes façam exatamente isso. O bloco exibe um controle deslizante que permite que os clientes definam os preços mínimo e máximo para os produtos que desejam ver:

O bloco Filtrar por Preço na página da loja WooCommerce.

Os valores dos preços não são editáveis ​​– eles dependem dos preços dos seus produtos. Os visitantes podem digitar os valores que desejam ou usar o controle deslizante para modificá-los.

Quando você faz alterações no controle deslizante de preço, o bloco Todos os produtos é atualizado para mostrar os produtos que atendem aos critérios. Isso acontece sem que os usuários precisem recarregar a página.

No que diz respeito ao posicionamento, recomendamos que você adicione o bloco Filtrar produtos por preço acima do seu catálogo de produtos. Dessa forma, os usuários a verão à medida que rolam a página.

Você também pode permitir que os usuários filtrem produtos por tamanho, cor e outros recursos. O bloco Filtrar Produtos por Atributo permite navegar pelos produtos que atendem a um atributo escolhido, com base nas opções disponíveis em sua loja.

E é mais ou menos isso! Quando terminar, salve suas alterações e sua nova página de loja começará a funcionar imediatamente.

Configure sua página de loja WooCommerce hoje

Uma página de loja WooCommerce eficaz deve incluir muitos elementos úteis. O catálogo está no centro da página, mas você também pode incluir uma barra de pesquisa, filtros de produtos, itens em destaque e muito mais.

Seu objetivo final é criar uma página que maximize as conversões, oferecendo aos usuários todas as opções que eles procuram em um layout e uma ordem que faça sentido.

Para recapitular, veja como criar uma bela página de loja WooCommerce com blocos:

  1. Coloque o bloco Todos os Produtos .
  2. Adicione blocos de produtos em destaque e/ou produtos escolhidos a dedo .
  3. Ative a pesquisa de produtos na página da loja.
  4. Use o bloco Categoria em destaque .
  5. Permita que os usuários filtrem produtos por preço.

Depois de configurar sua página de loja WooCommerce, você pode voltar sua atenção para suas páginas de produtos únicos. Para isso, confira nosso guia sobre como otimizar a página do produto WooCommerce.

Você tem alguma dúvida sobre como criar uma página de loja WooCommerce usando blocos? Deixe-nos saber na seção de comentários abaixo!

Guia gratuito

5 dicas essenciais para acelerar
Seu site WordPress

Reduza seu tempo de carregamento em até 50-80%
apenas seguindo dicas simples.