Guida completa agli shortcode di WooCommerce

WooCommerce è il principale plugin di ecommerce per WordPress, che permette a milioni di aziende di trasformare i loro siti web in solidi negozi online. Tuttavia, molte persone non conoscono i suoi shortcode.

Questa guida spiega tutto quello che c’è da sapere sugli shortcode di WooCommerce, dagli shortcode essenziali per visualizzare i prodotti e gestire i carrelli alle personalizzazioni avanzate per un’esperienza utente su misura.

Scopriamo come questi piccoli frammenti di codice possono avere un impatto significativo su un sito di e-commerce.

Cosa sono gli shortcode?

Gli shortcode sono stati introdotti in WordPress 2.5 nel 2008. Sono piccoli pezzi di codice racchiusi tra parentesi quadre come questo: [shortcode]. Agiscono come placeholder che indicano a WordPress di eseguire una funzione specifica o di visualizzare determinati contenuti in modo dinamico.

Ad esempio, invece di codificare manualmente una complessa griglia di prodotti, potete utilizzare uno shortcode per crearla e visualizzarla istantaneamente sul vostro sito web. In questo modo si risparmia tempo e si riduce il rischio di errori, rendendo più facile la manutenzione e l’aggiornamento del sito.

Nel corso degli anni gli shortcode si sono evoluti, diventando sempre più potenti e versatili. WooCommerce sfrutta questa caratteristica e offre una serie di shortcode specificamente pensati per le funzionalità dell’e-commerce.

Come iniziare con gli shortcode di WooCommerce

Per utilizzare gli shortcode di WooCommerce nel vostro sito WordPress, assicuratevi che il plugin WooCommerce sia installato e attivato.

Per farlo, accedete alla bacheca di WordPress, andate su Plugin > Aggiungi nuovo e cercate “WooCommerce”. Successivamente, fate clic su Installa ora sul plugin WooCommerce e attivatelo.

Infine, potete seguire la procedura di configurazione guidata di WooCommerce per configurare le impostazioni di base come i dettagli del negozio, i metodi di pagamento e le opzioni di spedizione.

Quando installate il plugin WooCommerce, il vostro sito WordPress viene aggiornato automaticamente con le pagine Carrello, Checkout e Il mio account. Tuttavia, potete fare ancora di più con i vostri prodotti e questo è ciò che vedremo con gli shortcode.

La sintassi di base degli shortcode

Gli shortcode di WooCommerce spesso includono attributi aggiuntivi per personalizzare il loro output. Ecco la struttura di base:

[shortcode attribute1="value1" attribute2="value2"]

Ad esempio, lo shortcode [products limit="4" columns="2"] mostra quattro prodotti in un layout a due colonne.

Come aggiungere gli shortcode nei post, nelle pagine e nei widget

Gli shortcode possono essere aggiunti praticamente ovunque in WordPress. Potete aggiungerli a un post o a una pagina semplicemente digitandoli o incollandoli in qualsiasi editor di testo all’interno di WordPress o in un blocco di shortcode se utilizzate Gutenberg o un qualsiasi page builder.

Per questa guida, utilizziamo Gutenberg:

1. Andate su Post o Pagine nella bacheca di WordPress.
2. Aprite il post/pagina in cui volete aggiungere lo shortcode.
3. Cliccate sull’icona + per aggiungere un nuovo blocco.

   

4. Cercate e selezionate il blocco Shortcode.
5. Incollate il vostro shortcode nel blocco.

Ad esempio, supponiamo che vogliate visualizzare una griglia con gli ultimi prodotti sulla vostra homepage. Utilizzando l’editor dei blocchi, inserite lo shortcode: [products limit="3" columns="3"] e aggiornate o pubblicate la pagina.

In questo modo si creerà una griglia con tre prodotti visualizzati in una colonna, offrendo un modo dinamico ed elegante per mostrare le ultime offerte.

Potete anche aggiungere shortcode ai widget navigando in Aspetto > Widget. Aggiungete un widget di testo nell’area widget desiderata (barra laterale, footer, ecc.). Inserite il vostro shortcode nella casella di testo all’interno del widget e salvate il widget.

Gli shortcode essenziali di WooCommerce

WooCommerce offre una serie di shortcode che permettono di visualizzare i prodotti, gestire il carrello e migliorare il processo di pagamento.

Scopriamo gli shortcode WooCommerce più essenziali, i loro attributi e gli esempi dettagliati che vi aiuteranno a utilizzarli efficacemente nel vostro negozio.

Shortcode per la visualizzazione dei prodotti

Lo shortcode [products] è uno degli shortcode WooCommerce più versatili. Vi permette di visualizzare un elenco di prodotti in base a vari criteri.

Ha tantissimi attributi che permettono di visualizzare i prodotti come volete:

• limit: numero di prodotti da visualizzare. Il valore predefinito è -1 (visualizza tutti).
• columns: numero di colonne. Il valore predefinito è 4.
• orderby: ordina i prodotti in base a criteri specifici come date, title, price, popularity, ecc.
• order: ordine dei prodotti. Può essere ASC (crescente) o DESC (decrescente).
• category: slug della categoria del prodotto.
• tag: slug del tag del prodotto.
• paginate: abilita la paginazione. Può essere true o false. Il valore predefinito è false.

Ad esempio, se volete visualizzare gli ultimi otto prodotti in un layout a quattro colonne, ordinati in base alla data di inserimento in ordine decrescente. Potete utilizzare il seguente shortcode.

[products limit="8" columns="4" orderby="date" order="DESC"]

Se volete anche abilitare la paginazione in modo che l’utente possa accedere ad altri prodotti durante la visualizzazione del limite, potete utilizzare l’attributo paginate.

[products limit="8" columns="4" orderby="date" order="DESC" paginate="true"]

Potreste anche voler visualizzare i prodotti di una categoria specifica. L’attributo category permette di farlo. Lo shortcode qui sotto mostra sei prodotti della categoria “accessori” in un layout a tre colonne:

[products category="accessories" limit="6" columns="3"]

Vengono visualizzati cinque prodotti perché al momento ne esistono solo cinque nella categoria. Sette saranno disponibili quando ne verranno aggiunti altri due alla categoria, ma ne verranno visualizzati solo sei a causa del limite.

Lo shortcode [product] può essere utilizzato anche per visualizzare un singolo prodotto in base al suo ID o SKU aggiungendo l’attributo id o sku. Ad esempio, lo shortcode qui sotto mostra il prodotto con l’ID 22.

[product id="22"]

Questo può essere aggiunto all’interno di un post del blog o in qualsiasi altro luogo.

Se volete visualizzare più di un prodotto in modo selettivo, potete utilizzare gli attributi ids e skus.

[products columns="3" ids="22,35,26"]

Questo shortcode mostra i prodotti con gli ID 22, 35 e 26.

Un altro shortcode di cui potreste aver bisogno è lo shortcode [product_page]. Questo shortcode è simile a [product] ma visualizza l’intera pagina del prodotto, comprese le schede, i prodotti correlati e le recensioni. Per esempio, visualizziamo l’intera pagina del prodotto con ID 22.

[product_page id="22"]

Questo può essere utile per una sezione di prodotti in evidenza all’interno di una pagina o di un post.

Avete anche accesso all’attributo cat_operator che ti permette di controllare come i prodotti vengono filtrati in base alle categorie. Le opzioni disponibili per questo attributo sono:

• AND: mostra i prodotti delle categorie scelte.
• IN: mostra i prodotti appartenenti a qualsiasi categoria scelta (valore predefinito).
• NOT IN: mostra i prodotti non appartenenti alle categorie scelte.

Ad esempio, se volete visualizzare i prodotti delle categorie “abbigliamento” e “accessori”, potete utilizzare l’operatore AND:

[products category="clothing, accessories" cat_operator="AND"]

Potete anche escludere i prodotti di una categoria specifica con l’operatore NOT In. Ad esempio, se volete visualizzare tutti i prodotti tranne quelli della categoria “abbigliamento”.

[products category="clothing" cat_operator="NOT IN"]

Shortcode per il carrello e il checkout

WooCommerce fornisce degli shortcode specifici per le pagine essenziali dell’ecommerce come il carrello, il checkout e l’account utente.

Ad esempio, lo shortcode [woocommerce_cart] permette di visualizzare la pagina del carrello, compresi tutti gli articoli del carrello, le quantità e il prezzo totale.

Questo shortcode deve essere inserito nella pagina designata come pagina del carrello.

Allo stesso modo, lo shortcode [woocommerce_checkout] mostra la pagina di checkout in cui i clienti possono inserire i dati di fatturazione e spedizione ed effettuare l’ordine.

Questo shortcode deve essere inserito nella pagina designata come pagina di pagamento.

Lo shortcode [woocommerce_my_account] può essere utilizzato per visualizzare l’account dell’utente, comprese le sezioni per gli ordini, i download, gli indirizzi e i dettagli dell’account.

Infine, lo shortcode [woocommerce_order_tracking] aiuta a mostrare un modulo in cui i clienti possono inserire l’ID dell’ordine e l’e-mail per seguire i loro ordini.

Questo shortcode può essere inserito in qualsiasi pagina in cui desiderate che i clienti seguano i loro ordini.

Shortcode per le categorie di prodotti

Quando volete mostrare un elenco o una griglia di categorie di prodotti, potete usare lo shortcode [product_categories]. Ha i seguenti attributi che possono essere utilizzati per personalizzarne l’aspetto:

• number: numero di categorie da visualizzare.
• columns: numero di colonne.
• orderby: ordine delle categorie in base a criteri specifici.
• order: ordine delle categorie. Può essere ASC o DESC.
• hide_empty: nascondi le categorie vuote. Può essere 1 (true) o 0 (false).

Ad esempio, se volete visualizzare le categorie dei prodotti in una griglia, potete utilizzare il seguente shortcode:

[product_categories number="12" columns="4" orderby="name" order="ASC"]

Questo shortcode mostra 12 categorie di prodotti in una griglia a quattro colonne, ordinate per nome in ordine crescente.

Se aggiungete delle miniature, queste appariranno qui, migliorando l’aspetto del vostro sito. potete aggiungere le miniature accedendo a Prodotti > Categorie > modificando una determinata categoria e scorrendo fino al campo Thumbnail per caricare l’immagine.

Allo stesso modo, se volete visualizzare i prodotti di una categoria specifica, potete utilizzare lo shortcode [product_category]. Questo accetta l’attributo per_page, che specifica il numero di prodotti da visualizzare per pagina. Accettate anche category per specificare lo slug della categoria di prodotti e columns per il numero di colonne.

Ad esempio, questo shortcode mostra otto prodotti della categoria “abbigliamento” in un layout a quattro colonne.

[product_category category="clothing" per_page="8" columns="4"]

Shortcode avanzati di WooCommerce

Oltre agli shortcode di base per la visualizzazione dei prodotti, WooCommerce offre shortcode avanzati che offrono un maggiore controllo e opzioni di personalizzazione. Questi codici permettono di adattare la visualizzazione e le funzionalità del vostro negozio WooCommerce alle vostre esigenze specifiche.

Personalizzazione della visualizzazione dei prodotti

Lo shortcode [products] è molto flessibile e consente varie combinazioni di attributi per filtrare e visualizzare i prodotti in modo diverso.

Ecco alcuni altri attributi che potete utilizzare:

• on_sale: se visualizzare i prodotti in vendita. true o false.
• best_selling: se visualizzare i prodotti più venduti. true o false.
• top_rated: se visualizzare i prodotti più venduti. true o false.

In questo modo potete visualizzare i prodotti in vendita.

[products on_sale="true" limit="8" columns="4"]

Potete anche visualizzare i prodotti più venduti in una categoria utilizzando lo shortcode qui sotto:

[products category="accessories" best_selling="true" limit="6" columns="3"]

Questo shortcode mostra sei prodotti più venduti della categoria “accessori” in un layout a 3 colonne.

Shortcode per casi d’uso specifici

Gli shortcode di WooCommerce possono essere adattati per soddisfare casi d’uso specifici, fornendo contenuti dinamici in base a vari criteri. Ad esempio, lo shortcode [recent_products] può essere utilizzato per visualizzare i prodotti aggiunti di recente al vostro negozio WooCommerce.

[recent_products limit="5" columns="5"]

Questo shortcode mostra i cinque prodotti aggiunti più di recente in un layout a cinque colonne.

Allo stesso modo, lo shortcode [featured_products] può essere utilizzato per visualizzare i prodotti contrassegnati come in primo piano nel vostro negozio WooCommerce.

[featured_products limit="6" columns="3"]

Questo shortcode mostra sei prodotti in evidenza in un layout a tre colonne.

Potete contrassegnare un prodotto come in primo piano navigando nella pagina dei prodotti e mettendo una stella, come mostrato nell’immagine qui sotto.

Supponiamo che stiate organizzando dei saldi per alcuni prodotti particolari. Potete utilizzare lo shortcode [sale_products] per visualizzare i prodotti attualmente in vendita.

[sale_products limit="8" columns="3"]

Per impostare un prezzo di vendita per i vostri prodotti, andate su Prodotti > Tutti i prodotti e cliccate sull’articolo che volete offrire in sconto. Quindi, scorrete verso il basso fino alla sezione Dati del prodotto.

Se inserite un valore qualsiasi nel campo Prezzo di vendita WooCommerce ($), quello sarà il prezzo che i visitatori vedranno nella parte frontale del negozio. Questo campo sostituisce il valore del prezzo normale ($). Se non state organizzando dei saldi, lasciate questo campo vuoto per evitare di scontare accidentalmente i prodotti.

Se avete un plugin che aiuta a impostare i prodotti più venduti, potete anche utilizzare lo shortcode [best_selling_products] per visualizzare i prodotti più venduti nel vostro negozio WooCommerce.

[best_selling_products limit="10" columns="4"]

Lo shortcode [top_rated_products] può anche mostrare i prodotti più venduti nel vostro negozio WooCommerce.

[top_rated_products limit="4" columns="2"]

Riepilogo

Gli shortcode di WooCommerce sono strumenti potenti che migliorano le funzionalità del vostro negozio online. La padronanza di questi shortcode permette di personalizzare la visualizzazione dei prodotti, di gestire il carrello e di ottimizzare il processo di checkout.

Sentitevi liberi di sperimentare diverse combinazioni di shortcode per trovare la configurazione perfetta per il vostro negozio. Grazie a questi strumenti, potrete creare un sito WooCommerce dinamico e coinvolgente che soddisfi le esigenze dei vostri clienti.

Dopo aver creato il negozio online perfetto per la vostra attività, vorrete evitare che il vostro negozio subisca attacchi, sia lento o vada occasionalmente offline, compromettendo la vostra attività.

Il plugin WooCommerce a volte può rallentare i siti WordPress, soprattutto per i negozi di grandi dimensioni con molti prodotti. Fortunatamente, con Kinsta come fornitore di hosting per il vostro negozio WooCommerce, non dovrete mai preoccuparvene.