O bloco Preço do Produto exibe o preço de cada produto WooCommerce em seus Modelos de Produto Único. Ele busca dinamicamente o preço atual do WooCommerce, incluindo preços promocionais, para que os compradores sempre vejam preços precisos sem nenhuma atualização manual de sua parte.
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 regular e do preço promocional — incluindo a opção de empilhar o preço original e o promocional verticalmente para que os clientes vejam o desconto imediatamente.
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:
Etapa 1: Adicionar 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
Após adicionar, clique no bloco Preço do Produto para abrir suas configurações. A guia Conteúdo permite estilizar a exibição do preço regular na parte superior e, em seguida, expanda a seção Preço Promocional para configurar como os preços com desconto aparecem.
Preço Regular:
- Tipografia: Defina a família da fonte, tamanho, peso, 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 regular.
- Alinhamento: Defina o alinhamento horizontal do preço — Esquerda, Centro ou Direita. Suporta alinhamento por dispositivo para desktop, tablet e celular.
Preço Promocional:
- Tipografia do Preço Promocional: Defina a família da fonte, tamanho, peso e estilo especificamente para o texto do preço promocional, permitindo que ele tenha uma aparência distinta do preço regular — por exemplo, tornando-o maior ou mais ousado para enfatizar a oferta.
- Cor: Defina a cor do texto do preço promocional. Use uma cor contrastante, como vermelho ou verde, para chamar a atenção para o valor com desconto.
- Empilhado: Ative para exibir o preço promocional abaixo do preço original (riscado) em uma pilha vertical, em vez de lado a lado. Este layout facilita para os compradores compararem o preço original e o com desconto rapidamente.
- Espaço Entre: Defina o espaçamento (1–100px) 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, atributos e visibilidade do seu bloco Preço do Produto.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco Preço do Produto (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre o preço e os elementos circundantes na página do produto.
- Preenchimento: Ajuste o espaçamento interno do seu bloco de 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:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Preço do Produto. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por 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 no Desktop: Oculte o bloco de Preço do Produto em telas de desktop.
- Ocultar no Tablet: Oculte o bloco de Preço do Produto em dispositivos tablet.
- Ocultar no Celular: Oculte o bloco de 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 de Preço do Produto entra na tela. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitas outras.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de 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 preços promocionais quando ativos. Experimente a cor do preço promocional, o layout empilhado e as configurações de tipografia para criar uma exibição de preços que destaque suas ofertas e gere mais conversões em sua loja WooCommerce.