O bloco Classificação do produto exibe a classificação por estrelas de um produto WooCommerce nos seus modelos de produto único. Ele extrai os dados de classificação diretamente da guia Avaliações de cada produto, oferecendo aos visitantes um indicador visual instantâneo da satisfação do cliente sem sair da página do produto.
Este bloco foi projetado exclusivamente para uso em modelos de produto único. Certifique-se de ter o WooCommerce instalado e que as avaliações de produtos estejam habilitadas antes de usá-lo. Você pode personalizar o tamanho das estrelas, o espaçamento e as cores para combinar com a identidade visual da sua loja.
Adicionando o bloco de classificação do produto às suas páginas
Siga estas etapas para adicionar um bloco de classificação de produto ao seu modelo SeedProd Single Product:
Passo 1: Adicione o bloco
Em Design > Blocos > Tags de modelo do WooCommerce > Informações adicionais, arraste e solte o bloco Classificação do produto na seção desejada do seu modelo de produto único.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionado, clique no bloco Classificação do produto para abrir suas configurações. Na guia Conteúdo, você encontrará as seguintes opções na seção Classificação por estrelas:
- Alinhamento: defina o alinhamento horizontal da classificação por estrelas — Esquerda, Centro ou Direita — com controles por dispositivo para desktop, tablet e celular.
- Tamanho: Defina o tamanho dos ícones de estrela usando um controle deslizante.
- Espaço entre: Defina o espaçamento horizontal entre as estrelas individuais usando um controle deslizante.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar a aparência visual do seu bloco Classificação do produto.
Estilos:
- Cor da estrela: Defina a cor de preenchimento das estrelas ativas (preenchidas).
- Cor da estrela vazia: defina a cor das estrelas não preenchidas.
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 Classificação do produto e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de classificação de produto ao seu modelo de produto único! As classificações por estrelas são um poderoso sinal de confiança que ajuda os clientes a tomar decisões de compra com segurança. Personalize as cores e o tamanho das estrelas para que a exibição da classificação pareça uma parte natural do design da página do seu produto.