Bloco de categoria Gutenberg para WooCommerce 2023

Atualizado em 10 de noviembre de 2023

Em muitas lojas online, existe uma categoria de produtos que vende melhor do que qualquer outra. Se isso for verdade para sua loja de comércio eletrônico, o bloco WooCommerce de categoria em destaque pode ajudá-lo a apresentar esses artigos importantes a um público ainda mais amplo.

Neste artigo, mostraremos como usar o bloco Categoria em destaque no WooCommerce. Veremos como configurar esse bloco e discutiremos as melhores maneiras de usá-lo. Por fim, responderemos às perguntas mais comuns sobre como incluir uma seção de Categoria em destaque na sua janela.

Como adicionar bloco WooCommerce de categoria em destaque à sua postagem ou página

O bloco Categoria em destaque exibe uma frase de chamariz (CTA) que incentiva os visitantes a navegar por uma categoria de produto específica. Você pode colocar isso bloquear em qualquer lugar do seu site. No entanto, ele se encaixa particularmente bem na página principal da loja ou na sua página inicial.

Para adicionar este elemento, abra o Block Editor da página ou post onde deseja colocá-lo. Selecione a opção de adicionar um novo bloco e use o campo de pesquisa para procurar a opção Categoria em destaque :

Adicionar bloco de categoria em destaque no WooCommerce

Depois de adicionar o bloco, o WooCommerce solicitará que você selecione a categoria do produto a ser incluída. Você verá uma barra de pesquisa e uma lista que inclui todas as categorias de produtos existentes em sua loja. No entanto, observe que este block só permite que você escolha uma única categoria:

Selecione uma categoria de produto em destaque no WooCommerce

Se você não conseguir encontrar o produto específico que deseja, pode ser necessário adicioná-lo manualmente.

Depois de selecionar ou adicionar uma categoria de produto, a lista desaparecerá. Em vez disso, você verá um elemento com fundo de cor sólida, um cabeçalho e um CTA:

Bloco de categoria em destaque WooCommerce em ação

O bloco de Categoria em destaque Parece muito simples por design. No entanto, você pode alterar e melhorar o estilo do bloco definindo suas configurações.

Categoria em destaque Configurações e opções de bloqueio WooCommerce

O bloco Categoria em destaque inclui duas coleções de configurações. Se você passar o mouse sobre o bloco no editor, um menu de formatação aparecerá acima dele. Esse menu permite alterar a largura do bloco (1), o seu alinhamento (2) e a categoria que apresenta através da opção Substituir (3):

O menu de formatação para o bloco Categoria em destaque

Se estiver satisfeito com o formato do bloco, você pode selecioná-lo e clicar no ícone de engrenagem no canto superior direito da tela do Editor de bloco. Isso abrirá o menu de configurações da página geral e do bloco que você selecionou.

Escolha a aba Bloquear e você poderá alternar uma opção para exibir a descrição da categoria em destaque e alterar a cor de fundo do bloco. Esta é a aparência do bloco quando alteramos as configurações Mostre a descrição em (1) e altere sua cor de fundo (2):

Definir configurações para bloco WooCommerce de categoria em destaque

É importante notar que você não pode alterar a cor do texto. Porém, pode modifique o estilo do CTA clicando nele. Fazer isso exibirá uma nova guia de configurações apenas para o botão:

Modifique as configurações de um botão CTA usando o Block Editor

Este menu de configurações permitirá que você altere o tamanho da fonte do CTA (1), o estilo da borda (2) e as cores do texto e do fundo (3). Idealmente, o design geral do CTA deve corresponder ao resto do bloco (e ao seu site como um todo).

Dicas e práticas recomendadas para usar o bloco de categorias em destaque do WooCommerce

O bloco WooCommerce categoria em destaque Tem um design muito simples. Isso significa que ele não deve parecer deslocado em nenhum lugar do seu site. No entanto, colocar o bloco na sua página inicial ou na página principal da loja faz mais sentido. Isso porque essas são as páginas onde os usuários esperam ver sugestões de produtos e categorias.

Na mesma nota, o bloco Categoria em destaque Ele não vem com um cabeçalho indicando o que os visitantes estão vendo. Se você deseja que os clientes em potencial prestem atenção, recomendamos adicionar um cabeçalho (como “Categorias em destaque”) logo acima do bloco:

Uma seção de categoria em destaque no WooCommerce

O bloco de Categoria em destaque Deve ter um fundo que corresponda ou contraste com o resto da página. A abordagem que você usará dependerá da sua sensibilidade de design, mas é importante que o CTA se destaque do resto do bloco. Caso contrário, os usuários podem não saber que estão vendo um botão que podem selecionar.

Uma desvantagem de usar bloco Categoria em destaque é que é difícil adaptá-lo a um layout de linha e coluna. Como o bloco não permite estilizar seu texto, é comum que o elemento fique sem espaço horizontalmente se compartilhar uma linha com outra coisa:

Uma linha com vários blocos de categorias em destaque

Se você se sentir confortável com CSS, poderá estilizar o texto do bloco. Caso contrário, recomendamos manter um layout de coluna única ao usar o bloco Categoria em destaque .

Scroll al inicio