Come personalizzare le etichette dei moduli di pagamento

Introduzione

Si desidera personalizzare le etichette dei moduli di pagamento eliminando il trattino che appare quando si sceglie di mostrare il prezzo dopo l'etichetta? Il comportamento predefinito dei campi di pagamento prevede un trattino tra l'etichetta e il prezzo visualizzato, che potrebbe non essere sempre in linea con le vostre preferenze di progettazione.

Non temete! In questo tutorial vi guideremo attraverso il processo di personalizzazione delle etichette del campo Pagamento. Sia che vogliate eliminare del tutto il trattino o sostituirlo con un carattere diverso, abbiamo pensato a voi. Scoprite due metodi, uno privo di frammenti e l'altro basato su PHP, per ottenere senza sforzo la visualizzazione dell'etichetta e del prezzo più adatta all'estetica del vostro modulo.

Creazione del modulo

Per iniziare, creeremo un modulo d'ordine standard con tutti i campi obbligatori che accetti i pagamenti. Se avete bisogno di assistenza per creare questo tipo di modulo, consultate questa utile guida.

Rimozione del trattino

Metodo 1: Senza frammenti

Come promesso, se si desidera modificare o rimuovere completamente il trattino, ma continuare a visualizzare il prezzo nel campo, è necessario digitare manualmente l'etichetta esattamente come si desidera che appaia.

Si noterà che per questo metodo non è necessario alcuno snippet di codice e abbiamo anche fatto in modo che l'opzione Mostra prezzo dopo le etichette degli articoli sia disattivata. È sufficiente digitare l'etichetta esattamente come si desidera che appaia nel modulo, ad esempio senza trattino o sostituendo il trattino con i due punti, come abbiamo fatto in questo esempio.

Metodo 2: basato su PHP

Se si desidera utilizzare PHP per rimuovere o modificare il trattino, occorre innanzitutto fare clic sui campi di pagamento e, nella scheda Avanzate di ciascun campo, fare clic su Mostra prezzo dopo l'etichetta dell'articolo, in modo che il modulo inserisca automaticamente l'etichetta e il prezzo dell'articolo separati dal trattino.

Una volta salvato il modulo, è il momento di aggiungere lo snippet. Basta copiare e incollare questo snippet sul vostro sito.

/**
 * 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 );

Questo snippet cercherà qualsiasi campo di pagamento e sostituirà il trattino ( - ) con i due punti ( : ).

E questo è tutto ciò che serve per personalizzare le etichette dei moduli di pagamento! Volete apportare questa modifica anche alle notifiche via e-mail? Date un'occhiata al nostro articolo su Come modificare il delimitatore di pagamento nelle notifiche e-mail.

Correlato

Riferimento azione: wpforms_wp_footer_end

FAQ

D: Cosa potrei usare se non volessi un separatore?

R: Per lasciare solo uno spazio tra l'etichetta e il prezzo, utilizzare questo frammento.

/**
 * 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 );

Si noterà che l'unica modifica apportata a questo snippet è questa riga replace(' – ', ' : '); a questo replace(' – ', ' ');Qui lasciamo solo un singolo spazio per il separatore.