Guia Completo do Bloco WooCommerce

WooCommerce é um dos plugins populares para construir sites de e-commerce no WordPress. WooCommerce Blocks é um dos plugins no WooCommerce, projetado para tornar mais fácil para os usuários criar lojas online no WordPress. WooCommerce Blocks ajuda a criar páginas de loja personalizadas, exibir seus produtos e adicionar recursos avançados de e-commerce, como filtragem e busca de produtos – tudo sem escrever uma única linha de código. 

Você deve instalar o plugin WordPress WooCommerce Blocks para usar esses novos blocos. Este plugin é um campo de testes para recursos experimentais que podem ser adicionados ao WooCommerce principal.

Neste guia prático, discutiremos os recursos dos blocos WooCommerce e como personalizá-los. 

O que é o bloco WooCommerce?

Os blocos WooCommerce são uma coleção de blocos integrados ao editor de blocos do WordPress (Gutenberg) que permitem adicionar facilmente várias funcionalidades e recursos do WooCommerce às suas páginas e posts. Sem precisar escrever código, esses blocos permitem que você mostre produtos, categorias de produtos, filtros de pesquisa, carrinhos de compras, finalizações de compra e muito mais.

Em termos mais simples, os blocos WooCommerce são componentes pré-construídos que você pode inserir no seu site WordPress usando o editor de blocos, fornecendo uma maneira fácil de incorporar a funcionalidade de comércio eletrônico alimentada pelo WooCommerce. Isso faz parte do plugin principal do WooCommerce, então você os obtém automaticamente quando instala e ativa o WooCommerce no seu site WordPress.

Além disso, eles se integram perfeitamente ao editor de blocos do WordPress, permitindo que você crie páginas de produtos personalizadas, layouts de categorias e experiências de compra usando uma interface de arrastar e soltar familiar. aqui ...

Lista de recursos do bloco WooCommerce

Depois de entender o que é o bloco WooCommerce, em seguida, discutiremos cada recurso fornecido um por um:

• Todos os produtos: Exibe todos os produtos da loja em um formato de grade.
• Filtros de produtos ativos: Exibe filtros de produtos ativos em forma de lista ou como chips (semelhantes a botões).
• Todas as avaliações: Exibe todas as avaliações de produtos.
• Produto Mais Vendidos: Exibe produtos mais vendidos em um formato de grade.
• Finalizar compra: Exibe um formulário que permite aos clientes concluir seus pedidos.
• Carrinho: Exibe o carrinho de compras.
• Categoria em destaque: Destaque as categorias de produtos específicas junto com botões de chamar à ação.
• Produto em Destaque: Exibe produtos em destaque selecionados.
• Filtrar por preço: Exibe uma faixa de preço que os clientes podem usar para filtrar produtos. Você também pode habilitar uma faixa de preço editável clicando em um botão ou texto aqui.
• Filtrar por estoque: Permite filtrar produtos com base no status de disponibilidade em estoque. Este recurso oferece opções para exibir produtos em estoque, fora de estoque ou sendo reencomendados.
• Filtrar por avaliação: Permite que os clientes filtrem produtos com base em avaliações.
• Filtrar por atributo: Filtra produtos com base no tamanho ou cor.
• Produtos selecionados: Exibe produtos selecionados em um formato de grade, permitindo que você escolha quais produtos exibir especificamente.
• Carrinho miniatura: Fornece uma visão breve do carrinho de compras.
• Produtos mais recentes: Mostra os produtos mais recentes organizados em uma grade. formato. Eles podem ser personalizados adicionando/removendo elementos como título, preço, avaliação e botão de compra.
• Produto em promoção: Exibe produtos atualmente em promoção em um formato de grade e pode ser personalizado adicionando/removendo elementos como título, preço, avaliação e botão de compra.
• Pesquisa de produtos: Adiciona uma barra de pesquisa para facilitar que os clientes procurem produtos.
• Produto por etiqueta: Exibe produtos com etiquetas/etiquetas específicas em um formato de grade.
• Produto por atributo: Exibe produtos com atributos específicos (cor, tamanho, etc.) em um formato de grade.
• Produto por categoria: Exibe produtos com base em categorias em um formato de grade.
• Avaliações por produtos: Exibe avaliações agrupadas por produto.
• Avaliações por categoria: Exibe avaliações de produtos de categorias específicas.
• Produto único: Exibe uma visualização detalhada de um único produto.
• Produtos mais bem avaliados: Exibe produtos com as maiores avaliações em um formato de grade.

Como usar o bloco de grade de produtos no WooCommerce

Além de aprender sobre os recursos disponíveis nos blocos WooCommerce, vamos tentar usar ou adicionar uma grade de produtos no WooCommerce. Certifique-se de ter instalado o plugin de blocos WooCommerce no seu site. Aqui está como adicioná-lo:

1. Abra a página ou postagem onde você deseja exibir a grade de produtos e insira o título "Produto".

2. Na navegação à esquerda, clique no botão (+) > role para baixo até a seção WooCommerce > selecione "grade de produtos".

3. Em seguida, para configurar o bloco, vá para o painel direito.

Neste painel, você pode ajustar várias coisas, incluindo:

• Configurações de layout: Você pode personalizar o número de linhas e colunas exibidas na grade de produtos. Por exemplo, definindo ambos como 2 para uma visualização equilibrada.
• Configurações de conteúdo: Você pode exibir um menu suspenso para ordenar produtos. Este recurso permite que os clientes ordenem produtos de acordo com suas preferências. Você pode desativá-lo se não for necessário.
• Estilo avançado: Você pode adicionar classes CSS para personalizar a aparência.

Como adicionar produtos em destaque à sua página

O bloco de produto em destaque permite que você destaque produtos específicos na sua página ou postagem. Com este bloco, você pode selecionar produtos, personalizar sua aparência e colocá-los no seu conteúdo para atrair visitantes para os itens que você deseja promover.

Para adicionar o Bloco de Produto em Destaque, siga estes passos:

1. Abra a página ou postagem onde deseja adicioná-lo. Por exemplo, se você colocá-lo acima da grade de produtos, crie espaço nessa área e clique no botão "+" que aparece.

2. Selecione o botão "+" na barra de ferramentas do bloco para abrir a lista de blocos e, em seguida, procure e selecione "Produto em destaque".

3. Escolha os produtos que você deseja destacar e clique em "Concluído".
4. Para personalizar a aparência do bloco, clique em "Configurações". No painel de configurações, você pode ajustar várias coisas, incluindo:

• Mostrar ou ocultar a descrição e o preço do produto.
• Configurar exibição de mídia (imagem e vídeo).
• Adicione texto alternativo para imagens de produtos.
• Selecione a cor de sobreposição do bloco.
• Ajustar opacidade do bloco.

5. Após ajustar, você pode publicar ou atualizar a página para ver o bloco de produto em destaque exibido.

Como adicionar blocos de filtro no WooCommerce

O bloco de filtro do WooCommerce facilita para os clientes encontrar produtos que correspondam aos seus critérios de pesquisa. Ao fornecer opções de filtragem, os clientes podem rapidamente restringir os resultados da pesquisa para produtos relevantes para eles.

Para adicionar o bloco de filtro, siga estes passos:

1. Abra a página ou postagem onde você deseja colocar o bloco de filtro.
2. Determine o local desejado para colocar o bloco de filtro.
3. Na barra de ferramentas do editor de blocos, clique no botão "+" e procure as opções de filtro do WooCommerce, como filtro de preço, filtro de estoque, filtro de atributo e filtro de avaliação.

Agora, vamos discutir cada tipo de filtro disponível. 

Adicionando filtro por preço

O bloco de filtro de preço de produto permite que você adicione uma funcionalidade de filtragem que permite aos usuários selecionar o intervalo de preço desejado. O intervalo de preço pode ser exibido como botões editáveis ou texto regular. Você pode adicionar botões se desejar e ajustar seu nível de título.

Adicionando filtro por atributo

O bloco de filtro de atributo de produto permite que os usuários filtrem produtos com base em atributos como cor e tamanho. Você pode escolher os atributos que deseja usar a partir da lista disponível. Sua exibição pode ser na forma de uma lista ou um menu suspenso. Você também pode configurar o tipo de consulta para ser AND ou OR. Outros recursos incluem exibir o número de produtos, selecionar o nível de título, adicionar botões e escolher o filtro.

Adicionando filtro por estoque

O Bloco de Filtro de Produto por Status de Estoque permite que os usuários exibam produtos com base no status de disponibilidade. Eles podem exibir produtos disponíveis (em estoque), sem estoque (fora de estoque) ou em backorder. Você também pode configurá-lo para exibir o número de produtos, selecionar o nível de título e adicionar botões. Este bloco pode ser usado com outros blocos do WooCommerce, como Todos os Produtos. Infelizmente, este bloco não fornece uma pré-visualização quando adicionado à página.

Blocos de Carrinho e Finalização de Compra

O bloco do carrinho de compras adiciona uma exibição do carrinho de compras à sua página. Você pode incluir uma calculadora de custo de envio, selecionar um link para o botão de checkout e definir uma exibição em modo escuro. Este bloco também fornece uma notificação de que você pode definir a página como a página padrão do carrinho de compras nas configurações do WooCommerce. Um link para fornecer feedback também está incluído.

Enquanto isso, o bloco de checkout fornece um formulário de checkout para o seu carrinho de compras. Você será informado de que esta página pode ser definida como a página de checkout padrão nas configurações do WooCommerce. Há também uma opção para exibição em modo escuro. Este bloco consiste em vários elementos que você pode personalizar individualmente. Infelizmente, este bloco não fornece uma pré-visualização uma vez que é adicionado à página.

Como personalizar a página da loja no WooCommerce

Depois de aprender a usar vários blocos do WooCommerce, você pode combinar vários para criar uma página de loja personalizada fácil de usar. Para criar este layout de página de loja específico, siga estas etapas.

1. Crie uma nova página e nomeie-a "Loja".

2. Adicione o bloco de pesquisa de produtos.

3. Adicione o bloco de lista de categorias de produtos

Em seguida, defina o estilo de exibição para o menu suspenso.

4. Adicione o bloco de filtro de preço .
5. Adicione o bloco de produtos em destaque e selecione os produtos que você deseja destacar. Configure conforme necessário.

6. Adicione o bloco Todos os Produtos.

Defina o número de colunas e linhas para 2 e desative a opção de ordenação suspensa.

7. Por fim, publique a página para ver o layout final da página da loja que você criou.

Construa sua Loja Online com WooCommerce Block e Venda seu Produto

Depois de criar com sucesso uma página de loja personalizada com blocos WooCommerce, você pode começar a vender seus produtos físicos e digitais. Especialmente para produtos digitais, é crucial adicionar um plugin de download de arquivo como WP File Download Addon.

Este plugin permite que você venda produtos de download digital no WooCommerce. O addon WP File Download torna fácil gerenciar arquivos e categorias de arquivos para produtos digitais WooCommerce. Você pode criar rapidamente muitos produtos de download digital associados a um ou vários arquivos.

Além disso, este plugin se integra com Dropbox, Google Drive, Microsoft OneDrivee o recurso Social Locker . Você pode fornecer arquivos desses serviços em nuvem como downloads digitais WooCommerce com acesso altamente restrito por meio de conectores de API de nuvem.

Com o Addon WP File Download , vender produtos digitais em sua loja online WooCommerce tornou-se mais acessível e eficiente. Depois de construir sua loja com blocos do WooCommerce, este plugin complementa perfeitamente a venda de seu conteúdo digital.

Conclusão

WooCommerce Blocks é um plugin que permite que você construa uma loja online completa no WordPress sem escrever código. Com vários blocos, como grades de produtos, filtros e exibições de produtos em destaque, você pode criar facilmente uma experiência de compra envolvente e amigável. A interface de arrastar e soltar familiar torna o desenvolvimento de uma loja online mais rápido e eficiente.

Depois de construir sua loja online, o próximo passo é vender produtos físicos e digitais. Você pode utilizar o plugin de addon WP File Download para vender produtos digitais com WooCommerce, como ebooks, software ou conteúdo multimídia.

WP File Download O addon está disponível a partir de $49 por ano e já foi usado por mais de 60.000 membros. Então, o que você está esperando? Junte-se a nós para melhores vendas de produtos digitais!