Cómo personalizar las etiquetas del formulario de pago

Introducción

¿Te gustaría personalizar las etiquetas del formulario de Pago eliminando el guion que aparece cuando eliges mostrar el precio después de la etiqueta? El comportamiento predeterminado de los campos de Pago incluye un guion entre la etiqueta y el precio mostrado, lo que no siempre puede alinearse con tus preferencias de diseño.

¡No temas! En este tutorial, te guiaremos a través del proceso de personalización de las etiquetas de tus campos de Pago. Ya sea que desees eliminar el guion por completo o reemplazarlo con un carácter diferente, te cubrimos. Descubre dos métodos, sin fragmentos y basado en PHP, para lograr sin esfuerzo la visualización de etiquetas y precios que se adapte a la estética de tu formulario.

Creación del formulario

Para empezar, vamos a crear un formulario de pedido estándar con todos nuestros campos requeridos que aceptará pagos. Si necesitas ayuda para crear este tipo de formulario, por favor consulta esta útil guía.

Eliminar el guion

Método 1: Sin fragmentos

Como prometimos, si deseas cambiar o simplemente eliminar el guion por completo pero aún así mostrar el precio en el campo, escribe manualmente la etiqueta exactamente como deseas que aparezca.

Notarás que para este método, no se necesita ningún fragmento de código y también nos hemos asegurado de que la opción Mostrar precio después de las etiquetas de los artículos esté deshabilitada. Simplemente escribe la etiqueta exactamente como deseas que aparezca en tu formulario, que puede ser sin el guion o reemplazando el guion con dos puntos, como hicimos en este ejemplo.

Método 2: Basado en PHP

Si deseas usar PHP para eliminar o cambiar este guion, primero deberás hacer clic en tus campos de Pago y en la pestaña Avanzado de cada campo, haz clic para habilitar Mostrar precio después de las etiquetas de los artículos para que el formulario coloque automáticamente tu etiqueta y precio para el artículo separados por el guion.

Una vez guardado el formulario, es hora de agregar el fragmento. Simplemente copia y pega este fragmento en tu sitio.

/**
 * Remove or change hyphen payment form labels
 *
 * @link https://wpforms.com/developers/how-to-customize-payment-form-labels/
 */

function wpf_remove_hyphen_separator() {
    ?>
    <script>
        document.addEventListener( 'DOMContentLoaded', function() {

			// The querySelectorAll targets all Payment fields:
			// .wpforms-image-choices-label is for Multiple / Checkbox Items with image choices turned on
			// .wpforms-icon-choices-label is for Multiple / Checkbox Items with icon choices turned on
			// .wpforms-field-payment-checkbox input + .wpforms-field-label-inline is for Checkbox Items without icon or image choices - in this case we know the label follows the checkbox input which allows us to target it only for this case
			// .wpforms-field-payment-multiple input + .wpforms-field-label-inline is for Multiple Items without icon or image choices - same as above
			// .wpforms-field-payment-select option is for Dropdown Items (both Classic and Modern)

			var labelElements = document.querySelectorAll( ".wpforms-image-choices-label, .wpforms-icon-choices-label, .wpforms-field-payment-checkbox input + .wpforms-field-label-inline, .wpforms-field-payment-multiple input + .wpforms-field-label-inline, .wpforms-field-payment-select option" );
            labelElements.forEach(function(labelElement) {
                labelElement.textContent = labelElement.textContent.replace(' – ', ' : ');
            });
        });
    </script>
    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_remove_hyphen_separator', 10 );

Este fragmento buscará cualquier campo de pago y reemplazará el guion ( – ) con dos puntos ( : ).

¡Y eso es todo lo que necesitas para personalizar las etiquetas del formulario de pago! ¿Te gustaría hacer este cambio también para las notificaciones por correo electrónico? Echa un vistazo a nuestro artículo sobre Cómo cambiar el delimitador de pago dentro de las notificaciones por correo electrónico.

Relacionado

Referencia de acción: wpforms_wp_footer_end

Preguntas frecuentes

P: ¿Qué usaría si no quisiera ningún separador?

R: Para dejar solo un espacio entre la etiqueta y el precio, usa este fragmento en su lugar.

/**
 * Remove or change hyphen payment form labels
 *
 * @link https://wpforms.com/developers/how-to-customize-payment-form-labels/
 */

function wpf_remove_hyphen_separator() {
    ?>
    <script>
        document.addEventListener( 'DOMContentLoaded', function() {

			// The querySelectorAll targets all Payment fields:
			// .wpforms-image-choices-label is for Multiple / Checkbox Items with image choices turned on
			// .wpforms-icon-choices-label is for Multiple / Checkbox Items with icon choices turned on
			// .wpforms-field-payment-checkbox input + .wpforms-field-label-inline is for Checkbox Items without icon or image choices - in this case we know the label follows the checkbox input which allows us to target it only for this case
			// .wpforms-field-payment-multiple input + .wpforms-field-label-inline is for Multiple Items without icon or image choices - same as above
			// .wpforms-field-payment-select option is for Dropdown Items (both Classic and Modern)

			var labelElements = document.querySelectorAll( ".wpforms-image-choices-label, .wpforms-icon-choices-label, .wpforms-field-payment-checkbox input + .wpforms-field-label-inline, .wpforms-field-payment-multiple input + .wpforms-field-label-inline, .wpforms-field-payment-select option" );
            labelElements.forEach(function(labelElement) {
                labelElement.textContent = labelElement.textContent.replace(' – ', '  ');
            });
        });
    </script>
    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_remove_hyphen_separator', 10 );

Notarás que el único cambio con estos fragmentos es esta línea replace(' – ', ' : '); por esta replace(' – ', ' ');, aquí solo dejamos un solo espacio como separador.