WooCommerce: Como começar com os blocos WooCommerce – PARTE 1

Desde o WordPress 5.0, o editor de página/post padrão foi completamente redesenhado. Certamente, você já ouviu falar sobre Gutenberg.

A má notícia é que o WooCommerce se juntou à nova experiência de edição muito mais lentamente, e ainda há coisas importantes a serem desenvolvidas para torná-lo amigável ao Gutenberg.

O progresso da compatibilidade pode ser rastreado através do plugin oficial WooCommerce Blocks, que afirma “ Você pode usar este plugin se quiser acessar todos os blocos disponíveis para WooCommerce – incluindo os experimentais. Nossos blocos “estáveis” atuais estão empacotados no WooCommerce, e podem ser adicionados a partir da seção “WooCommerce” no insersor de blocos “, porque você pode encontrar seus blocos “beta” lá, aqueles que eles chamam de “experimental” e que serão oficialmente lançados no WooCommerce assim que forem aprovados.

Neste artigo, vamos nos aprofundar especificamente nos Blocos WooCommerce – o que são, por que são importantes, quantos blocos estão disponíveis e como você pode usá-los.

Como este é um tópico enorme – temos vinte WooCommerce Blocks para cobrir – estamos dividindo-o em duas partes. Este artigo avaliará os dez primeiros Blocos que você pode usar em sua loja. Mas primeiro, vamos identificar o que são os blocos WooCommerce e investigar por que eles são tão importantes.

O que são WooCommerce Blocks e por que eles são tão importantes?

O WooCommerce cria automaticamente páginas como páginas de categoria e páginas de loja para exibir seus produtos. No entanto, é provável que outro site WooCommerce possa parecer semelhante à sua loja de comércio eletrônico – se eles escolherem a mesma página e layout de produto que o seu.

No entanto, com o WooCommerce Blocks, você pode tornar sua loja única e exibir seus produtos da maneira e do layout que preferir.

Os Blocos WooCommerce fornecem mais controle sobre o design da sua loja. Sua integração com o Block Editor permite que você personalize sua loja sem escrever uma única linha de CSS, adicionar código ou exigir experiência em design gráfico.

Você pode adicionar blocos facilmente com um método simples de arrastar e soltar. Usando a interface fácil de usar do WooCommerce Block, você pode:

• Crie páginas de loja personalizadas
• Crie páginas de destino para exibir uma coleção de produtos
• Adicione blocos de produtos em páginas específicas ou até mesmo em postagens de blog
• Adicione recomendações de produtos, análises de produtos e banners promocionais onde quiser

Então, vamos dar uma olhada nos diferentes blocos WooCommerce. Você obtém 20 WooCommerce Blocks integrados ao instalar o WooCommerce . Aqui está uma olhada nos primeiros dez blocos e como você pode usá-los.

Uma lista de blocos essenciais do WooCommerce [Parte 1]

1. Filtros de produtos ativos

Os filtros de produtos facilitam a pesquisa de produtos para seus clientes. Sem eles, há o risco de perder clientes – pois eles terão que procurar manualmente os produtos de sua escolha. Infelizmente, esse processo é demorado e torna seu site menos útil e interativo para seu público-alvo.

O bloco Filtros de produtos ativos exibe os filtros de produtos que estão atualmente ativos na visualização atual (portanto, filtros que foram selecionados na etapa anterior). Além disso, este bloco irá automaticamente pegar os atributos do seu produto – permitindo que seus clientes filtrem os produtos ativos por qualquer atributo.

Você pode estilizar o cabeçalho do bloco e optar por exibir os filtros como um chip (semelhante a botões) ou uma lista. Assim, este bloco facilita a adição de filtros como tamanho, forma ou cor do produto – tornando-o extremamente conveniente para seus clientes.

2. Todas as revisões

A exibição de avaliações de clientes é uma excelente maneira de mostrar a credibilidade e a autenticidade do seu produto. Ele atua como um depoimento de produto que os compradores confiam mais do que as afirmações do produto – aumentando as chances de os usuários comprarem os produtos.

De acordo com a Trustpilot, 89% dos clientes leem avaliações online antes de comprar os produtos. Isso mostra o papel integral que as avaliações dos clientes desempenham em suas vendas de comércio eletrônico.

Assim, incluir o Bloco Todas as Avaliações em seu site WooCommerce pode atuar como um divisor de águas para as vendas de seus produtos.

Este bloco permitirá que você exiba a lista completa de todas as avaliações de produtos que você recebeu em qualquer lugar da sua loja – como a postagem do blog ou a página de destino.

Ele vem com muitas opções de personalização onde você pode optar por ocultar ou exibir o nome do produto, o nome do avaliador, a data da avaliação, a classificação do produto, o conteúdo da avaliação e a imagem do produto.

Você pode personalizar as configurações permitindo que os usuários façam o pedido por classificação mais baixa ou mais alta, ou até mesmo definir o número de comentários a serem exibidos e adicionar uma opção 'carregar mais comentários' para seus clientes.

3. Todos os produtos

O Bloco Todos os Produtos exibe todos os produtos em sua loja WooCommerce e vem com opções de classificação e paginação. Você pode alinhar este bloco com o bloco Active Product Filters para mostrar uma lista suspensa de classificação.

Usando sua opção de paginação embutida, seus clientes podem navegar facilmente em seus produtos para frente e para trás para visualizar a página inteira do produto se você não desejar exibir todos os produtos em uma única página.

Você tem a opção de selecionar a ordem de classificação de produtos padrão - seja para classificar pelos produtos mais recentes ou pela popularidade dos produtos. Você também pode ocultar o menu suspenso de classificação, se necessário. Além disso, este bloco também permite adicionar conteúdo adicional, como imagens, texto e vídeos.

4. Categoria em destaque

O Bloco de Categoria em Destaque permite que você escolha produtos de uma determinada categoria de produto que deseja configurar e exibir como uma categoria em destaque ou em um banner de chamada para ação.

É uma solução perfeita para destacar uma categoria de produto específica em sua página de destino ou em uma postagem de blog – para direcionar o tráfego e maximizar as vendas dessa categoria de produto específica.

Um de seus recursos mais importantes é o Focal Point Picker, que permite arrastar o ponto de foco da imagem do produto para colocá-lo perfeitamente dentro do contêiner do plano de fundo. Este bloco também oferece opções como ocultar ou mostrar descrições de produtos, adicionar uma cor de sobreposição e alterar a opacidade.

Assim, se você lançou recentemente uma nova coleção de produtos – o bloco Categoria em destaque pode ajudá-lo a exibir a coleção em vários locais de sua loja e impulsionar as vendas.

5. Produtos em destaque

O Bloco de Produto em Destaque permite que você exiba os produtos da sua loja em um banner apresentável, de bom impacto e bem projetado com um Call To Action (CTA).

Ele vem com muitas configurações e opções para mostrar ou ocultar o preço e a descrição do produto, controlar o alinhamento do texto, adicionar uma cor de sobreposição, ajustar o posicionamento e a opacidade do plano de fundo, substituir a foto do produto e alterar o CTA do botão.

Este bloco é a maneira perfeita de mostrar produtos específicos em suas postagens de blog ou página de destino e atrair a atenção dos clientes – atraindo-os para fazer a compra.

6. Produtos por Categoria

O Bloco Produtos por Categoria permite exibir produtos de uma categoria ou categorias selecionadas em uma grade.

Ele permite que você modifique o número de linhas e colunas da grade com a opção de ocultar ou mostrar o título do produto, preço, classificação e o botão adicionar ao carrinho. Este bloco pode criar diferentes seções com diferentes categorias de produtos em sua página inicial.

7. Produtos mais vendidos

O bloco de produtos mais vendidos permite que você exiba os produtos mais vendidos de sua loja em uma grade.

O design deste bloco é muito semelhante ao do bloco Produtos por categoria com opções de personalização idênticas. Por exemplo, você pode definir opções de filtro apropriadas para os produtos – como filtrar por cor, tamanho e preço.

Usando este bloco – você pode incentivar os clientes a navegar pelos seus produtos mais vendidos e incentivá-los a comprar produtos para si mesmos.

8. Filtrar Produtos por Preço

Este bloco exibe um controle deslizante fácil de usar que permite aos clientes filtrar os produtos por preço. Por exemplo, arrastar a alça esquerda para a direita aumenta o preço, enquanto arrastar a alça direita para a esquerda o reduz.

Você pode editar a faixa de preço mínimo e máximo e adicionar um botão para definir o nível do título. Funciona perfeitamente em combinação com o bloco Todos os produtos.

9. Filtrar Produtos por Atributo

Este bloco adiciona um filtro que permite que seus clientes filtrem produtos por atributos. Os atributos podem ser cor, tamanho ou até mesmo sabor dos alimentos.

Você tem a opção de exibir o filtro como uma lista ou um menu suspenso. Além disso, você pode escolher o nível do título, incluir a contagem de palavras ou adicionar um botão.

10. Produtos mais recentes

Você pode usar este bloco para exibir todos os seus últimos lançamentos e produtos mais recentes em uma grade. Os clientes podem filtrar os produtos com base em uma categoria relevante.

Este bloco é perfeito para mostrar e comercializar o novo estoque da sua loja na página inicial e atrair mais olhos. Suas opções de personalização são semelhantes às do Bloco de Produtos Mais Vendidos.

Conclusão

Seja você um especialista em tecnologia ou um profissional não técnico - usar o WooCommerce Blocks é a maneira mais fácil e econômica de exibir seus produtos de maneira envolvente e levar sua loja para o próximo nível.

Você pode promover seus produtos em qualquer página e postagem de blog em seu site. Tudo o que você precisa fazer é arrastar os blocos para um local específico em uma página – e as atualizações da página são realizadas em tempo real.

Portanto, se você deseja aprimorar sua loja WooCommerce e chamar mais atenção - use os blocos WooCommerce mencionados acima.

Também temos a parte 2 deste artigo com mais dez WooCommerce Blocks e maneiras de adicioná-los e editá-los com facilidade. Confira como ele vai ao vivo na próxima semana!