O bloco de Produtos em Destaque exibe seus produtos em destaque do WooCommerce em uma grade limpa e navegável. Ele foi projetado para destacar itens que você marcou como em destaque no WooCommerce, facilitando a exibição de seus melhores produtos ou os mais promovidos em qualquer página, sem a necessidade de curadoria manual no nível da página.
Antes de usar este bloco, certifique-se de ter designado os produtos relevantes como itens em destaque nas configurações de produtos do seu WooCommerce. Uma vez feito isso, você pode usar os controles de consulta do bloco para filtrar, classificar e limitar ainda mais quais produtos em destaque aparecem, e personalizar a tipografia da grade, os estilos de botão e a apresentação da imagem do produto na guia Avançado.
Adicionando o Bloco de Produtos em Destaque às Suas Páginas
Siga estas etapas para adicionar um bloco de Produtos em Destaque à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos > WooCommerce, arraste e solte o bloco Produtos em Destaque na seção desejada da sua página.
Etapa 2: Configurar Ajustes
Após adicionar, clique no bloco de Produtos em Destaque para abrir suas configurações. Na guia 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 em destaque 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 em Destaque.
- 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 guia Avançado, você pode personalizar a aparência visual do seu bloco de Produtos em Destaque. As configuraçõ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
Depois de terminar de configurar o bloco de Produtos em Destaque e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Produtos em Destaque à sua página! Ao exibir seus itens em destaque escolhidos a dedo em uma grade estilizada e configurável, você pode chamar a atenção para seus produtos mais importantes sem trabalho manual extra em cada página. Experimente com contagens de colunas, estilos de botão e configurações de imagem para criar uma vitrine de produtos que tenha boa aparência e gere conversões.