O bloco Produtos do arquivo permite exibir uma grade de produtos WooCommerce em seus modelos de arquivo de produtos. Esse bloco mostra automaticamente listas de produtos em páginas da loja, arquivos de categorias, arquivos de tags e outras páginas de coleções de produtos com layouts personalizáveis e opções de filtragem.
Este bloco é essencial para criar modelos personalizados de arquivo de produtos, nos quais você deseja ter controle total sobre como seus produtos são exibidos. Você pode personalizar o número de colunas, ativar a paginação, adicionar opções de classificação e filtrar quais produtos aparecem com base em categorias, tags, atributos ou outros critérios, criando uma experiência de compra que combina perfeitamente com sua marca.
Adicionando o bloco de produtos arquivados às suas páginas
Siga estas etapas para adicionar um bloco Arquivar Produtos ao seu modelo de arquivo de produtos SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos > Tags de modelo do WooCommerce, arraste e solte o bloco Arquivar produtos na seção desejada do seu modelo de arquivo de produtos.
O bloco Produtos do arquivo está localizado em Tags de modelo do WooCommerce e pode ser adicionado ao seu modelo de arquivo de produtos.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionado, clique no bloco Arquivar produtos para abrir suas configurações. Na guia 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 acomodam mais produtos por linha, enquanto menos colunas dão mais destaque a cada produto. Os layouts comuns incluem 3 ou 4 colunas.
- Paginação: Alterne para ativar ou desativar os controles de paginação. Quando ativado, os produtos são divididos em várias páginas com botões de navegação.
- Mostrar contagem de itens: alterne para exibir o número total de produtos encontrados (por exemplo, “Exibindo 1-12 de 48 resultados”).
- Mostrar ordem por: Alterne para exibir um menu suspenso que permite aos visitantes classificar os produtos por critérios como popularidade, classificação, preço ou novidade.
- Limite: defina o número máximo de produtos a exibir 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 arquivados” para exibir produtos com base no arquivo atual que está sendo visualizado (categoria, tag, etc.).
- Consulta por: Escolha como filtrar os produtos exibidos. As opções incluem Atributo (filtrar por atributos do produto), Tags (mostrar produtos com tags específicas), Categoria (exibir produtos de determinadas categorias), SKU (filtrar por SKU do produto), Grupo (filtrar por agrupamentos de produtos) ou Visibilidade (controlar quais produtos são exibidos com base nas configurações de visibilidade do catálogo).
- Selecionar por tags: Ao pesquisar por tags, escolha quais tags de produto incluir ou excluir.
- Selecionar por categoria: Ao pesquisar por categoria, selecione quais categorias de produtos deseja exibir.
- Selecionar por SKU: Ao pesquisar por SKU, insira SKUs de produtos específicos para exibir
- Selecionar por grupo: ao consultar por grupo, escolha os agrupamentos de produtos para filtrar
- Selecionar por visibilidade: controle se deseja mostrar produtos marcados como visíveis no catálogo, visíveis na pesquisa, ocultos ou em destaque.
A guia Conteúdo permite configurar colunas, paginação, limites de produtos e opções de filtragem para o seu arquivo de produtos.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar a aparência visual do seu bloco Produtos arquivados:
Estilos:
- Alinhamento: defina o alinhamento horizontal dos itens do produto dentro da grade (esquerda, centro ou direita).
- Descrição Tipografia: controle as propriedades da fonte para descrições de produtos, incluindo família, tamanho, espessura e estilo da fonte.
- Tipografia de preços: personalize as propriedades da fonte para os preços dos 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 nos 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 (aparência clássica), Ghost (transparente com borda) ou Link (link de texto simples).
- Cor do botão: defina a cor de fundo dos botões do produto
- Tipografia dos botões: personalize as propriedades da fonte para o texto dos botões
- Tamanho do botão: Escolha o tamanho do botão entre Pequeno, Médio, Grande, Extragrande ou 2X Grande.
- Raio da borda: controla a arredondamento dos cantos dos botões. Valores mais altos criam botões mais arredondados.
Imagem:
- Sombra: Adicione efeitos de sombra às imagens dos produtos para dar profundidade. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extragrande, 2X Grande ou Sombra inferior.
- Borda da imagem: ativar bordas em torno das imagens dos produtos
- Raio da borda: controle a curvatura dos cantos da imagem
- 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 da imagem.
- Largura da borda: defina a espessura individual da borda para cada lado (superior, direito, inferior, esquerdo)
- Preenchimento de espaço em branco da imagem: adicione preenchimento interno ao redor das imagens dos produtos para criar espaço para respirar.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco de produtos arquivados (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre a grade de produtos e os elementos ao redor.
- Preenchimento: ajuste o espaçamento interno no bloco Produtos do arquivo (superior, direito, inferior, esquerdo). Isso cria um espaço entre a grade de produtos e as bordas do bloco.
Atributos:
- CSS ID: Exibe o identificador único gerado automaticamente para o seu bloco de produtos arquivados. Esse ID é criado automaticamente pelo SeedProd para personalização de estilo ou segmentação 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-products|archive)
Visibilidade do dispositivo:
- Ocultar na área de trabalho: Oculte o bloco Produtos arquivados nas telas da área de trabalho.
- Ocultar no tablet: oculte o bloco Produtos arquivados em dispositivos tablet.
- Ocultar no celular: Oculte o bloco Arquivo de produtos 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 é exibida. As opções incluem Saltar, Aparecer gradualmente, Ampliar, Girar e muito mais. Isso chama a atenção para suas listas de produtos.
A guia Avançado oferece opções abrangentes de estilo para layout do produto, tipografia, botões, imagens, espaçamento e animações.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Arquivar produtos e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de produtos arquivados ao seu modelo de arquivo de produtos! Esse 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 colunas, estilos de botões 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.