Customizar ícones (Pix, boleto, cartão)

O plugin vem com três ícones padrão: Pix, boleto e cartão de crédito. Você pode trocar qualquer um deles por SVGs próprios usando o filtro wc_installments_simulator_icon.

Como funciona o filtro

add_filter( 'wc_installments_simulator_icon', function( $icon, $type ) {
  // $type é uma das strings: 'pix', 'ticket', 'card'
  if ( 'card' === $type ) {
    return '<svg>...</svg>';
  }
  return $icon; // mantém o padrão para os outros
}, 10, 2 );

• $icon (string) — SVG atual.
• $type (string) — qual ícone está sendo renderizado: pix, ticket (boleto) ou card.

Sempre retorne uma string com markup SVG válido.

Trocar todos os ícones

add_filter( 'wc_installments_simulator_icon', function( $icon, $type ) {
  if ( 'pix' === $type ) {
    return '<svg viewBox="0 0 24 24"><path d="M12 2L2 12l10 10 10-10z" fill="currentColor"/></svg>';
  }

  if ( 'ticket' === $type ) {
    return '<svg viewBox="0 0 24 24"><path d="M2 7h20v10H2z" fill="currentColor"/></svg>';
  }

  if ( 'card' === $type ) {
    return '<svg viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2" fill="currentColor"/></svg>';
  }

  return $icon;
}, 10, 2 );

Trocar só um ícone

Manter Pix e boleto padrão, customizar só o cartão:

add_filter( 'wc_installments_simulator_icon', function( $icon, $type ) {
  if ( 'card' === $type ) {
    return file_get_contents( get_stylesheet_directory() . '/icones/cartao.svg' );
  }
  return $icon;
}, 10, 2 );

Boas práticas

Use currentColor

Os ícones do plugin usam fill="currentColor", o que permite que a configuração Cor dos ícones funcione direto no admin. Se seu ícone tem cor fixa (ex: fill="#FF0000"), ele ignora a cor configurada.

<!-- Bom: -->
<svg viewBox="0 0 24 24"><path d="..." fill="currentColor"/></svg>

<!-- Ruim: -->
<svg viewBox="0 0 24 24"><path d="..." fill="#FF0000"/></svg>

Mantenha o viewBox

Sem viewBox, o ícone não escala junto com o tamanho configurado em Tamanho dos ícones.

SVG inline, não <img>

O plugin espera markup SVG inline. Não use <img src="..."> — você perde a possibilidade de ajustar cor via CSS e o ícone não vai herdar o currentColor.

Onde colocar o código

• functions.php do tema filho (recomendado).
• Plugin de snippets (Code Snippets, WPCode).

Verificar se funcionou

Abra qualquer produto que tenha o simulador exibido. Use o inspetor (F12) para confirmar que o SVG renderizado bate com o que você definiu.

Outras opções de exibição relacionadas

• Exibir ícones (na seção da página do produto e da listagem) liga/desliga os SVGs por completo.
• Cor dos ícones define a cor (currentColor precisa ser usado no SVG).
• Tamanho dos ícones define o tamanho em pixels.

Veja Aparência (layout e cores) para todos os controles visuais.

Próximos passos

• Aparência (layout e cores)
• Referência de hooks
• Regras por categoria, tag ou preço