Aparência (layout, ícones, cores e tipografia)
O plugin separa a configuração de aparência em duas dimensões: onde o preço aparece (página do produto vs. listagem) e como ele aparece (ordem, ícones, cores, tamanhos). Esta página passa por todos os controles.
Controles separados por contexto
Cada exibição é configurada de forma independente, em duas seções distintas das configurações:
- Página do Produto — controla o que aparece na ficha individual do produto.
- Listagem de produtos — controla o que aparece em listagens (loja, categorias, busca).
A maioria dos controles existe duas vezes (um pra cada contexto). Você pode, por exemplo, mostrar ícones na página do produto e ocultar na listagem.
Ordem de exibição
Exibir preço do cartão de crédito antes do valor à vista.
- Desmarcado (padrão): primeiro o preço à vista (com desconto), depois o preço no cartão. Bom quando o desconto à vista é o argumento principal.
- Marcado: primeiro o preço no cartão (parcelado), depois o à vista. Bom quando o parcelamento é o argumento principal.
O que mostrar
Você controla individualmente cada bloco:
- Exibir o preço padrão do WooCommerce antes de tudo. — Mantém o preço original do WooCommerce no topo, antes do bloco com desconto/parcelamento.
- Exibir preço à vista. — Mostra (ou não) o bloco com desconto.
- Exibir ícones — Liga/desliga os SVGs (Pix, boleto, cartão).
Layout em uma linha vs. duas linhas
Preço à vista e descrição na mesma linha.
- Desmarcado: preço em uma linha, descrição (
no pix, etc.) em outra abaixo. - Marcado: tudo na mesma linha, separado por espaço.
Útil em listagens, onde o espaço vertical é caro.
Mostrar preço cheio quando o produto está em promoção
Quando o produto está com promoção do WooCommerce (preço regular + preço promocional), o plugin pode mostrar o preço regular riscado. Você controla isso:
- Mostrar preço original ao lado do preço à vista quando o produto está em promoção.
- Mostrar preço original ao lado do preço de cartão quando o produto está em promoção.
Os dois são independentes — você pode mostrar só num dos blocos.
Sempre mostrar o preço à vista
Sempre exibir preço à vista controla o que acontece quando o desconto está em 0%:
- Marcado (padrão): mesmo sem desconto, o bloco "à vista" continua aparecendo (com o mesmo preço do cartão).
- Desmarcado: o bloco à vista some quando não tem desconto. Bom pra layout limpo.
Cores e tipografia
Tudo configurável em Configurações de design:
| Elemento | Controles |
|---|---|
| Ícones (Pix, boleto, cartão) | Cor e tamanho (px) |
| Preço à vista | Cor e tamanho de fonte (página do produto) |
| Preço à vista (listagem) | Tamanho de fonte separado |
| Preço de cartão | Cor e tamanho de fonte (página do produto) |
| Preço de cartão (listagem) | Tamanho de fonte separado |
| Descrição do cartão | Cor (ex: Em até 10x de R$ 50,00) |
| Descrição geral | Cor (ex: no pix) |
| Descrição na listagem | Tamanho de fonte separado |
Por padrão tudo é #000000 e os tamanhos de fonte são 24px na página e 17px na listagem.
As variáveis CSS expostas pelo plugin têm o prefixo --wcsp-. Se preferir customizar via CSS direto no tema, basta sobrescrever:
.wcsp-container {
--wcsp-incash-price-color: #ea580c;
--wcsp-card-price-font-size: 22px;
}
Isso pode ser útil pra fazer ajustes só em algumas páginas/contextos.
Trocar os ícones
Pra trocar os SVGs de Pix, boleto ou cartão por ícones próprios, use o filtro wc_installments_simulator_icon — veja Customizar ícones.
Quando o tema "come" o estilo
Alguns temas (especialmente Elementor) sobrescrevem a área onde o preço aparece. Se o seu plugin parece estar configurado certo mas a aparência continua quebrada, veja Solução de problemas.