O bloco de Produtos de Arquivo permite exibir uma grade de produtos WooCommerce em seus Modelos de Arquivo de Produto. Este bloco exibe automaticamente listagens de produtos em páginas de loja, arquivos de categoria, arquivos de tag e outras páginas de coleção de produtos com layouts personalizáveis e opções de filtragem.
Este bloco é essencial para criar Modelos de Arquivo de Produto personalizados onde você deseja controle total sobre como seus produtos são exibidos. Você pode personalizar o número de colunas, habilitar a paginação, adicionar opções de ordenação e filtrar quais produtos aparecem com base em categorias, tags, atributos ou outros critérios, criando uma experiência de compra que corresponde perfeitamente à sua marca.
Adicionando o Bloco de Produtos de Arquivo às Suas Páginas
Siga estas etapas para adicionar um bloco de Produtos de Arquivo ao seu Modelo de Arquivo de Produto SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos > Tags de Modelo do WooCommerce, arraste e solte o bloco Produtos de Arquivo na seção desejada do seu Modelo de Arquivo de Produto.
O bloco de Produtos de Arquivo está localizado em Tags de Modelo do WooCommerce e pode ser adicionado ao seu Modelo de Arquivo de Produto.
Etapa 2: Configurar as Definições de Conteúdo
Uma vez adicionado, clique no bloco de Produtos de Arquivo para abrir suas configurações. Na aba Conteúdo, você pode configurar como os produtos são exibidos e filtrados.
Configurações de Layout:
- Colunas: Defina o número de colunas na sua grade de produtos. Mais colunas cabem mais produtos por linha, enquanto menos colunas dão mais destaque a cada produto. Layouts comuns incluem 3 ou 4 colunas.
- Paginação: Ative ou desative os controles de paginação. Quando ativada, os produtos são divididos em várias páginas com botões de navegação.
- Mostrar Contagem de Itens: Ative para exibir o número total de produtos encontrados (por exemplo, “Exibindo 1-12 de 48 resultados”)
- Mostrar Ordenação Por: Ative para exibir um menu suspenso que permite aos visitantes ordenar os produtos por critérios como popularidade, avaliação, preço ou novidade.
- Limite: Defina o número máximo de produtos a serem exibidos por página. Isso funciona com a paginação para determinar quantos produtos aparecem antes de exigir que os visitantes cliquem em “Próximo”.
Consulta:
- Tipo: Defina como “Produtos de Arquivo” para exibir produtos com base no arquivo atual que está sendo visualizado (categoria, tag, etc.)
- Consultar Por: Escolha como filtrar quais produtos aparecem. As opções incluem Atributo (filtrar por atributos do produto), Tags (mostrar produtos com tags específicas), Categoria (exibir produtos de certas categorias), SKU (filtrar por SKU do produto), Grupo (filtrar por agrupamentos de produtos) ou Visibilidade (controlar quais produtos aparecem com base nas configurações de visibilidade do catálogo).
- Selecionar Por Tags: Ao consultar por tags, escolha quais tags de produto incluir ou excluir.
- Selecionar Por Categoria: Ao consultar por categoria, selecione quais categorias de produto exibir.
- Selecionar por SKU: Ao consultar por SKU, insira SKUs de produtos específicos para exibir
- Selecionar por Grupo: Ao consultar por grupo, escolha agrupamentos de produtos para filtrar
- Selecionar por Visibilidade: Controle se deseja exibir produtos marcados como visíveis no catálogo, visíveis na pesquisa, ocultos ou em destaque
A aba Conteúdo permite configurar colunas, paginação, limites de produtos e opções de filtragem para seu arquivo de produtos.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a aparência visual do seu bloco de Arquivo de Produtos:
Estilos:
- Alinhamento: Defina o alinhamento horizontal dos itens de produto dentro da grade (esquerda, centro ou direita)
- Tipografia da Descrição: Controle as propriedades da fonte para descrições de produtos, incluindo família da fonte, tamanho, peso e estilo
- Tipografia do Preço: Personalize as propriedades da fonte para preços de produtos
- Cor do Preço: Defina a cor dos preços dos produtos para destacá-los
- Cor do Selo de Promoção: Escolha a cor dos selos de promoção que aparecem em produtos com desconto
Botão:
- Estilo do Botão: Escolha o estilo visual dos botões “Adicionar ao Carrinho”. As opções incluem Flat (design plano moderno), 2D (profundidade sutil), Vintage (visual clássico), Ghost (transparente com borda) ou Link (link de texto simples)
- Cor do Botão: Defina a cor de fundo dos botões de produto
- Tipografia do Botão: Personalize as propriedades da fonte para o texto do botão
- Tamanho do Botão: Escolha o tamanho do botão entre Pequeno, Médio, Grande, X Grande ou 2X Grande
- Raio da Borda: Controle o arredondamento dos cantos dos botões. Valores mais altos criam botões mais arredondados
Imagem:
- Sombra: Adicione efeitos de sombra às imagens de produtos para dar profundidade. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, X Grande, 2X Grande ou Sombra Inferior
- Borda da Imagem: Ative bordas ao redor das imagens dos produtos
- Raio da Borda: Controle o arredondamento dos cantos das imagens
- Estilo da Borda: Escolha a aparência da borda: Sólida (linha contínua), Pontilhada (pequenos pontos) ou Tracejada (traços curtos)
- Cor da Borda: Selecione a cor das bordas das imagens
- Largura da Borda: Defina a espessura individual da borda para cada lado (Superior, Direita, Inferior, Esquerda)
- Espaçamento Branco da Imagem: Adicione preenchimento interno ao redor das imagens dos produtos para criar espaço
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Arquivo de Produtos (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre a grade de produtos e os elementos circundantes
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de Arquivo de Produtos (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre a grade de produtos e as bordas do bloco
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Arquivo de Produtos. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por JavaScript
- Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-produtos|arquivo)
Visibilidade do Dispositivo:
- Ocultar no Desktop: Ocultar o bloco de Produtos do Arquivo em telas de desktop
- Ocultar no Tablet: Ocultar o bloco de Produtos do Arquivo em dispositivos tablet
- Ocultar no Celular: Ocultar o bloco de Produtos do Arquivo em dispositivos móveis
Efeitos de Animação:
- Animação de Entrada: Escolha entre vários efeitos de animação que são reproduzidos quando a grade de produtos entra na visualização. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitas outras. Isso chama a atenção para suas listagens de produtos
A aba Avançado oferece extensas opções de estilo para layout de produto, tipografia, botões, imagens, espaçamento e animações.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Produtos do Arquivo e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Produtos do Arquivo ao seu Modelo de Arquivo de Produtos! Este poderoso bloco exibe automaticamente seus produtos WooCommerce em um layout de grade personalizável com opções de filtragem, classificação e paginação. Experimente diferentes layouts de coluna, estilos de botão e configurações de consulta para criar um arquivo de produtos que combine perfeitamente com sua marca e ajude os clientes a encontrar exatamente o que procuram.