Como Personalizar Rótulos do Formulário de Pagamento

Introdução

Gostaria de personalizar os rótulos do formulário de Pagamento removendo o hífen que aparece ao escolher exibir o preço após o rótulo? O comportamento padrão dos campos de Pagamento inclui um hífen entre o rótulo e o preço exibido, o que pode nem sempre se alinhar com suas preferências de design.

Não tema! Neste tutorial, vamos guiá-lo através do processo de personalização dos rótulos dos seus campos de Pagamento. Se você deseja eliminar o hífen completamente ou substituí-lo por um caractere diferente, nós temos o que você precisa. Descubra dois métodos — sem trechos de código e baseado em PHP — para obter sem esforço a exibição de rótulo e preço que se adapta à estética do seu formulário.

Criando o formulário

Para começar, vamos criar um formulário de pedido padrão com todos os nossos campos obrigatórios que aceitará pagamentos. Se precisar de alguma assistência na criação deste tipo de formulário, por favor, confira este guia útil.

Removendo o Hífen

Método 1: Sem trechos de código

Como prometido, se você quiser alterar ou apenas remover completamente o hífen, mas ainda assim exibir o preço no campo, digite manualmente o rótulo exatamente como você deseja que ele apareça.

Você notará que, para este método, não há necessidade de nenhum trecho de código e também garantimos que Exibir preço após os rótulos dos itens esteja desativado. Você simplesmente digita o rótulo exatamente como deseja que ele apareça em seu formulário, o que pode ser sem o hífen ou substituindo o hífen por dois pontos, como fizemos neste exemplo.

Método 2: Baseado em PHP

Se você quiser usar PHP para remover ou alterar este hífen, primeiro precisará clicar nos seus campos de Pagamento e, na guia Avançado de cada campo, clicar para ativar Exibir preço após os rótulos dos itens para que o formulário coloque automaticamente seu rótulo e preço para o item separados pelo hífen.

Depois que o formulário for salvo, é hora de adicionar o trecho de código. Basta copiar e colar este trecho em seu site.

/**
 * Remove or change hyphen payment form labels
 *
 * @link https://wpforms.com/developers/how-to-customize-payment-form-labels/
 */

function wpf_remove_hyphen_separator() {
    ?>
    <script>
        document.addEventListener( 'DOMContentLoaded', function() {

			// The querySelectorAll targets all Payment fields:
			// .wpforms-image-choices-label is for Multiple / Checkbox Items with image choices turned on
			// .wpforms-icon-choices-label is for Multiple / Checkbox Items with icon choices turned on
			// .wpforms-field-payment-checkbox input + .wpforms-field-label-inline is for Checkbox Items without icon or image choices - in this case we know the label follows the checkbox input which allows us to target it only for this case
			// .wpforms-field-payment-multiple input + .wpforms-field-label-inline is for Multiple Items without icon or image choices - same as above
			// .wpforms-field-payment-select option is for Dropdown Items (both Classic and Modern)

			var labelElements = document.querySelectorAll( ".wpforms-image-choices-label, .wpforms-icon-choices-label, .wpforms-field-payment-checkbox input + .wpforms-field-label-inline, .wpforms-field-payment-multiple input + .wpforms-field-label-inline, .wpforms-field-payment-select option" );
            labelElements.forEach(function(labelElement) {
                labelElement.textContent = labelElement.textContent.replace(' – ', ' : ');
            });
        });
    </script>
    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_remove_hyphen_separator', 10 );

Este trecho de código procurará qualquer campo de pagamento e substituirá o hífen ( – ) por dois pontos ( : ).

E é tudo o que você precisa para personalizar os rótulos do formulário de pagamento! Gostaria também de fazer essa alteração para notificações por e-mail? Dê uma olhada em nosso artigo sobre Como Alterar o Delimitador de Pagamento Dentro das Notificações por E-mail.

Relacionado

Referência de Ação: wpforms_wp_footer_end

Perguntas Frequentes

P: O que eu usaria se não quisesse nenhum separador?

R: Para deixar apenas um espaço entre o rótulo e o preço, use este trecho de código em vez disso.

/**
 * Remove or change hyphen payment form labels
 *
 * @link https://wpforms.com/developers/how-to-customize-payment-form-labels/
 */

function wpf_remove_hyphen_separator() {
    ?>
    <script>
        document.addEventListener( 'DOMContentLoaded', function() {

			// The querySelectorAll targets all Payment fields:
			// .wpforms-image-choices-label is for Multiple / Checkbox Items with image choices turned on
			// .wpforms-icon-choices-label is for Multiple / Checkbox Items with icon choices turned on
			// .wpforms-field-payment-checkbox input + .wpforms-field-label-inline is for Checkbox Items without icon or image choices - in this case we know the label follows the checkbox input which allows us to target it only for this case
			// .wpforms-field-payment-multiple input + .wpforms-field-label-inline is for Multiple Items without icon or image choices - same as above
			// .wpforms-field-payment-select option is for Dropdown Items (both Classic and Modern)

			var labelElements = document.querySelectorAll( ".wpforms-image-choices-label, .wpforms-icon-choices-label, .wpforms-field-payment-checkbox input + .wpforms-field-label-inline, .wpforms-field-payment-multiple input + .wpforms-field-label-inline, .wpforms-field-payment-select option" );
            labelElements.forEach(function(labelElement) {
                labelElement.textContent = labelElement.textContent.replace(' – ', '  ');
            });
        });
    </script>
    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_remove_hyphen_separator', 10 );

Você notará que a única alteração nesses trechos de código é esta linha replace(' – ', ' : '); para esta replace(' – ', ' ');, aqui estamos apenas deixando um único espaço como separador.