O bloco Produtos em destaque exibe seus produtos em destaque do WooCommerce em uma grade organizada e fácil de navegar. Ele foi projetado para destacar os itens que você marcou como em destaque no WooCommerce, facilitando a exibição dos seus melhores produtos ou dos 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 do produto WooCommerce. Feito isso, você pode usar os controles de consulta do bloco para filtrar, classificar e limitar ainda mais quais produtos em destaque aparecem, além de personalizar a tipografia da grade, os estilos dos botões e a apresentação das imagens dos produtos na guia Avançado.

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

---

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:

Passo 1: Adicione 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 as definições

Depois de adicionado, clique no bloco Produtos em destaque para abrir suas configurações. Na guia Configurações, as configurações estã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 ordem por: ative para exibir um menu suspenso de classificação, permitindo que os visitantes reordenem os produtos por critérios como preço, popularidade ou classificação.
• Limite: Defina o número máximo de produtos a exibir. Use -1 para 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. O padrão deste bloco é Produtos em destaque.
• Ordenar por: Defina como os produtos são classificados — por data, título, preço, popularidade, classificação, aleatoriamente 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 Produtos em destaque. As configurações estão organizadas em três seções.

Estilos:

• Alinhamento: defina o alinhamento horizontal da grade do produto — Esquerda, Centro ou Direita — com controles por dispositivo para desktop, tablet e celular.
• Descrição Tipografia: Defina a família de fontes, tamanho, altura da linha, espaçamento entre letras, peso, estilo e maiúsculas/minúsculas para o texto da descrição do produto.
• Tipografia do preço: defina a família de fontes, tamanho, altura da linha, espaçamento entre letras, peso, estilo e maiúsculas/minúsculas para o texto do preço do produto.
• Cor do preço: defina a cor do preço normal do produto.
• Cor da promoção: defina a cor do preço promocional quando um produto estiver com desconto.

Botão:

• Estilo do botão: escolha um estilo visual para o botão Adicionar ao carrinho — Plano, 2D, Vintage, Fantasma 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 de fontes, tamanho, altura da linha, espaçamento entre letras, peso, estilo e maiúsculas/minúsculas para o texto do botão.
• Tamanho do botão: Escolha um tamanho predefinido para o botão — Pequeno, Médio, Grande, Extragrande ou 2X Grande.
• Raio da borda: ajuste a curvatura dos cantos do botão Adicionar ao carrinho usando um controle deslizante.

Imagem:

• Sombra: aplique uma sombra às imagens dos produtos usando tamanhos predefinidos — Nenhum, Linha do cabelo, Pequeno, Médio, Grande, Extragrande, 2X Grande ou Sombra inferior.
• Estilo da borda: defina o estilo da borda das imagens dos produtos — sólida, pontilhada ou tracejada.
• 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, direito, inferior, esquerdo) da imagem do produto.
• Preenchimento de espaço em branco da imagem: Adicione preenchimento interno ao redor das imagens dos produtos dentro de suas bordas.

Espaçamento:

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

Atributos:

• Classe personalizada: adicione uma ou mais classes CSS personalizadas ao invólucro do bloco para obter um estilo específico.
• 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 personalizados.
• 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 na área de trabalho: alterne para ocultar o bloco quando visualizado em telas de desktop.
• Ocultar no tablet: alterne para ocultar o bloco quando visualizado em telas de tablet.
• Ocultar no celular: Alterne para ocultar o bloco quando visualizado em telas de celular.

Efeitos de animação:

• Efeito de rolagem: aplique uma animação acionada pela rolagem ao bloco, incluindo opções de rolagem vertical e horizontal com controles de direção, velocidade e deslocamento da janela de visualização.
• Efeito do mouse: aplique um efeito de paralaxe acionado pelo movimento do mouse ao bloco.

Etapa 4: Salve suas alterações

Depois de terminar de configurar o bloco 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 cuidadosamente selecionados em uma grade estilizada e configurável, você pode chamar a atenção para seus produtos mais importantes sem nenhum trabalho manual extra em cada página. Experimente diferentes números de colunas, estilos de botões e configurações de imagem para criar uma vitrine de produtos com excelente aparência e que impulsione as conversões.