O bloco Preço do produto exibe o preço de cada produto WooCommerce em seus modelos de produto único. Ele extrai dinamicamente o preço atual do WooCommerce, incluindo preços promocionais, para que os compradores sempre vejam preços precisos sem que você precise fazer atualizações manuais.
Este bloco foi projetado exclusivamente para uso em modelos de produto único. Além de apenas exibir um preço, você tem controle total sobre a tipografia, cor e alinhamento do preço normal e do preço promocional — incluindo a opção de empilhar o preço original e o preço promocional verticalmente para que os clientes vejam imediatamente o desconto.
Adicionando o bloco de preço do produto às suas páginas
Siga estas etapas para adicionar um bloco de preço do produto ao seu modelo de produto único do SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos > Tags de modelo do WooCommerce, arraste e solte o bloco Preço do produto na seção desejada do seu modelo de produto único.
Etapa 2: Configurar as definições de conteúdo
Depois de adicioná-lo, clique no bloco Preço do produto para abrir suas configurações. A guia Conteúdo permite definir o estilo da exibição do preço normal na parte superior e, em seguida, expandir a seção Preço de venda para configurar como os preços com desconto serão exibidos.
Preço normal:
- Tipografia: defina a família de fontes, tamanho, espessura, altura da linha e espaçamento entre letras para o texto do preço do produto.
- Cor: Defina a cor do texto do preço normal.
- Alinhamento: defina o alinhamento horizontal do preço — Esquerda, Centro ou Direita. Suporta alinhamento por dispositivo para desktop, tablet e celular.
Preço de venda:
- Tipografia do preço de venda: defina a família, o tamanho, a espessura e o estilo da fonte especificamente para o texto do preço de venda, permitindo que ele se destaque do preço normal — por exemplo, tornando-o maior ou mais forte para enfatizar a oferta.
- Cor: defina a cor do texto do preço de venda. Use uma cor contrastante, como vermelho ou verde, para chamar a atenção para o valor do desconto.
- Empilhado: ative esta opção para exibir o preço promocional abaixo do preço original (riscado) em uma pilha vertical, em vez de lado a lado. Esse layout facilita a comparação entre o preço original e o preço com desconto para os compradores.
- Espaço entre: defina o espaçamento (1–100 px) entre o preço original e o preço promocional quando a opção Empilhado estiver ativada.
Etapa 3: Personalizar o design
Na guia Avançado, você pode controlar o espaçamento, os atributos e a visibilidade do seu bloco Preço do produto.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do bloco Preço do produto (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre o preço e os elementos ao redor na página do produto.
- Preenchimento: ajuste o espaçamento interno dentro do bloco Preço do produto (superior, direito, inferior, esquerdo). Isso cria um espaço entre o texto do preço e as bordas do bloco.
Atributos:
- CSS ID: Exibe o identificador único gerado automaticamente para o seu bloco Preço do produto. Esse ID é criado automaticamente pelo SeedProd para personalização de estilo ou segmentação JavaScript.
- Classe personalizada: adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos personalizados: adicione quaisquer atributos HTML ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-price|product).
Visibilidade do dispositivo:
- Ocultar na área de trabalho: oculte o bloco Preço do produto nas telas da área de trabalho.
- Ocultar no tablet: oculte o bloco Preço do produto em dispositivos tablet.
- Ocultar no celular: oculte o bloco Preço do produto em dispositivos móveis.
Efeitos de animação:
- Animação de entrada: escolha entre vários efeitos de animação que são reproduzidos quando o bloco Preço do produto é exibido. As opções incluem Saltar, Aparecer gradualmente, Ampliar, Girar e muito mais.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Preço do produto e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de preço do produto ao seu modelo de produto único! O bloco exibe automaticamente o preço correto para cada produto, incluindo o preço de venda quando ativo. Experimente as configurações de cor do preço de venda, layout empilhado e tipografia para criar uma exibição de preços que destaque suas ofertas e gere mais conversões em sua loja WooCommerce.