Woocommerce personalizza il tuo e-commerce

Woocommerce offre diverse possibilità di personalizzazione sia dal punto di vista del ciclo di vita degli ordini e dei prodotti che da quello della grafica.

Credo che ormai tutti siano concordi che quando si pensa ad un sito web è assolutamente necessario pensare prima di tutto a come il sito apparirà su dispositivi mobile quali smartphone e tablet: gran parte della popolazione del mega continente di internet naviga quasi esclusivamente su questa tipologia di dispositivi ed è quindi prioritario pensare alla loro user experience, e quindi effettuare una progettazione mobile first.

Se le persone navigano preferibilmente da dispositivi mobile, di certo gradiranno anche utilizzarli per poter effettuare i loro acquisti.

Ipotizziamo a questo punto di voler creare il nostro e-commerce per vendere lavoretti e centrini realizzati dalla nonna sul web: per risparmiare qualcosa evitiamo di rivolgerci ad un grafico per disegnare il nostro tema responsive e decidiamo di installare Woocommerce per non preoccuparci di sviluppare chissà quale complessa soluzione software.

Felici inseriamo i lavoretti della nonna comprensivi di foto dettagliate ed effettuiamo i nostri primi test sul nostro desktop. Sempre più entusiasti prendiamo il nostro smartphone iPhone o Android e cerchiamo di verificare come il nostro e-commerce (in realtà è della nonna!!!) appaia nel minuscolo browser del nostro dispositivo: ed è lì che inizia il nostro dramma.

Scopriamo così che i template di Woocommerce non sono responsive e che distruggono in un sol colpo tutte le nostre meravigliose interfacce e la tanto ricercata user experience.

Cerchiamo quindi di correre ai ripari!

Woocommerce offre la possibilità di modificare, estendere, migliorare ed in alcuni casi riprogettare le sue interfacce semplicemente sovrascrivendo i template nel nostro tema.

Ipotizzando che il nostro tema si chiami CentrinoNonna, possiamo anche dire che la struttura del nostro tema possa essere presumibilmente qualcosa del genere

  • wp-content
    • themes
      • CentrinoNonna
        • archive.php
        • index.php
        • page.php
        • single.php
        • style.css

Per sovrascrivere i file del tema di woocommerce è sufficiente creare, all’interno del proprio tema, una cartella denominata woocommerce, ma ovviamente non basta questo.
Esplorando con attenzione il plugin di woocommerce presente in
wp-content/plugins/woocommerce
troveremo una cartella template che contiene tutti i file utilizzati per creare l’interfaccia di woocommerce.
Individuato il file che contiene la modifica che vogliamo realizzare, ci sarà sufficiente copiarlo nella nuova cartella woocommerce contenuta nel nostro tema e applicare le modifiche realizzate.
Detto così potrebbe risultare difficile, quindi conviene applicare un esempio reale.
L’obiettivo di questo tutorial sarà davvero semplice e ci sarà utile per comprendere le possibilità offerte dal theming di woocommerce: vogliamo modificare la stringa di benvenuto che ci si presenta quando ci rechiamo nella pagina del nostro account.
Tutte le stringhe di woocommerce sono disponibili nei file di traduzione quindi potrebbe essere facile, nel caso in cui si voglia effettuare una modifica in una lingua diversa dall’inglese, truccare il sistema e modificare esclusivamente la traduzione, ma purtroppo non è questa la mia politica e spero neanche la vostra: vi ricordo che è sempre meglio estendere un software piuttosto che modificarlo brutalmente rendendolo non più manutenibile.
La prima cosa da fare è creare nel nostro tema una cartella woocommerce che conterrà i file da estendere la struttura allora risulterà la seguente

  • wp-content
    • themes
      • CentrinoNonna
        • woocommerce
        • archive.php
        • index.php
        • page.php
        • single.php
        • style.css

Il file che vogliamo modificare è my-account.php disponibile nella cartella plugins/woocommerce/templates/myaccount. Ricreiamo quindi la medesima struttura, a partire da templates copiando anche il file finale. La struttura completa nel nostro tema sarà la seguente:

  • wp-content
    • themes
      • CentrinoNonna
        • woocommerce
          • myaccount
            • my-account.php
        • archive.php
        • index.php
        • page.php
        • single.php
        • style.css

Non ci resta altro che effettuare la modifica che desideriamo.
La parte di codice da sostituire è la seguente

<p class="myaccount_user">
	<?php
	printf(
		__( 'Hello <strong>%1$s</strong> (not %1$s? <a href="%2$s">Sign out</a>).', 'woocommerce' ) . ' ',
		$current_user->display_name,
		wc_get_endpoint_url( 'customer-logout', '', wc_get_page_permalink( 'myaccount' ) )
	);

	printf( __( 'From your account dashboard you can view your recent orders, manage your shipping and billing addresses and <a href="%s">edit your password and account details</a>.', 'woocommerce' ),
		wc_customer_edit_account_url()
	);
	?>
</p>

Quello che vogliamo fare è sostituire il messaggio
Hello Giorgio (not Giorgio? Sign out).
con uno più adatto al sito della nonna come
Ciao Giorgio dalla tua nonnina (Giorgio non sei tu? Se non sei tu, non posso invitarti a pranzo).
Il risultato sarà quindi

<p class="myaccount_user">
	<?php
	printf(
		'Ciao <strong>%1$s</strong> (%1$s non sei tu? <a href="%2$s">Se non sei tu, non posso invitarti a pranzo</a>). ',
		$current_user->display_name,
		wc_get_endpoint_url( 'customer-logout', '', wc_get_page_permalink( 'myaccount' ) )
	);

	printf( __( 'From your account dashboard you can view your recent orders, manage your shipping and billing addresses and <a href="%s">edit your password and account details</a>.', 'woocommerce' ),
		wc_customer_edit_account_url()
	);
	?>
</p>

Avremmo anche potuto creare questa frase in inglese e poi inserirla in italiano nei file .po e .mo, ma vogliamo solo fare un esempio di estensione dei temi di woocommerce.
A questo punto andiamo a verificare che il nostro messaggio appaia correttamente nella pagina dell’account.


Il risultato è proprio quello che desideravamo, se non consideriamo, come detto prima, che sarebbe necessario regolarsi opportunamente con le traduzioni, ma abbiamo ottenuto il nostro risultato desiderato, quindi Ottimo lavoro ancora una volta.

4 Comments

  • Anche questo è un bellissimo articolo.

    Ma utilizzando la tua guida non si rischia di perdere tutto al prossimo aggiornamento del plugin woocommerce ?

    Come avrai capito ho le idee un po’ confuse in merito….

    Attualmente io sto utilizzando il tema X con lo stack renew child.

    Come posso nel mio caso metter in pratica quanto riportato in questo tuo articolo ?

    Ho commentato anche il tuo articolo in merito alla Partita Iva e Codice Fiscale, dove si applicano le stesse problematiche qua descritte.

    Grazie per quanto mi farai sapere.

    Roberto

  • Ciao Giorgio avrei bisogno del tuo aiuto. Ho creato un e-commerce con woocommerce, ma non riesco a modificare la disposizione degli elementi , in particolare vorrei spostare il testo nella categoria di prodotti e posizionarlo sotto gli articoli anzicchè sopra. puoi aiutarmi?
    grazie Pia

    • Ciao Pia,
      avrei bisogno di maggiori elementi per aiutarti, come ad esempio il tema utilizzato e la versione di woocommerce della tua installazione.
      Scrivi sul form di contatto, così potremo confrontarci direttamente via mail e cercherò di aiutarti.

      Ciao

  • Ciao Giorgio e complimenti!! per chi come me è alle prime armi sei una benedizione! Stò leggendo tutti i tuoi articoli 🙂
    Ho creato un ecommerce e anch’io avrei bisogno di una mano del tipo…il mio sito solo su internet explorer presenta un problema il logo lo sgrana e anche il font nel main menu è diverso da quello che visualizzo sua su chrome che sul mobile…e non riesco a venirne a capo,,,,
    Adesso sto’ cercando di sistemare un po’ il mio account su woocommerce…spero di non fare troppi danni :-)…cmq spero in una tua risposta e grazie ancora per i tuoi preziosi articoli!.

Commenta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *