Come impostare un simbolo di valuta prima di un campo per singolo articolo

Introduzione

Vuoi impostare un simbolo di valuta prima di un campo di pagamento Articolo Singolo? Per impostazione predefinita, quando utilizzi questo campo e il Tipo di articolo è impostato su Definito dall'utente, non c'è alcun simbolo di valuta da mostrare.

Tuttavia, in questo tutorial, ti mostreremo come puoi ottenerlo utilizzando un piccolo script.

Creazione del tuo modulo

Per iniziare, crea un nuovo modulo e aggiungi i tuoi campi.

Se hai bisogno di aiuto nella creazione del tuo modulo, ti preghiamo di consultare questa utile documentazione.

Impostazione del Tipo di Articolo

Una volta aggiunti gli altri campi al tuo modulo, assicurati di aggiungere il campo modulo Articolo Singolo che si trova sotto Campi di pagamento all'interno del costruttore di moduli. Una volta aggiunto, imposta il Tipo di articolo su Definito dall'utente.

Aggiunta dello snippet

Ora che i campi sono impostati, è ora di aggiungere lo snippet al tuo sito. Per qualsiasi assistenza su come e dove aggiungere snippet al tuo sito, ti preghiamo di consultare questo 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);

Questo script cercherà l'ID del modulo 3382 e l'ID del campo 17 e posizionerà e stilizzerà un'icona SVG per il simbolo del dollaro ($) all'inizio del campo. Gli stili CSS applicati in questo script sono facili da adattare e modificare secondo le tue specifiche. Per saperne di più sulle immagini SVG, ti preghiamo di consultare la documentazione W3C.

Ora, quando visualizziamo il modulo, possiamo vedere il simbolo di valuta all'interno del campo.

E questo è tutto ciò che ti serve per impostare un simbolo di valuta su un campo di pagamento Articolo Singolo. Vuoi impostare un importo minimo su un campo di pagamento Articolo Singolo? Dai un'occhiata al tutorial su Come impostare l'importo minimo per un campo prezzo.

Correlati

Riferimento Azione: wpforms_wp_footer_end