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 defeito, quando utiliza este campo e o Tipo de Item está definido como Definido pelo Utilizador, não há símbolo de moeda para mostrar.

No entanto, neste tutorial, vamos mostrar-lhe como pode conseguir isto usando um pequeno script.

Criar o seu formulário

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

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

Definir o Tipo de Item

Depois de adicionar os seus outros campos ao seu formulário, certifique-se de adicionar o campo de formulário Item Único encontrado em Campos de Pagamento dentro do construtor de formulários. Uma vez adicionado, defina o Tipo de Item para Definido pelo Utilizador.

Adição do trecho de código

Agora que os campos estão definidos, é hora de adicionar o trecho ao seu site. Para qualquer assistência sobre como e onde adicionar trechos ao seu site, reveja 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á o ID do formulário 3382 e o ID do campo 17 e colocará, bem como 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 às suas especificações. Para saber mais sobre imagens SVG, consulte a documentação W3C.

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

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

Relacionado

Referência de Ação: wpforms_wp_footer_end