Cómo establecer un símbolo de moneda antes de un campo de artículo único

Introducción

¿Le gustaría establecer un símbolo de moneda antes de un campo de pago de Artículo Único? Por defecto, cuando utiliza este campo y el Tipo de artículo se establece en Definido por el usuario, no hay ningún símbolo de moneda que mostrar.

Sin embargo, en este tutorial, le mostraremos cómo puede lograr esto usando un pequeño script.

Creación de su formulario

Para empezar, cree un nuevo formulario y agregue sus campos.

Si necesita ayuda para crear su formulario, revise esta útil documentación.

Establecer el Tipo de artículo

Una vez que haya agregado sus otros campos a su formulario, asegúrese de agregar el campo de formulario Artículo Único que se encuentra en Campos de pago dentro del constructor de formularios. Una vez agregado, establezca el Tipo de artículo en Definido por el usuario.

Añadir el fragmento

Ahora que los campos están configurados, es hora de agregar el fragmento a su sitio. Para cualquier ayuda sobre cómo y dónde agregar fragmentos a su sitio, 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 buscará el ID del formulario 3382 y el ID del campo 17 y colocará y estilizará un icono SVG para el símbolo del dólar ($) al principio del campo. Los estilos CSS que se aplican en este script son fáciles de adaptar y cambiar a sus especificaciones. Para obtener más información sobre las imágenes SVG, consulte la documentación de W3C.

Ahora, cuando veamos el formulario, podremos ver el símbolo de moneda dentro del campo.

Y eso es todo lo que necesita para establecer un símbolo de moneda en un campo de pago de Artículo Único. ¿Le gustaría establecer una cantidad mínima en un campo de pago de Artículo Único? Eche un vistazo al tutorial sobre Cómo establecer una cantidad mínima para un campo de precio.

Relacionado

Referencia de acción: wpforms_wp_footer_end