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 individual? Por defeito, quando utiliza este campo e o Tipo de item está definido como Definido pelo utilizador, não é apresentado qualquer símbolo de moeda.

No entanto, neste tutorial, vamos mostrar-lhe como pode conseguir isto utilizando 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, consulte esta documentação útil.

Definir o tipo de item

Depois de adicionar os outros campos ao formulário, certifique-se de que adiciona o campo de formulário Item único que se encontra nos Campos de pagamento dentro do criador de formulários. Depois de adicionado, defina o Tipo de item como Definido pelo utilizador.

Adicionar o snippet

Agora que os campos estão definidos, é hora de adicionar o snippet ao seu site. Para obter ajuda sobre como e onde adicionar snippets ao seu site, consulte 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 de formulário 3382 e o ID de campo 17 e colocará, bem como estilizará um ícone SVG para o símbolo do dólar ($) no início do campo. Os estilos CSS que são aplicados neste script são fáceis de adaptar e alterar de acordo com as suas especificações. Para saber mais sobre imagens SVG, consulte a documentação do W3C.

Agora, quando visualizamos o formulário, podemos ver o símbolo da moeda dentro do campo.

E isto é tudo o que precisa para definir um símbolo de moeda num campo de pagamento de Item individual. Gostaria de definir um valor mínimo num campo de pagamento de Item único? Veja o tutorial sobre Como definir o valor mínimo para um campo de preço.

Relacionadas

Referência da ação: wpforms_wp_footer_end