O bloco Grade de produtos oferece uma maneira eficiente de exibir seus produtos WooCommerce em um layout de grade visualmente organizado. Você pode mostrar todos os produtos ou filtrar por tipo — em destaque, em promoção, mais vendidos, adicionados recentemente ou mais bem avaliados — e dar aos clientes a possibilidade de adicionar vários itens ao carrinho diretamente da grade.

Com controles de consulta flexíveis, alinhamento por dispositivo, estilo de botões e imagens e paginação opcional, este bloco é ideal para páginas de lojas, páginas de destino de categorias ou qualquer página em que você queira exibir uma seleção de produtos em um formato limpo e fácil de navegar.

Requisitos:O bloco Grade de produtos está disponível no plano de licença Elite.

---

Adicionando o bloco de grade de produtos às suas páginas

Siga estas etapas para adicionar um bloco de grade de produtos à sua página SeedProd:

Passo 1: Adicione o bloco

Em Design > Blocos > WooCommerce, arraste e solte o bloco Grade de produtos na seção desejada da sua página.

Etapa 2: Configurar as definições

Depois de adicionado, clique no bloco Grade de produtos para abrir suas configurações. Na guia Configurações, as configurações estão organizadas em duas seções.

Conteúdo:

• Colunas: defina o número de colunas de produtos a serem exibidas na grade.
• Paginação: ative para habilitar a paginação, dividindo a grade de produtos em várias páginas.
• Mostrar contagem de itens: ative para exibir o número total de produtos mostrados.
• Mostrar ordem por: ative para exibir um menu suspenso de classificação, permitindo que os visitantes reordenem os produtos por critérios como preço, popularidade ou classificação.
• Limite: Defina o número máximo de produtos a exibir. Use -1 para mostrar todos os produtos correspondentes (padrão).

Consulta:

• Tipo: Escolha quais produtos exibir — Todos os produtos, Produtos em destaque, Produtos em promoção, Produtos mais vendidos, Produtos recentes ou Produtos mais bem avaliados.
• Incluir: restrinja a seleção de produtos filtrando para incluir apenas produtos que correspondam a critérios específicos, como IDs, SKUs, categorias, tags, atributos, grupos ou visibilidade.
• Excluir: restrinja a seleção de produtos filtrando para excluir produtos que correspondam a critérios específicos, como IDs, SKUs, categorias, tags, atributos, grupos ou visibilidade.
• Ordenar por: Defina como os produtos são classificados — por data, título, preço, popularidade, classificação, aleatoriamente ou ordem do menu.
• Ordem: Defina a direção da classificação — ASC (ascendente) ou DESC (descendente).

Etapa 3: Personalizar o design

Na guia Avançado, você pode personalizar a aparência visual do seu bloco Grade de produtos. As configurações estão organizadas em três seções.

Estilos:

• Alinhamento: defina o alinhamento horizontal da grade do produto — Esquerda, Centro ou Direita — com controles por dispositivo para desktop, tablet e celular.
• Descrição Tipografia: Defina a família de fontes, tamanho, altura da linha, espaçamento entre letras, peso, estilo e maiúsculas/minúsculas para o texto da descrição do produto.
• Tipografia do preço: defina a família de fontes, tamanho, altura da linha, espaçamento entre letras, peso, estilo e maiúsculas/minúsculas para o texto do preço do produto.
• Cor do preço: defina a cor do preço normal do produto.
• Cor da promoção: defina a cor do preço promocional quando um produto estiver com desconto.

Botão:

• Estilo do botão: escolha um estilo visual para o botão Adicionar ao carrinho — Plano, 2D, Vintage, Fantasma ou Link.
• Cor do botão: defina a cor de fundo do botão Adicionar ao carrinho.
• Tipografia do botão: defina a família de fontes, tamanho, altura da linha, espaçamento entre letras, peso, estilo e maiúsculas/minúsculas para o texto do botão.
• Tamanho do botão: Escolha um tamanho predefinido para o botão — Pequeno, Médio, Grande, Extragrande ou 2X Grande.
• Raio da borda: ajuste a curvatura dos cantos do botão Adicionar ao carrinho usando um controle deslizante.

Imagem:

• Sombra: aplique uma sombra às imagens dos produtos usando tamanhos predefinidos — Nenhum, Linha do cabelo, Pequeno, Médio, Grande, Extragrande, 2X Grande ou Sombra inferior.
• Estilo da borda: defina o estilo da borda das imagens dos produtos — sólida, pontilhada ou tracejada.
• Cor da borda da imagem: defina a cor da borda da imagem do produto.
• Largura da borda da imagem: defina a espessura da borda em cada lado (superior, direito, inferior, esquerdo) da imagem do produto.
• Preenchimento de espaço em branco da imagem: Adicione preenchimento interno ao redor das imagens dos produtos dentro de suas bordas.

Espaçamento:

• Margem: defina o espaçamento externo ao redor do bloco nos quatro lados, com controles independentes para desktop, tablet e celular.
• Preenchimento: defina o espaçamento interno dentro do bloco wrapper nos quatro lados, com controles por dispositivo.

Atributos:

• Classe personalizada: adicione uma ou mais classes CSS personalizadas ao invólucro do bloco para obter um estilo específico.
• ID CSS: O SeedProd gera automaticamente um ID CSS exclusivo para este bloco. Você pode usá-lo para referenciar o bloco em CSS ou JavaScript personalizados.
• Atributos personalizados: adicione atributos HTML personalizados ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato chave|valor.

Visibilidade do dispositivo:

• Ocultar na área de trabalho: alterne para ocultar o bloco quando visualizado em telas de desktop.
• Ocultar no tablet: alterne para ocultar o bloco quando visualizado em telas de tablet.
• Ocultar no celular: Alterne para ocultar o bloco quando visualizado em telas de celular.

Efeitos de animação:

• Efeito de rolagem: aplique uma animação acionada pela rolagem ao bloco, incluindo opções de rolagem vertical e horizontal com controles de direção, velocidade e deslocamento da janela de visualização.
• Efeito do mouse: aplique um efeito de paralaxe acionado pelo movimento do mouse ao bloco.

Etapa 4: Salve suas alterações

Depois de terminar de configurar o bloco Grade de produtos e personalizar sua aparência, certifique-se de salvar seu trabalho.

---

Você adicionou com sucesso um bloco de grade de produtos à sua página! Esteja você criando uma página completa de loja ou uma seção promocional direcionada, os controles de consulta flexíveis e as opções de estilo avançadas facilitam a exibição exata dos produtos certos da maneira certa. Experimente diferentes tipos de produtos, contagens de colunas e estilos de botões para criar uma grade que incentive a navegação e impulsione as compras.