Um guia para usar blocos Gutenberg para sua loja WooCommerce

A introdução do editor Gutenberg no WordPress contribuiu para remodelar a identidade do WordPress em grande medida. De um sistema de gerenciamento de conteúdo central com recursos para adicionar mídia e, opcionalmente, plugins para várias necessidades, agora é adicionalmente um editor WYSIWYG rico e centrado em mídia e construtor de páginas da web, sem comprometer a flexibilidade que sempre ofereceu. Na verdade, os blocos que o Gutenberg fornece aumentam a flexibilidade para criar páginas da maneira que você deseja.

A melhor vantagem que o Gutenberg oferece sobre o editor anterior (também chamado de editor TinyMCE) é que ele elimina a necessidade de saber codificar ou a necessidade de entender a estrutura do WordPress para saber como adicionar mais funcionalidades ao seu site WordPress ou WooCommerce armazenar. Se, no entanto, você estiver mais confortável com o antigo editor do WordPress, você sempre pode instalar este plugin gratuito conhecido como Editor Clássico pelos contribuidores do WordPress, que oferece a opção de desativar completamente o Gutenberg ou alternar entre o editor antigo e o Gutenberg . O Gutenberg também oferece um bloco Classic Editor para os usuários usarem as funcionalidades clássicas do editor dentro do Gutenberg! Parece bom demais para ser verdade? Vamos mergulhar neste post ou melhor, um guia para usar blocos Gutenberg para sua loja WooCommerce!

Os blocos Gutenberg podem ser acessados ​​através de qualquer página do WordPress. Ao adicionar uma nova página ou editar uma página existente no WordPress, você pode ver um símbolo “+” ao passar o mouse na área de conteúdo superior esquerda da tela.

Existem diferentes tipos de blocos que o Gutenberg fornece para diferentes usos:

Embora os blocos possam ser usados ​​para criar uma variedade de páginas, como administrador ou gerente de loja do WooCommerce, você deve se concentrar mais na página inicial ou loja. Portanto, para o propósito deste tutorial, vamos criar uma página inicial para sua loja projetada para aumentar suas vendas! Usaremos os blocos WooCommerce mais para isso. Esses blocos eram parte anterior de um plug-in de recursos da Automattic e foram mesclados no WooCommerce versão 3.5.

Os blocos WooCommerce contêm diferentes recursos ou 'blocos' relacionados principalmente à exibição de produtos em sua página, que você pode usar para criar sua loja. A seguir está a lista de blocos disponíveis em blocos WooCommerce:

• Produtos por categoria
• Produtos mais recentes
• Produto em destaque
• Produtos mais vendidos
• Produtos à venda
• Produtos escolhidos a dedo
• Produtos mais bem avaliados
• Produtos por atributo

Vamos começar adicionando um produto em destaque ao topo da nossa página inicial. Pode ser qualquer produto que você queira destacar para seus usuários/público.

Adicionamos um produto conhecido como "Associação à loja". Assim que um produto é adicionado, sua imagem, descrição e preço são exibidos. Você pode optar por ocultá-los usando as opções na barra lateral direita. Um botão “Comprar agora” também é adicionado; a cor, o texto e o URL para o qual aponta são todos atributos editáveis.

A cor de sobreposição é um recurso interessante que permite definir a cor e a opacidade da imagem do produto que você escolheu para ser o produto em destaque neste caso:

Você também pode adicionar uma classe CSS a esta imagem. Da mesma forma, o botão Comprar agora também pode ser editado:

Em seguida, vamos adicionar algumas novidades e best-sellers da loja, para que os visitantes novos e recorrentes tenham algo a tirar desta página.

Para isso, primeiro adicionaremos um bloco conhecido como Heading encontrado em Common Blocks:

Uma vez que um título apropriado como “Novidades” é adicionado, podemos ir em frente e adicionar o respectivo bloco para o mesmo. Para ambos os propósitos, usaremos blocos WooCommerce conhecidos como Produtos mais vendidos e Produtos mais recentes . Esses blocos podem ser encontrados novamente em blocos WooCommerce. Vamos adicionar o bloco Newest Products .

Você pode ver que o bloco de produtos mais recentes puxa os produtos adicionados mais recentemente da sua loja WooCommerce. Você pode optar por exibir quantos produtos quiser para este bloco definindo o número de linhas e colunas a serem exibidas, bem como filtrar os produtos por categoria usando as opções da barra lateral direita:

Dessa forma, adicionamos outra linha após a linha Produto em destaque para novas chegadas:

Em seguida, vamos adicionar os produtos mais vendidos de maneira semelhante (depois de adicionar o bloco Heading para ele):

Agora que criamos essas linhas para visitantes novos e recorrentes, vamos também adicionar uma linha exibindo produtos que estão em promoção para atrair mais vendas. Faremos isso usando o bloco On Sale em WooCommerce Blocks novamente (depois de usar o bloco Heading para adicionar um título):

Existem muitos outros blocos que você pode adicionar nos blocos WooCommerce com base em seus requisitos. Vamos agora adicionar todos os produtos à página da Loja. Para isso, você pode escolher o bloco Produtos por Categoria .

Muitas vezes, você também encontraria todos esses blocos na categoria de blocos mais usados , mas para o propósito deste tutorial, selecionamos esses blocos da categoria em que foram atribuídos. Você pode vincular todos os títulos às suas respectivas páginas, como a página Venda, a página Mais vendidos etc. para que os clientes visualizem a lista completa de produtos nessa seção.

Em nossa página inicial/loja, podemos adicionar um botão que diz Navegar na loja, que será vinculado à página da loja.

Para adicionar um botão, temos que escolher entre o bloco Layout Elements.

Vamos vincular este botão à página da Loja.

Da mesma forma, você pode criar botões abaixo de todos os outros blocos que criamos, como o bloco “Best Sellers”, o bloco “À venda” etc. e criar páginas separadas para todos eles e vincular os botões às suas respectivas páginas.

Para criar páginas separadas para tipos separados de produtos (best-sellers ou produtos de venda), você pode usar códigos de acesso que exibirão esses tipos específicos de produtos nas respectivas páginas. Neste post, falamos sobre como você pode exibir diferentes categorias de produtos na página inicial (ou em qualquer página) usando vários códigos de acesso.

É assim que nossa página fica no final:

Agora, basta clicar em Personalizar (no front-end, ao visualizar sua página) para torná-la sua primeira página e pronto! É assim que é fácil criar páginas atraentes para sua loja WooCommerce usando o Gutenberg. Explore e experimente os vários blocos que Gutenberg tem a oferecer para utilizar seus recursos ao máximo!