Como Definir um Símbolo de Moeda Antes de um Campo de Item Único

Introdução

Gostaria de definir um símbolo de moeda antes de um campo de pagamento de Item Único? Por padrão, quando você usa este campo e o Tipo de Item está definido como Definido pelo Usuário, não há símbolo de moeda para exibir.

No entanto, neste tutorial, mostraremos como você pode conseguir isso usando um pequeno script.

Criando seu formulário

Para começar, crie um novo formulário e adicione seus campos.

Se precisar de ajuda para criar seu formulário, por favor, revise esta documentação útil.

Definindo o Tipo de Item

Depois de adicionar seus outros campos ao formulário, certifique-se de adicionar o campo de formulário Item Único encontrado em Campos de Pagamento dentro do construtor de formulários. Após adicionado, defina o Tipo de Item como Definido pelo Usuário.

Adicionando o snippet

Agora que os campos estão definidos, é hora de adicionar o snippet ao seu site. Para qualquer assistência sobre como e onde adicionar snippets ao seu site, por favor, revise este tutorial.

/**
 * Set a currency symbol in the Single Item payment field
 *
 * @link https://wpforms.com/developers/how-to-set-a-currency-symbol-before-a-single-item-field/
 */

function wpf_add_dollar_symbol_to_singleitem() {
    ?>
    <script>
      document.addEventListener( 'DOMContentLoaded', function() {
		  
		// Look for the form ID 3382 and the field ID 17
        var inputElement = document.querySelector( '#wpforms-3382-field_17' );
		  
		// Add left padding to create space for the dollar symbol
        inputElement.style.paddingLeft = '1em'; 
		  
		// Set background position
        inputElement.style.backgroundPosition = 'left center'; 
		  
		// Set background repeat
        inputElement.style.backgroundRepeat = 'no-repeat'; 
        
		// Define the desired padding size
        var paddingSize = '5px'; 
		  
		// dollar symbol svg
        var backgroundImage = 'url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'14\' height=\'14\' viewBox=\'0 0 12 12\'%3E%3Ctext x=\'' + paddingSize + '\' y=\'10\' font-size=\'14\' fill=\'%23000\'%3E%24%3C/text%3E%3C/svg%3E")';
		  
		// Set background image with the dollar symbol and padding
        inputElement.style.backgroundImage = backgroundImage; 
		  
      });
    </script>
    <?php
    }
    add_action('wpforms_wp_footer_end', 'wpf_add_dollar_symbol_to_singleitem', 30);

Este script procurará pelo ID do formulário 3382 e pelo ID do campo 17 e colocará, além de estilizar, um ícone SVG para o símbolo de dólar ($) no início do campo. Os estilos CSS aplicados neste script são fáceis de adaptar e alterar de acordo com suas especificações. Para saber mais sobre imagens SVG, por favor, consulte a documentação do W3C.

Agora, ao visualizar o formulário, podemos ver o símbolo de moeda dentro do campo.

E é tudo o que você precisa para definir um símbolo de moeda em um campo de pagamento de Item Único. Gostaria de definir um valor mínimo em um campo de pagamento de Item Único? Dê uma olhada no tutorial sobre Como Definir Valor Mínimo para um Campo de Preço.

Relacionado

Referência de Ação: wpforms_wp_footer_end