Personalizando aparência

Personalize o ícone, o CSS e a estrutura do formulário de seleção de planos no checkout.

Ícone do método

Por padrão o método aparece sem ícone. Use o filtro woocommerce_wc_ticket_installments_icon pra adicionar um:

add_filter( 'woocommerce_wc_ticket_installments_icon', function() {
    return '<img src="' . get_stylesheet_directory_uri() . '/assets/boleto.png" alt="Boleto" />';
});

A função pode retornar uma URL crua (vira <img src="..."> automaticamente pelo WooCommerce) ou HTML completo.

CSS padrão dos botões de rádio

O template checkout-form.php injeta um bloco <style> inline com regras pros radios:

#wc-ticket-installments-form input { display: none; }
#wc-ticket-installments-form input + label { display: block; cursor: pointer; }
#wc-ticket-installments-form input + label .custom-checkbox {
    width: 15px; height: 15px; border: 1px solid #000;
}
#wc-ticket-installments-form input:checked + label .custom-checkbox {
    background: #000;
}

A intenção é esconder o radio nativo e usar .custom-checkbox como visual da seleção.

Desabilitando o CSS padrão

Pra usar o estilo do seu tema sem conflito:

add_filter( 'woocommerce_wc_ticket_gateway_use_css', '__return_false' );

Com isso o <style> inline some, e os radios voltam a renderizar com a aparência nativa do navegador. Aplique seu CSS no style.css do tema.

Customizando os radios

Estrutura HTML do form (gerada pelo template):

<div id="wc-ticket-installments-form">
  <input type="radio" name="ticket_installments_option" id="ticket_installments_option[3X]" value="3X" checked />
  <label for="ticket_installments_option[3X]">
    <span class="custom-checkbox"></span>3x de R$ 100,00
  </label>
  ...
</div>

Exemplo de CSS pra cards selecionáveis:

#wc-ticket-installments-form input { display: none; }

#wc-ticket-installments-form input + label {
    display: block;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

#wc-ticket-installments-form input:checked + label {
    border-color: #111;
    background: #f7f7f7;
}

#wc-ticket-installments-form input + label .custom-checkbox { display: none; }

Modificando o template

O checkout-form.php é resolvido via wc_get_template() — você pode sobrescrever copiando o arquivo pra:

yourtheme/woocommerce/checkout-form.php

A partir desse caminho o WooCommerce passa a usar o template do tema em vez do plugin. Útil quando você precisa mudar a estrutura HTML (ex.: usar <div> em vez de <input> + <label>).

Mudando o texto dos planos sem editar a tabela

Use woocommerce_wc_ticket_gateway_installments_available pra reescrever a description de cada plano em runtime — útil pra adicionar prefixos, sufixos, ou regras condicionais (ex.: tarja "promocional" em determinados códigos).