Saltar para o conteúdo principal
13 minutos de leitura (2554 palavras)

Guia completo do bloco WooCommerce

Guia-Completo-Bloco-WooCommerce

O WooCommerce é um dos plugins populares para criar sites de comércio eletrónico no WordPress. O WooCommerce Blocks é um dos plugins do WooCommerce, concebido para facilitar aos utilizadores a criação de lojas online no WordPress. O WooCommerce Blocks ajuda a criar páginas de loja personalizadas, a apresentar os seus produtos e a adicionar funcionalidades avançadas de comércio eletrónico, como a filtragem e a pesquisa de produtos – tudo sem escrever uma única linha de código. 

PONTOS-CHAVE DO ARTIGO:
  • Os Blocos do WooCommerce permitem que os proprietários de lojas criem e personalizem facilmente lojas online usando uma interface simples de arrastar e soltar dentro do editor de blocos do WordPress — sem necessidade de programação.
  • Com o WooCommerce Blocks, pode adicionar diversas funcionalidades como grelhas de produtos, filtros, carrinhos de compras e experiências de finalização de compra personalizadas, melhorando a navegação do cliente e aumentando as vendas.
  • Os WooCommerce Blocks oferecem componentes modernos, otimizados para dispositivos móveis e de alto desempenho que melhoram a experiência do usuário e preparam sua loja de e-commerce para o futuro com opções de design flexíveis.

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 núcleo do WooCommerce.

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

O que é o WooCommerce Block?

Os WooCommerce Blocks são uma coleção de blocos integrados com o editor de blocos do WordPress (Gutenberg) que permitem adicionar facilmente várias funcionalidades e recursos do WooCommerce às suas páginas e publicações. Sem escrever código, estes blocos permitem-lhe mostrar produtos, categorias de produtos, filtros de pesquisa, carrinhos de compras, finalizações de compra e muito mais.

Em termos mais simples, os WooCommerce Blocks são componentes pré-construídos que você pode inserir no seu site WordPress usando o editor de blocos, proporcionando uma maneira fácil de incorporar funcionalidades de comércio eletrônico com o poder do 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, integram-se perfeitamente com o editor de blocos do WordPress, permitindo criar páginas de produtos personalizadas, layouts de categorias e experiências de compra usando uma interface familiar de arrastar e soltar.ext here ...

Lista de funcionalidades do bloco WooCommerce

Depois de entender o que é o bloco do WooCommerce, a seguir, discutiremos cada recurso fornecido, um por um:

  • Todos os produtos: Exibe todos os produtos da loja em formato de grade.
  • Filtros de produtos ativos: Apresenta os 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 vendido: Exibe os produtos mais vendidos em formato de grade.
  • Finalizar compra: Exibe um formulário que permite aos clientes concluir os seus pedidos.
  • Carrinho: Exibe o carrinho de compras.
  • Categoria em destaque: Destaca categorias de produtos específicas juntamente com botões de chamada à ação.
  • Produto em destaque: Exibe os produtos em destaque selecionados.
  • Filtrar por preço: Exibe um intervalo de preços que os clientes podem usar para filtrar produtos. Você também pode ativar um intervalo de preços editável clicando em um botão ou texto aqui.
  • Filtrar por stock: Permite filtrar produtos com base no estado de disponibilidade de stock. Esta funcionalidade oferece opções para apresentar produtos em stock, esgotados ou a serem reencomendados.
  • Filtrar por avaliação: Permite que os clientes filtrem produtos com base nas avaliações.
  • Filtrar por atributo: Filtra produtos com base no tamanho ou na cor.
  • Produtos escolhidos manualmente: Apresenta produtos escolhidos manualmente numa grelha, permitindo-lhe escolher especificamente que produtos apresentar.
  • Mini carrinho: Fornece uma vista breve do carrinho de compras.
  • Produtos mais recentes: Mostra os produtos mais recentes organizados em formato de grelha. Podem ser personalizados adicionando/removendo elementos como título, preço, avaliação e botão de compra.
  • Produto em promoção: Apresenta os produtos atualmente em promoção num formato de grelha e pode ser personalizado adicionando/removendo elementos como título, preço, avaliação e botão de compra.
  • Busca de produtos: Adiciona uma barra de busca para facilitar a pesquisa de produtos pelos clientes.
  • Produto por etiqueta: Apresenta produtos com etiquetas/rótulos específicos numa grelha.
  • Produto por atributo: Exibe produtos com atributos específicos (cor, tamanho, etc.) em formato de grade.
  • Produto por categoria: Exibe produtos com base nas categorias em formato de grade.
  • Avaliação por produtos: Exibe avaliações agrupadas por produto.
  • Avaliação por categoria: Exibe avaliações de produtos de categorias específicas.
  • Produto individual: Apresenta uma vista detalhada de um único produto.
  • Produtos mais bem avaliados: Exibe os produtos com as classificações mais altas em formato de grelha.

Como utilizar o bloco de grelha de produtos no WooCommerce

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

1. Abra a página ou post onde 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".

Imagem de origem: Kinsta.com

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

Imagem de origem: Kinsta.com

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

  • Definições de esquema: Pode personalizar o número de linhas e colunas apresentadas na grelha de produtos. Por exemplo, definir ambos como 2 para uma vista equilibrada.
  • Configurações de conteúdo: Você pode exibir um menu suspenso para classificar os produtos. Esse recurso permite que os clientes classifiquem os produtos de acordo com suas preferências. Você pode desativá-lo se não for necessário.
  • Estilo avançado: Pode adicionar classes CSS para personalizar a aparência.
4. Em seguida, você pode visualizar a página antes de finalmente publicá-la.
Imagem de origem: Kinsta.com

O bloco Produto em Destaque permite-lhe apresentar produtos específicos na sua página ou artigo. Com este bloco, pode selecionar produtos, personalizar a sua aparência e colocá-los no seu conteúdo para atrair visitantes aos itens que pretende promover.

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

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

Imagem de origem: Kinsta.com

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

Imagem de origem: Kinsta.com

3. Escolha os produtos que 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 a exibição de mídia (imagem e vídeo).
  • Adicione texto alternativo para as imagens dos produtos.
  • Selecione a cor de sobreposição do bloco.
  • Ajuste a opacidade do bloco.
Imagem de origem: Kinsta.com

5. Depois de ajustar, você pode publicar ou atualizar a página para ver a exibição do bloco de produto em destaque.

Imagem de origem: Kinsta.com

Como adicionar blocos de filtro no WooCommerce

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

Para adicionar o bloco de filtro, siga estas etapas:

  1. Abra a página ou publicação onde pretende 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 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. 

Adicionar filtro por preço

O Bloco de Produto de Filtro de Preço permite adicionar um recurso de filtragem que possibilita 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 normal. Você pode adicionar botões, se desejar, e ajustar o nível do título.

Imagem de origem: Kinsta.com

Adicionar filtro por atributo

O Bloco de Filtro de Atributos de Produto permite aos usuários filtrar produtos com base em atributos como cor e tamanho. Você pode escolher os atributos que deseja usar na lista disponível. Sua exibição pode ser em forma de lista ou 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 do título, adicionar botões e escolher o filtro.

Imagem de origem: Kinsta.com

Adicionar filtro por stock

O Bloco de Filtro de Produtos por Estado do Stock permite aos utilizadores apresentar produtos com base no seu estado de disponibilidade. Podem apresentar produtos disponíveis (em stock), esgotados (fora de stock) ou em encomenda pendente. Também pode configurá-lo para apresentar o número de produtos, selecionar o nível do cabeçalho e adicionar botões. Este bloco pode ser utilizado com outros blocos do WooCommerce, como Todos os Produtos. Infelizmente, este bloco não fornece uma pré-visualização quando é adicionado à página.

Imagem de origem: Elegantthemes.com

Blocos de carrinho e finalização de compra

O bloco de carrinho de compras adiciona uma exibição de carrinho de compras à sua página. Você pode incluir uma calculadora de custo de envio, selecionar um link para o botão de finalizar compra 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.

Imagem de origem: Elegantthemes.com

Entretanto, o bloco de finalização de compra fornece um formulário de finalização de compra para o seu carrinho de compras. Será informado de que esta página pode ser definida como a página de finalização de compra predefinida nas configurações do WooCommerce. Existe também uma opção para exibição em modo escuro. Este bloco é composto por vários elementos que pode personalizar individualmente. Infelizmente, este bloco não fornece uma pré-visualização depois de ser adicionado à página.

Imagem de origem: Elegantthemes.com

Como personalizar a página da loja no WooCommerce

Depois de aprender a usar vários Blocos WooCommerce, você pode combinar vários para criar uma página de loja personalizada e fácil de usar. Para criar este layout específico de página de loja, siga estes passos.

1. Crie uma nova página e dê-lhe o nome "Loja".

Imagem de origem: Kinsta.com

2. Adicione o bloco de Pesquisa de Produtos.

Imagem de origem: Kinsta.com

3. Adicione o bloco Lista de Categorias de Produtos

Imagem de origem: Kinsta.com

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

Imagem de origem: Kinsta.com

4. Adicione o Filtro de Preço bloco.
5. Adicione o Produtos em Destaque bloco e selecione os produtos que pretende destacar. Configure conforme necessário.

Imagem de origem: Kinsta.com

6. Adicione o All Products bloco.

Imagem de origem: Kinsta.com

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

Imagem de origem: Kinsta.com

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

Imagem de origem: Kinsta.com

Procura uma solução poderosa de gestão de ficheiros para sites de clientes?

WP File Download é a resposta. Com recursos avançados como categorias de arquivos, restrições de acesso e interface intuitiva.
Impressione seus clientes com uma organização de arquivos de alto nível!

OBTENHA O PLUGIN AGORA

Crie sua loja online com o WooCommerce Block e venda seu produto

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

Este plugin permite vender produtos de download digital no WooCommerce. O WP File Download Addon facilita a gestão de ficheiros e categorias de ficheiros para produtos digitais do WooCommerce. Pode criar rapidamente muitos produtos de download digital associados a um ou vários ficheiros.

Além disso, este plugin integra-se com o Dropbox, Google Drive, Microsoft OneDrivee o recurso Social Locker . Pode fornecer ficheiros destes serviços de nuvem como downloads digitais do WooCommerce com acesso altamente restrito através de conectores de API de nuvem.

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

Atenção, webmasters!

Melhore os sites dos seus clientes com WP File Download. Crie repositórios de arquivos seguros e personalizáveis, permitindo que os clientes acessem e gerenciem facilmente seus arquivos.
Melhore seus serviços de web design hoje mesmo!

OBTENHA O PLUGIN AGORA

Conclusão

O WooCommerce Blocks é um plugin que permite criar uma loja online completa no WordPress sem escrever código. Com vários blocos, como grelhas de produtos, filtros e apresentações de produtos em destaque, pode facilmente criar uma experiência de compra envolvente e fácil de utilizar. A familiar interface de arrastar e largar torna o desenvolvimento de uma loja online mais rápido e eficiente.

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

O WP File Download 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!

Mantenha-se Informado

Ao subscrever o blog, enviaremos um e-mail quando houver novas atualizações no site para que não as perca.

Posts Relacionados