O bloco Produtos mais bem avaliados permite exibir seus produtos WooCommerce mais bem avaliados em uma grade navegável. Ao destacar produtos que receberam avaliações positivas dos clientes, você pode construir confiança com novos visitantes e orientar os compradores em direção a itens que já se mostraram populares entre seu público.
Você pode controlar quantos produtos aparecem, como eles são classificados e aplicar filtros opcionais usando os controles de consulta. A guia Avançado oferece controle total sobre a tipografia da grade, os estilos dos botões e a apresentação das imagens dos produtos para combinar com a identidade visual da sua loja.
Adicionando o bloco de produtos mais bem avaliados às suas páginas
Siga estas etapas para adicionar um bloco de Produtos mais bem avaliados à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos > WooCommerce, arraste e solte o bloco Produtos mais bem avaliados na seção desejada da sua página.
Etapa 2: Configurar as definições
Depois de adicionado, clique no bloco Produtos mais bem avaliados 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
-1para mostrar todos os produtos mais bem avaliados 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 mais bem avaliados.
- 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 mais bem avaliados. 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 mais bem avaliados e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Produtos mais bem avaliados à sua página! Destacar seus produtos mais bem avaliados é uma maneira eficaz de criar prova social e ajudar os compradores indecisos a se sentirem confiantes para comprar. Para obter melhores resultados, certifique-se de que seus produtos tenham avaliações suficientes para refletir com precisão a qualidade e considere combinar esse bloco com uma exibição de classificação por estrelas para reforçar a credibilidade de cada recomendação.