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 capacidade 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 loja, páginas de destino de categoria ou qualquer página onde você queira exibir uma seleção curada de produtos em um formato limpo e navegável.

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

---

Adicionando o Bloco Grade de Produtos às Suas Páginas

Siga estas etapas para adicionar um bloco Grade de Produtos à sua página SeedProd:

Etapa 1: Adicionar 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 Ajustes

Uma vez adicionado, clique no bloco Grade de Produtos para abrir suas configurações. Na aba Configurações, os ajustes são organizados 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 Ordenar Por: Ative para exibir um menu suspenso de ordenação para que os visitantes possam reordenar os produtos por critérios como preço, popularidade ou avaliação.
• Limite: Defina o número máximo de produtos a serem exibidos. 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: Refine 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: Refine 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 ordenados — por Data, Título, Preço, Popularidade, Avaliação, Aleatório ou Ordem do Menu.
• Ordem: Defina a direção da classificação — ASC (ascendente) ou DESC (descendente).

Etapa 3: Personalizar o Design

Na aba Avançado, você pode personalizar a aparência visual do seu bloco Grade de Produtos. Os ajustes são organizados em três seções.

Estilos:

• Alinhamento: Defina o alinhamento horizontal da grade de produtos — Esquerda, Centro ou Direita — com controles por dispositivo para desktop, tablet e celular.
• Tipografia da Descrição: Defina a família da fonte, tamanho, altura da linha, espaçamento entre letras, peso, estilo e caixa para o texto da descrição do produto.
• Tipografia do Preço: Defina a família da fonte, tamanho, altura da linha, espaçamento entre letras, peso, estilo e caixa para o texto do preço do produto.
• Cor do Preço: Defina a cor do preço regular do produto.
• Cor em Promoção: Defina a cor do preço em promoção quando um produto estiver com desconto.

Botão:

• Estilo do Botão: Escolha um estilo visual para o botão Adicionar ao Carrinho — Flat, 2D, Vintage, Ghost 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 da fonte, tamanho, altura da linha, espaçamento entre letras, peso, estilo e caixa para o texto do botão.
• Tamanho do Botão: Escolha um tamanho de botão predefinido — Pequeno, Médio, Grande, X Grande ou 2X Grande.
• Raio da Borda: Ajuste o arredondamento dos cantos do botão Adicionar ao Carrinho usando um controle deslizante.

Imagem:

• Sombra: Aplique uma sombra às imagens do produto usando tamanhos predefinidos — Nenhuma, Fina, Pequena, Média, Grande, X Grande, 2X Grande ou Sombra de Queda Inferior.
• Estilo da Borda: Defina o estilo da borda das imagens do produto — Sólido, Pontilhado ou Tracejado.
• 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, Direita, Inferior, Esquerda) da imagem do produto.
• Espaçamento Interno da Imagem: Adicione preenchimento interno ao redor das imagens do produto dentro de sua borda.

Espaçamento:

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

Atributos:

• Classe Personalizada: Adicione uma ou mais classes CSS personalizadas ao wrapper do bloco para estilização direcionada.
• 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 personalizado.
• 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 no Desktop: Ative para ocultar o bloco quando visualizado em telas de desktop.
• Ocultar no Tablet: Ative para ocultar o bloco quando visualizado em telas de tablet.
• Ocultar no Celular: Ative para ocultar o bloco ao ser visualizado em telas de celular.

Efeitos de Animação:

• Efeito de Rolagem: Aplique uma animação acionada por rolagem ao bloco, incluindo opções de Rolagem Vertical e Rolagem Horizontal com controles de direção, velocidade e deslocamento de visualização.
• Efeito do Mouse: Aplique um efeito de paralaxe ao bloco, acionado pelo movimento do mouse.

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 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 ricas opções de estilo facilitam a exibição exatamente dos produtos certos, da maneira certa. Experimente diferentes tipos de produtos, contagens de colunas e estilos de botão para criar uma grade que incentive a navegação e impulsione as compras.