Como Personalizar os 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 quando escolhe 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 nem sempre estar de acordo com as suas preferências de design.

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

Criação do formulário

Para começar, vamos criar um formulário de encomenda 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, consulte este guia útil.

Remover o Hífen

Método 1: Sem fragmentos de código

Conforme prometido, se quiser alterar ou simplesmente 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.

Notará que, para este método, não é necessário nenhum fragmento de código e também nos certificámos de que Mostrar preço após os rótulos dos itens está desativado. Basta digitar o rótulo exatamente como deseja que ele apareça no 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 pretender usar PHP para remover ou alterar este hífen, primeiro terá de clicar nos seus campos de Pagamento e, no separador Avançadas de cada campo, clicar para ativar Mostrar preço após os rótulos dos itens para que o formulário coloque automaticamente o seu rótulo e preço para o item separados pelo hífen.

Depois de o formulário ser guardado, é hora de adicionar o fragmento de código. Basta copiar e colar este fragmento no 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 fragmento de código procurará qualquer campo de pagamento e substituirá o hífen ( – ) por dois pontos ( : ).

E é tudo o que precisa para personalizar os rótulos do formulário de pagamento! Gostaria também de fazer esta alteração para notificações por e-mail? Dê uma vista de olhos ao 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

FAQ

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

R: Para deixar apenas um espaço entre o rótulo e o preço, use este fragmento 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 );

Notará que a única alteração nestes fragmentos de código é esta linha replace(' – ', ' : '); para esta replace(' – ', ' ');, aqui estamos apenas a deixar um único espaço como separador.