Como personalizar sua loja online com blocos WooCommerce

O Gutenberg Block Editor torna o WordPress ainda mais acessível para proprietários de sites de qualquer nível de habilidade, permitindo que você crie páginas complexas arrastando e soltando blocos de conteúdo. Com os blocos WooCommerce, você pode selecionar e exibir produtos, categorias, filtros e muito mais praticamente em qualquer lugar do seu site - sem necessidade de usar códigos de acesso ou editar linhas de código!

Vamos dar uma olhada nos blocos WooCommerce disponíveis e aprender como usar cada um.

Antes de começar, atualize o WordPress e o WooCommerce para a versão mais recente. Nota: As demos para este post foram criadas com o tema Storefront, mas devem funcionar com qualquer tema compatível com WooCommerce de sua escolha.

Conheça os Blocos WooCommerce

Você pode colocar WooCommerce Blocks em qualquer lugar que o Block Editor esteja habilitado: posts, páginas e tipos de posts personalizados. Comece navegando até a página ou postagem que deseja editar e clique no ícone Adicionar bloco (que se assemelha a um símbolo de “mais”) no canto superior esquerdo.

Isso abrirá um menu de todos os blocos disponíveis. Expanda a guia WooCommerce para visualizar os blocos específicos da sua loja online.

Dica profissional: você também pode adicionar blocos rapidamente ao conteúdo usando o atalho de teclado `/`. Por exemplo, você pode visualizar os blocos disponíveis do WooCommerce digitando `/woocommerce`.

Clicar em um bloco o adiciona à sua página e abre uma série de opções, que mudam dependendo do bloco que você selecionou.

Blocos de produtos

Os blocos de produtos permitem que você exiba produtos dentro da página e publique conteúdo. Essa é uma ótima maneira de vincular produtos recomendados em uma postagem de blog, exibir seus produtos mais recentes em uma página de destino ou criar uma página de loja personalizada. Há uma variedade de blocos de produtos que atendem a uma necessidade específica e são explicados com mais detalhes abaixo:

Bloco de produto em destaque

Este é um bloco totalmente personalizável que destaca um único produto. Você pode exibir o título e o preço do produto e adicionar um botão para incentivar as compras. Também há muitas configurações para a sobreposição, incluindo:

• Cor de sobreposição
• Opacidade do plano de fundo
• Ponto focal da imagem
• Posicionamento em segundo plano

Adicione um bloco de produto em destaque a uma página de destino para chamar a atenção de seus clientes e servir como um apelo à ação ou incorpore-o diretamente em uma postagem de blog como um link visual de produto. As opções são infinitas!

Bloqueio de todos os produtos

O Bloco Todos os Produtos exibe todos os seus produtos. Isso é útil se você deseja inserir outro conteúdo - texto, imagens, vídeos etc. - acima ou abaixo dos produtos e é uma ótima maneira de criar um catálogo visual. Inclui as seguintes opções:

• Configurações de Layout:
  • Número de colunas e linhas — personalize o layout da grade do produto
  • Botões de alinhamento — defina os botões para ficarem imediatamente abaixo do conteúdo ou alinhe-os
• Definições de conteudo:
  • Mostrar a lista suspensa de classificação — exiba ou oculte uma lista suspensa com opções de classificação
  • Encomendar produtos por — escolha o pedido padrão para produtos com base no preço, classificações, novidade ou vendas
  • Edite as informações exibidas para produtos — remova avaliações, adicione um selo de venda, inclua uma descrição e muito mais

Blocos de filtro

Combine blocos de filtro com o Bloco de Todos os Produtos para permitir que os visitantes do site restrinjam sua pesquisa de produtos. Quando os compradores selecionam um filtro, os produtos são atualizados automaticamente para atender aos critérios, sem recarregar a página. Existem três blocos de filtro disponíveis:

• Filtre por atributos, como cor ou tamanho
• Filtrar por preço mínimo e máximo
• Mostrar filtros ativos e selecionados

O exemplo abaixo usa todos os três blocos:

Ao combinar esses blocos, você pode criar uma página de loja atraente e fácil de navegar em apenas alguns minutos.

Bloco de produtos escolhidos a dedo

O Bloco de Produtos Selecionados a Dedo permite que você selecione manualmente os produtos que deseja exibir. Se você escrever uma postagem de blog intitulada “Ideias de presentes de aniversário”, poderá exibir produtos específicos que melhor se ajustem a esse tópico diretamente dentro da postagem.

Depois de adicionar o bloco, selecione produtos específicos de uma lista ou pesquise exatamente o que você está procurando.

As opções para o Bloco de Produtos Escolhidos a Dedo incluem:

• Número de colunas — escolha até seis
• Botões de alinhamento — defina os botões para ficarem imediatamente abaixo do conteúdo ou alinhe-os
• Mostrar ou ocultar:
  • Título do produto
  • Preço do produto
  • Classificação do produto
  • Botão adicionar ao carrinho

Produtos por Bloco de Categoria

Este bloco permite exibir produtos de uma categoria específica ou de várias categorias. Isso é perfeito para páginas de destino segmentadas ou páginas de categorias que exigem conteúdo adicional. As configurações incluem:

• Categoria do produto — selecione a categoria ou categorias a serem exibidas
• Número de colunas e linhas — personalize o layout da grade do produto
• Alinhar botões — permite que os botões sigam imediatamente o conteúdo ou os alinhem verticalmente
• Exibir ou ocultar:
  • Título do produto
  • Preço do produto
  • Classificação do produto
  • Botão adicionar ao carrinho
• Ordenar por:
  • Novidade
  • Preço
  • Avaliação
  • Vendas
  • Ordem do cardápio

O exemplo abaixo tem uma linha e cinco colunas da categoria 'música':

Blocos de produtos adicionais

Existem alguns blocos de produtos adicionais que funcionam de maneira muito semelhante aos mencionados acima:

• Produtos por Tag — exiba produtos com base em tags
• Produtos por Atributo — exiba produtos com base em atributos
• Produtos mais votados — exiba produtos com as melhores avaliações
• Produtos à venda — exiba produtos com desconto
• Produtos mais vendidos — exiba seus produtos mais vendidos

Revisar blocos

Sessenta e três por cento dos clientes são mais propensos a comprar um produto de um site com comentários. Os blocos de revisão podem ajudá-lo a destacar as avaliações dos clientes em seu site para fornecer provas sociais e incentivar as vendas, dependendo de suas necessidades.

Bloqueio de todas as avaliações

Este é o bloco que você precisa se quiser exibir todas as suas análises de produtos de uma só vez. Você pode usar esse bloco para destacar comentários na página inicial, apresentá-los em uma página de destino ou criar uma página especificamente para depoimentos. As opções incluem:

• Exibir ou ocultar:
  • Título do produto
  • Classificação do produto
  • Nome do revisor
  • Imagem — imagem do produto ou gravatar do revisor
  • Data de revisão
  • Revisar conteúdo
• Ordenar por — dê aos usuários a opção de solicitar avaliações por:
  • Mais recente
  • Classificação mais alta
  • Classificação mais baixa
• Número inicial de comentários — o número de comentários a serem exibidos
• Carregar mais — oferece a opção de carregar mais avaliações

Comentários por blocos de produto e categoria

Esses blocos fornecem as mesmas opções que o bloco Todas as avaliações, mas permitem que você selecione um produto ou categoria específica. Eles são uma ótima maneira de incorporar comentários em postagens ou páginas do blog. Promovendo o lançamento de um novo álbum? Mostre as cinco principais resenhas desse álbum específico. Escrevendo uma postagem de blog sobre uma categoria de produto específica? Mostrar todos os comentários para essa categoria. Essa é uma maneira poderosa de envolver os visitantes do site e mostrar que seus produtos podem ser confiáveis.

Bloco de pesquisa de produtos

Quando os clientes em potencial visitam seu site, eles podem encontrar o que estão procurando imediatamente. Se eles querem comprar um produto específico, a última coisa que você quer é que eles tenham que navegar página após página de itens não relacionados.

O Product Search Block fornece um formulário de pesquisa simples especificamente para produtos. Adicione-o em algum lugar visível em seu site - na parte superior ou na barra lateral de sua loja e páginas de categorias - e permita que os compradores pesquisem exatamente o que desejam.

Aproveite ao máximo sua loja online com WooCommerce Blocks

Leve seu marketing de conteúdo para o próximo nível adicionando produtos diretamente em páginas de destino, postagens de blog e outros tipos de mídia. Os usuários podem fazer compras relacionadas ao conteúdo de seu interesse sem nenhuma navegação adicional.

O Block Editor oferece aos usuários uma tremenda flexibilidade e controle sobre o layout e o design de sua loja online. Quando combinado com nossos WooCommerce Blocks, você pode criar uma vitrine verdadeiramente personalizada - adicionando tudo, desde produtos e categorias a filtros e análises praticamente em qualquer lugar que você precisar!

Mantenha-se atualizado sobre os blocos mais recentes para WooCommerce