WooCommerce, il plugin di WordPress per creare un sito eCommerce, è estremamente flessibile in termini di espansione, sviluppo front-end e programmazione server-side in PHP.
In questo articolo vediamo come modificare la pagina del checkout di WooCommerce. Nello specifico vediamo come modificare i titoli contenuti in questo template.
Vediamo quindi la prima soluzione.
Indice riassuntivo
Utilizzare il filtro “gettext”
Il primo metodo per poter cambiare il contenuto di una stringa in una pagina è utilizzare il filtro di WordPress “gettext“.
Quindi andremo a effettuare una sorta di traduzione della stringa inserendo un contenuto a nostro piacere. Il nuovo contenuto non dovrà essere per forza di lingua diversa a quella attuale.
Facciamo finta che vogliamo un testo diverso nel titolo che contiene la scritta “Dettagli di fatturazione“:
Ho fatto uno screen alla pagina checkout di WooCommerce con il tema Storefront per chi se lo stesse chiedendo.
Tornando sul filo del discorso, voglio cambiare il titolo da “Dettagli di fatturazione” a “Informazioni di contatto“.
Per farlo posso usare lo snippet di codice che ho messo qui sotto:
function wc_change_billing_field_strings( $translated_text, $text, $domain ) {
// Quando incontriamo la scritta "Dettagli di fatturazione" cambia il suo contenuto
switch ( $translated_text ) {
case 'Dettagli di fatturazione':
$translated_text = __( 'Nuovo testo qui', 'woocommerce' );
break;
}
// Filtra il nuovo contenuto.
return $translated_text;
}
add_filter( 'gettext', 'wc_change_billing_field_strings', 20, 3 );Inserisci questo snippet nel file functions.php del tuo tema child o del tuo tema custom. Oppure utilizza un plugin che ti permette di inserire snippet PHP per personalizzare il comportamento del tuo sito come “Code Snippets“.
Per far funzionare questo codice a tuo piacimento devi:
- Inserire la stringa che desideri cambiare dopo la parola “case” e metterla tra doppi apici. Nel nostro caso vogliamo cambiare il contenuto della scritta ‘Dettagli di fatturazione’.
- Il nuovo contenuto che vogliamo va messo al posto della stringa ‘Nuovo testo qui’ nella funzione
__()del core di WordPress nella variabile$translated_text.
Dopo aver applicato questo codice, possiamo tornare sulla pagina checkout e osserviamo che il testo è cambiato:
Nota bene: tu puoi cambiare il contenuto da mettere nel titolo a tuo piacimento. In questo caso io ho lasciato la stringa “Nuovo testo qui” per dimostrare l’efficacia di questo metodo.
Andando oltre questo esempio, ci sono altri metodi per fare questa modifica.
Ad esempio è possibile modificare direttamente il template della pagina checkout di WooCommerce inserendo il template modificato in una cartella ( /woocommerce ) all’interno del proprio tema custom o tema child.
Parlerò di questo metodo quando aggiornerò questo articolo. Al momento il metodo che ho già illustrato è efficace per lo scopo di questo articolo.