Como personalizar os rótulos dos formulários de pagamento

Introdução

Você gostaria de personalizar os rótulos do formulário de pagamento removendo o hífen que aparece quando você opta por mostrar 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 não estar sempre alinhado com suas preferências de design.

Não tenha medo! Neste tutorial, nós o orientaremos no processo de personalização dos rótulos do campo Payment. Não importa se você deseja eliminar completamente o hífen ou substituí-lo por um caractere diferente, temos tudo o que você precisa. Descubra dois métodos - sem snippet e com base em PHP - para obter sem esforço o rótulo e a exibição de preço que se adequam à estética de 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ão pagamentos. Se precisar de ajuda para criar esse tipo de formulário, consulte este guia útil.

Removendo o hífen

Método 1: Sem snippets

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

Você notará que, para esse método, não há necessidade de nenhum trecho de código e também nos certificamos de que a opção Mostrar preço após os rótulos dos itens esteja desativada. Basta digitar o rótulo exatamente como deseja que ele apareça no formulário, 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 quiser usar o PHP para remover ou alterar esse hífen, primeiro você precisará clicar nos campos de pagamento e, na guia Advanced (Avançado ) de cada campo, clicar para ativar a opção Show price after item labels (Mostrar preço após rótulos de itens ) para que o formulário coloque automaticamente o rótulo e o preço do item separados pelo hífen.

Depois que o formulário for salvo, é hora de adicionar o snippet. Basta copiar e colar esse snippet 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 );

Esse snippet procurará qualquer campo de pagamento e substituirá o hífen ( - ) por dois pontos ( : ).

E isso é tudo o que você precisa para personalizar as etiquetas do formulário de pagamento! Gostaria de fazer essa alteração também nas 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 da ação: wpforms_wp_footer_end

PERGUNTAS FREQUENTES

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

R: Para deixar apenas um espaço entre o rótulo e o preço, use este snippet.

/**
 * 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 é esta linha replace(' – ', ' : '); para isso replace(' – ', ' ');Aqui estamos deixando apenas um único espaço para o separador.