Uma visão geral do novo plug-in de blocos WooCommerce

Quando você instala ou atualiza o WooCommerce, ele inclui um novo plugin chamado Blocos de WooCommerce. Isso adiciona novos blocos ao editor de blocos do WordPress que permitem adicionar produtos WooCommerce às suas páginas e postagens. Neste artigo, vamos dar uma olhada nos blocos WooCommerce e ver o que eles podem fazer.

Plug-in de blocos WooCommerce

WooCommerce Blocks é um novo complemento para WooCommerce que adiciona 7 blocos a Gutenberg:

1. Produto em destaque
2. Produtos escolhidos a dedo
3. Produtos mais vendidos
4. Produtos mais bem avaliados
5. Produtos Mais Novos
6. Produtos à venda
7. Produtos por categoria

Cada um dos blocos é exibido em uma grade ajustável e pode ser classificado ou filtrado. As grades permitem que você especifique o número de colunas no layout. Você escolhe de 1 a 6 colunas ajustando um controle deslizante. Vários dos blocos também permitem ajustar o número de linhas. 4 é o padrão para todos os blocos com colunas ou linhas. Não inclui paginação, portanto, o número que você definir é tudo o que será exibido.

Os filtros permitem que você escolha as categorias. Alguns incluem um recurso de classificação, permitindo que você classifique por novidade, preço, avaliação, vendas, título ou ordem do menu.

Os blocos também incluem a guia Gutenberg Advanced padrão com campos CSS personalizados.

Ative o Bloco de Produtos

Ao atualizar ou ativar o WooCommerce, você verá o novo plug-in em sua lista de plug-ins. Se não o vir aqui, você pode pesquisar Blocos do WooCommerce na guia Adicionar novo em Plug-ins.

Você pode ativar o bloqueio na lista de plug-ins ou clicando no botão na parte superior do painel do WordPress.

Usando os blocos WooCommerce

A nova guia chamada WooCommerce é adicionada à lista de blocos disponíveis no editor de Gutenberg. Dentro desta guia está o conjunto de 7 blocos WooCommerce. Cada um dos blocos tem um ícone que corresponde ao que eles fazem para que você possa reconhecê-los imediatamente.

Conforme você adiciona os blocos à página, os símbolos aparecem na página onde você pode clicar para adicioná-los rapidamente.

Vamos dar uma olhada em cada bloco.

Produto em destaque

Produto em destaque permite que você escolha um único produto da lista para exibir. Você pode alinhar o texto, editar a sobreposição e editar a imagem. Ele também possui o campo Classe CSS Adicional.

Este bloco tem o maior número de personalizações disponíveis de todos os blocos WooCommerce. Defina a orientação do texto com os botões de texto na parte superior. Clicar em Editar abre as personalizações da sobreposição. Aqui você pode escolher o produto, mostrar a descrição, mostrar o preço, escolher a cor do overlay e definir sua opacidade.

Você pode escolher uma cor para usar ou pode escolher uma cor personalizada clicando no círculo multicolorido. Aqui, você pode inserir o código hexadecimal, o código RGB ou ajustar a cor com o controle deslizante e o seletor de cores. Eu gosto dos ajustes de sobreposição. Para ajustar o texto ou o botão, você precisará usar CSS.

Produtos escolhidos a dedo

Produtos escolhidos a dedo permite que você selecione os produtos que serão exibidos. Você pode procurá-los no próprio bloco ou na coluna da direita. Defina o número de colunas de 1-6. Peça por novidade, preço, avaliação, vendas, título ou ordem do menu.

Selecionar os produtos os adiciona ao layout dentro da grade.

Produtos mais vendidos

Produtos mais vendidos não permite que você escolha nada do bloco, mas você ainda pode fazer todas as suas personalizações nas configurações à direita. Aqui, você pode selecionar o número de colunas e linhas (escolha de 1 a 6 para cada), filtrar por categoria e ajustar CSS.

Neste exemplo, escolhi 6 colunas, 2 linhas e a categoria Vestuário.

Produtos mais bem avaliados

Produtos mais avaliados também adiciona os produtos conforme você seleciona o bloco. As configurações permitem incluir o layout padrão para 1-6 colunas e linhas, filtro por categoria e CSS. Este está mostrando as configurações padrão.

Produtos Mais Novos

Os produtos mais recentes também adicionam automaticamente os produtos conforme você seleciona o bloco. As configurações incluem o layout padrão, filtro de categoria e CSS. Neste exemplo, escolhi 5 colunas e 3 linhas. Deixei o filtro de categoria no padrão, que inclui todas as categorias.

Produtos à venda

On Sale Products carrega automaticamente todos os produtos que estão em promoção. Também inclui as opções de layout para colunas e linhas, o filtro de produto e CSS. Este adiciona uma opção Ordenar por para que você possa fazer o pedido por novidade, preço, avaliação, vendas, título ou ordem do menu. Neste exemplo, defini as colunas como 2 e as linhas como 4. Deixei a categoria do produto como padrão.

Produtos por categoria

Produtos por categoria permite escolher as categorias dentro do bloco e inclui um seletor para ajudar a refinar as escolhas. Para o meu exemplo, ele tinha apenas uma opção (Quaisquer categorias selecionadas). Também inclui as opções de layout, seleção de categoria, ordem por e configurações de CSS.

Neste exemplo, selecionei minhas categorias, configurei as colunas como 4, as linhas como 2 e ordenei os produtos em ordem alfabética.

Páginas de exemplo com blocos WooCommerce

Aqui está uma olhada em cada bloco no front-end. Eu adicionei um rótulo para identificá-los. Eu configurei cada um para um número diferente de colunas, mas todos eles têm 1 linha para ajudar a evitar que a imagem saia do controle. Você pode facilmente criar uma página de loja para cada categoria usando esses blocos.

Por exemplo, criei uma página apenas para mostrar acessórios. Adicionei uma imagem de capa e um título e defini o bloco Produtos por categoria para mostrar 3 colunas e 6 linhas.

Ele cria uma página limpa com um belo design e, claro, mostra apenas os produtos da categoria de acessórios. Isso pode ser usado para criar todos os tipos de páginas de produtos.

Aqui está um pequeno CTA que adiciona um bloco escolhido a dedo e um bloco de texto em uma coluna dupla.

A página é simples, mas é funcional.

Para esta página, adicionei os produtos mais vendidos em um layout de postagem de blog. Eu defini para 4 colunas e 1 linha e selecionei Roupas como a categoria.

A postagem parece ótima. Antes de publicar, provavelmente adicionaria algum espaço, um rótulo para os produtos e talvez adicionaria algum preenchimento ao texto, mas é fácil ver o potencial.

Para este, adicionei um layout de duas colunas e adicionei um bloco de texto e o bloco Produtos mais vendidos com 2 colunas e 2 linhas.

Reflexões finais

WooCommerce Blocks é um plugin interessante. Os blocos são simples de usar e fornecem algumas categorias úteis, layout e ferramentas de filtragem. Eu gosto dos controles deslizantes de layout de coluna e linha. Se você quiser fazer ajustes em seu texto, botões, sobreposições de foco, etc., você terá que usar CSS, mas pelo menos CSS personalizado é uma opção. Os blocos são ótimos para criar páginas de vendas ou adicionar produtos ao seu conteúdo.

Eu gostaria de ver mais alguns recursos de estilo (especialmente para os botões, texto e sobreposições de foco). Continuei querendo personalizar como faria com Divi (acho que Divi me estragou). Inclui os campos de classe CSS que ajudarão aqueles que usam CSS. Mesmo sem muitas customizações, gostei de usar os blocos. Se você deseja incluir produtos WooCommerce em suas páginas e postagens do Gutenberg, vale a pena tentar WooCommerce Blocks.

Nós queremos ouvir de você. Você já experimentou os blocos WooCommerce? Conte-nos sobre sua experiência nos comentários.

Imagem em destaque via Jomic / shutterstock.com