Come Personalizzare le Etichette del Modulo di Pagamento

Introduzione

Desideri personalizzare le etichette del modulo di Pagamento rimuovendo il trattino che appare quando scegli di mostrare il prezzo dopo l'etichetta? Il comportamento predefinito dei campi di Pagamento include un trattino tra l'etichetta e il prezzo visualizzato, che potrebbe non essere sempre in linea con le tue preferenze di design.

Non temere! In questo tutorial, ti guideremo attraverso il processo di personalizzazione delle etichette dei tuoi campi di Pagamento. Sia che tu voglia eliminare del tutto il trattino o sostituirlo con un carattere diverso, ti abbiamo coperto. Scopri due metodi, senza snippet e basato su PHP, per ottenere senza sforzo la visualizzazione di etichette e prezzi che si adatta all'estetica del tuo modulo.

Creazione del modulo

Per iniziare, creeremo un modulo d'ordine standard con tutti i nostri campi obbligatori che accetterà pagamenti. Se hai bisogno di assistenza nella creazione di questo tipo di modulo, dai un'occhiata a questa utile guida.

Rimozione del Trattino

Metodo 1: Senza snippet

Come promesso, se vuoi cambiare o semplicemente rimuovere completamente il trattino ma continuare a mostrare il prezzo nel campo, digita manualmente l'etichetta esattamente come vuoi che appaia.

Noterai che per questo metodo non c'è bisogno di alcuno snippet di codice e abbiamo anche fatto in modo che Mostra prezzo dopo le etichette degli articoli sia disabilitato. Devi semplicemente digitare l'etichetta esattamente come vuoi che appaia sul tuo modulo, che può essere senza il trattino o sostituendo il trattino con i due punti, come abbiamo fatto in questo esempio.

Metodo 2: Basato su PHP

Se desideri utilizzare PHP per rimuovere o cambiare questo trattino, dovrai prima fare clic sui tuoi campi di Pagamento e nella scheda Avanzate di ciascun campo, fai clic per abilitare Mostra prezzo dopo le etichette degli articoli in modo che il modulo posizioni automaticamente la tua etichetta e il prezzo per l'articolo separati dal trattino.

Una volta salvato il modulo, è ora di aggiungere lo snippet. Copia e incolla questo snippet sul tuo 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 ti serve per personalizzare le etichette del modulo di pagamento! Desideri apportare questa modifica anche per le notifiche via email? Dai un'occhiata al nostro articolo su Come cambiare il delimitatore di pagamento all'interno delle notifiche email.

Correlati

Riferimento Azione: wpforms_wp_footer_end

FAQ

D: Cosa dovrei usare se non volessi alcun separatore?

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

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

Noterai che l'unica modifica con questi snippet è questa riga replace(' – ', ' : '); in questa replace(' – ', ' ');, qui stiamo solo lasciando un singolo spazio come separatore.