O bloco de Produtos Recentes exibe seus produtos WooCommerce publicados mais recentemente em uma grade limpa e navegável. É uma maneira simples de manter os visitantes recorrentes atualizados com suas últimas adições e dar destaque às novidades em qualquer página da sua loja.
Você pode controlar quantos produtos aparecem, como eles são ordenados e aplicar filtros opcionais usando os controles de consulta. A aba Avançado oferece controle total sobre a tipografia da grade, estilos de botão e apresentação da imagem do produto para corresponder à marca da sua loja.
Adicionando o Bloco de Produtos Recentes às Suas Páginas
Siga estas etapas para adicionar um bloco de Produtos Recentes à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos > WooCommerce, arraste e solte o bloco Produtos Recentes na seção desejada da sua página.
Etapa 2: Configurar Ajustes
Após adicionar, clique no bloco de Produtos Recentes para abrir suas configurações. Na aba Configurações, as opções sã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 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
-1para mostrar todos os produtos recentes 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. Este bloco tem como padrão Produtos Recentes.
- 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 de Produtos Recentes. As opções são organizadas 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
Após terminar de configurar o bloco de Produtos Recentes e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Produtos Recentes à sua página! Destacar seus produtos mais novos é uma ótima maneira de recompensar os visitantes recorrentes com conteúdo fresco e chamar a atenção para o novo estoque. Experimente com contagens de colunas, estilos de botões e opções de ordenação para exibir suas últimas novidades da melhor forma possível.