Shortcode WooCommerce: Una Guida Completa

Punti salienti

• Facile personalizzazione – Aggiungete elementi dinamici di WooCommerce senza bisogno di codificare.
• Configurazione rapida – Copia e incolla i codici brevi nelle pagine senza sforzo.
• Visualizzazione flessibile dei prodotti – Mostra i prodotti in primo piano, quelli recenti o quelli specifici di una categoria.
• Migliore esperienza dell’utente – Migliorate la navigazione con il monitoraggio degli ordini e i pulsanti del carrello.
• Risoluzione semplice dei problemi – Risolvete gli errori più comuni con controlli di sintassi di base.
• Opzioni alternative – Utilizzate i blocchi o i plugin di WooCommerce per una maggiore personalizzazione.
• L’hosting è importante: un host affidabile come Bluehost garantisce prestazioni fluide.

Introduzione

WooCommerce, una delle piattaforme di e-commerce più diffuse al mondo, offre un’ampia gamma di funzionalità che consentono di vendere prodotti e servizi online.

Ma sapevate che esiste una funzione che può aiutarvi a ottenere ancora di più dal vostro negozio di e-commerce?

Stiamo parlando di shortcode.

Se non li conoscete, non c’è da preoccuparsi. Vi spiegheremo cosa sono e come utilizzarli per ottimizzare il vostro negozio online. Inoltre, esploreremo i modi più efficaci per risolvere gli errori degli shortcode.

Pronto a imparare tutto sugli shortcode di WooCommerce? Tuffiamoci.

Cosa sono gli shortcode di WooCommerce?

Gli shortcode di WooCommerce sono frammenti di codice di WordPress che svolgono una funzione specifica sul tuo sito web. Questi pezzi di codice sono dotati di funzionalità predefinite e sono stati creati appositamente per WooCommerce.

Tutti i codici brevi hanno la stessa struttura: testi brevi tra parentesi quadre. Se si utilizzano più testi, questi saranno collegati tra loro con sottolineature e virgole. Una volta compresa la sintassi o la funzione handler, si può iniziare ad aggiungere gli shortcode alle pagine del proprio sito web.

I codici brevi di WooCommerce possono essere utilizzati con parametri o argomenti (args), che consentono di personalizzare ulteriormente il sito web. Un parametro è l’attributo che viene regolato da uno shortcode, mentre un argomento è il valore assegnato a tale attributo.

Ad esempio, se stai utilizzando uno shortcode di prodotto, puoi impostare il numero di prodotti da visualizzare (ad esempio, parametro) e il numero di colonne che desideri (ad esempio, argomento).

Ecco uno sguardo ai parametri e agli argomenti di uno shortcode di WooCommerce:

[related_products limit=”4″]

In questo esempio, “limite” è il parametro, mentre “4” è l’argomento. I parametri ti consentono di modificare gli shortcode in modo che possano funzionare in modi diversi in base alle tue esigenze o requisiti. Tuttavia, non tutti gli shortcode di WooCommerce utilizzano parametri.

Perché dovresti usare gli shortcode di WooCommerce?

Gli shortcode di WooCommerce ti consentono di personalizzare il tuo negozio di e-commerce aggiungendo varie funzionalità ai tuoi post e alle tue pagine senza alcuna esperienza di codifica. Utilizzando codice preesistente, è possibile risparmiare una notevole quantità di tempo che sarebbe stata impiegata per scrivere il proprio codice.

Gli shortcode offrono un modo rapido e conveniente per migliorare il design del tuo sito web per ottenere più conversioni. Questi frammenti di codice ti consentono di creare un’esperienza di acquisto superiore e di differenziare il tuo marchio dalla concorrenza.

Come utilizzare gli shortcode di WooCommerce

Ora che sapete cosa sono gli shortcode di WooCommerce e perché sono importanti, vediamo come usarli. L’aggiunta di shortcode al vostro negozio WooCommerce è piuttosto semplice, anche se non avete conoscenze di codifica.

Tuttavia, prima di apportare qualsiasi modifica al vostro sito web, è meglio eseguire un backup dei dati. In questo modo è possibile ripristinare il sito web allo stato precedente se qualcosa va storto.

Se stai utilizzando l’editor classico, devi solo copiare e incollare lo shortcode scelto sulla pagina desiderata.

D’altra parte, l’editor di blocchi Gutenberg richiede di aggiungere lo shortcode a un blocco di shortcode. In questo tutorial, ti mostreremo come aggiungere shortcode al tuo sito Web WordPress utilizzando l’editor Gutenberg.

Iniziamo:

1. Accedi alla dashboard di WordPress.
2. Andare su “Pagine”, nel menu di sinistra, e selezionare “Aggiungi nuovo”. È possibile utilizzare una pagina nuova o esistente.
3. Fare clic sull’icona nera più (+) per creare un blocco.

4. Dopo aver fatto clic sull’icona più, si vedrà il blocco shortcode. Fare clic su di esso per aggiungerlo all’editor. In alternativa, digitate [/] sulla pagina e cercate “shortcode”.

5. Digita o incolla lo shortcode desiderato nell’apposito campo.

6. Visualizza l’anteprima della pagina per assicurarti che tutto sia a posto.
7. Fare clic sul pulsante “Pubblica” nell’angolo superiore destro della pagina.

Ecco fatto! Avete aggiunto con successo uno shortcode WooCommerce alla vostra pagina. Ora che sapete come usare questi snippet di codice, esploriamo i vari shortcode che potete usare per migliorare il vostro sito WordPress.

Shortcode WooCommerce e come usarli

Esistono molti shortcode per WooCommerce, ma tutti hanno scopi diversi. Abbiamo compilato un elenco di alcuni degli shortcode più popolari che potete utilizzare per migliorare le funzionalità del vostro negozio online.

1. Scorciatoie di pagina WooCommerce

Se si è passati attraverso l’installazione guidata di WooCommerce, si sarà notato che i codici di pagina vengono generati automaticamente. Ecco gli shortcode di pagina più popolari e come utilizzarli.

Carretto

Lo shortcode del carrello di WooCommerce semplifica il processo di aggiunta di una pagina del carrello al vostro negozio online. Crea una pagina del carrello predefinita, in modo da non doverne creare una da zero.

Oltre a visualizzare tutti i prodotti che i clienti hanno aggiunto al carrello, questo shortcode mostra il subtotale, la quantità e il prezzo di ogni prodotto. Il codice del carrello di WooCommerce è il seguente:

[woocommerce_cart]

Tracciamento dell’ordine

Questo shortcode crea un modulo predefinito che gli acquirenti online possono utilizzare per controllare lo stato dei loro ordini. Una volta creato il modulo, i clienti devono inserire l’ID dell’ordine e l’e-mail di fatturazione per tracciare i loro ordini.

Per creare un modulo di tracciamento dell’ordine, inserisci lo shortcode qui sotto:

[woocommerce_order_tracking]

Ecco come apparirebbe il modulo di tracciamento dell’ordine sul frontend del tuo negozio:

Il mio account

Questo shortcode visualizza i dettagli dell’account di un cliente. Consente ai clienti di visualizzare, modificare e aggiornare le proprie informazioni personali. Ad esempio, possono visualizzare gli ordini precedenti, modificare le password e gli indirizzi e-mail e accedere e uscire dai loro account.

Lo shortcode per questo è:

[woocommerce_my_account]

Cassa

Questo shortcode di WooCommerce crea una pagina di checkout. In quanto tale, include campi in cui i clienti possono aggiungere i loro dati di fatturazione e di spedizione. Questo shortcode incorpora anche il pulsante “Effettua ordine”.

Per aggiungere la pagina di pagamento al tuo sito Web WooCommerce, inserisci il seguente shortcode:

[woocommerce_checkout]

Poiché oltre il 70% dei carrelli online viene abbandonato, la personalizzazione della pagina di checkout di WooCommerce è un modo efficace per ottimizzare il tasso di conversione del vostro sito web.

Puoi personalizzare la tua pagina di checkout utilizzando plugin come YITH WooCommerce Checkout Manager. Questo plug-in ti consente di modificare i campi esistenti e aggiungere campi personalizzati per semplificare il processo di pagamento.

2. I codici di prodotto di WooCommerce

I codici di prodotto di WooCommerce consentono di creare pagine di prodotto personalizzate e di visualizzare i prodotti ovunque si desideri. Vediamo come utilizzarli per mostrare i prodotti in modi diversi sul vostro sito web.

Prodotti

Visualizza qualsiasi articolo in magazzino utilizzando lo shortcode dei prodotti:

[prodotti]

La pagina dei prodotti può essere ulteriormente personalizzata per visualizzare i prodotti in ordine crescente (ASC) o decrescente (DESC).

Ad esempio, se desideri elencare i prodotti in ordine crescente, lo shortcode sarà simile a questo:

[products order=”ASC”]

Se desideri apportare ulteriori personalizzazioni, hai la possibilità di limitare il numero di prodotti che verranno visualizzati:

[products limit=”5″ order=”ASC”]

Altri parametri per questo shortcode includono:

• Ordina per
• Categoria
• Colonne
• Impaginare
• SKU
• Cartellino
• Classe
• Best_selling
• Top_rated
• On_sale

Vale la pena ricordare che parametri come best_selling, top_rated e on_sale non dovrebbero essere usati insieme.

Prodotti recenti

Questo shortcode ti consente di visualizzare i prodotti recenti sul tuo sito web. Se hai lanciato nuovi entusiasmanti prodotti, puoi utilizzare questo shortcode per attirare l’attenzione su di essi e invogliare i clienti a effettuare un acquisto.

Supponiamo di voler visualizzare i sei prodotti più recenti su tre righe. Lo shortcode per questo sarebbe:

[products limit=”6″ columns=”3″ orderby=”id” order=”DESC” visibility=”visible”]

Questo shortcode elenca i prodotti in base ai loro ID univoci, che vengono generati quando vengono create le pagine dei prodotti.

Prodotti in primo piano

Se ci sono alcuni prodotti su cui volete attirare l’attenzione dei vostri clienti, questo shortcode di WooCommerce è quello che fa per voi. Lo shortcode di base è:

[featured_products]

Tuttavia, se si desidera visualizzare due elementi in una riga, lo shortcode sarà simile al seguente:

[featured_products limit=”2″ columns=”2″]

Prodotti in vendita

Se volete mostrare i prodotti in vendita, gli shortcode di WooCommerce possono essere di grande aiuto. Per visualizzare tre prodotti in vendita ordinati in base alla loro popolarità, è possibile utilizzare questo shortcode:

[products limit=”3″ columns=”3″ orderby=”popularity” on_sale=”true”]

Prodotti più votati

Quando cercano prodotti che soddisfino le loro esigenze, la maggior parte dei clienti cerca gli articoli più quotati. È qui che entra in gioco lo shortcode dei prodotti più votati. Permette di visualizzare gli articoli con le valutazioni più alte nel vostro negozio online.

Lo shortcode per questo è:

[top_rated_products]

Questo shortcode non deve essere utilizzato insieme a on_sale o best_selling.

I prodotti più venduti

I codici brevi per i prodotti più venduti consentono di mostrare i prodotti più venduti. Potete visualizzarli sulla vostra homepage per attirare l’attenzione quando un potenziale cliente visita il vostro sito web.

Se vuoi mostrare una griglia a quattro colonne dei tuoi quattro prodotti più venduti, lo shortcode è il seguente:

[products limit=”4″ columns=”4″ best_selling=”true”]

Tag dei prodotti

I tag dei prodotti consentono di visualizzare solo i prodotti con un determinato tag. Lo shortcode per questa funzione è piuttosto semplice. Ad esempio, per mostrare i prodotti con il tag “pantaloni”, è possibile utilizzare lo shortcode:

[products tag=”pants”]

3. Scorciatoie per le categorie di prodotti di WooCommerce

Un altro shortcode di WooCommerce comunemente utilizzato è quello relativo alla categoria di prodotto. Ecco i due principali shortcode e i loro casi d’uso.

Categoria di prodotto

Questo shortcode consente di visualizzare i prodotti di una categoria specifica in qualsiasi pagina. Se volete attirare i clienti verso una nuova categoria di prodotti, questo shortcode può essere utile:

[product_category]

Ad esempio, per visualizzare i prodotti della categoria pantaloni, puoi utilizzare questo shortcode:

[product_category category=”pants”]

Si può scegliere di modificare ulteriormente questo aspetto. Ad esempio, con questo shortcode è possibile visualizzare sei prodotti della categoria pantaloni in tre colonne e in ordine decrescente:

[product_category category=”pants” limit=”6″ columns=”3″ order=”DESC”]

È inoltre possibile aggiungere più categorie di prodotti, separandole con delle virgole. Nell’esempio che segue, aggiungeremo le giacche alla categoria dei pantaloni.

[product_category category=”pants,jackets”]

Categorie di prodotti

Lo shortcode delle categorie di prodotti ti consente di visualizzare tutte le tue categorie di prodotti contemporaneamente:

[product_categories]

Quindi, se hai diverse categorie come pantaloni, t-shirt e giacche, questo shortcode mostrerà tutte queste opzioni.

Questo shortcode può essere utilizzato anche per evidenziare ID di categoria specifici. Ad esempio:

[product_categories ids=”5,6,7″]

4. Altri utili codici WooCommerce

Oltre agli shortcode WooCommerce sopra elencati, ecco altri utili shortcode da aggiungere al tuo sito web.

Prodotti correlati

Come suggerisce il nome, questo shortcode consente di visualizzare i prodotti correlati a quelli visualizzati dai clienti sul vostro sito web. Lo shortcode di base è:

[related_products]

Accetta argomenti come limite, orderby e colonne. Ad esempio, è possibile visualizzare quattro prodotti correlati aggiungendo un parametro di limite allo shortcode:

[related_products limit=”4″]

Il parametro limit controlla il numero di prodotti correlati che si desidera mostrare a ciascun cliente.

Ecco un altro esempio:

[related_products limit=”4″ columns=”4″]

Ciò ti consente di mostrare i prodotti correlati in una griglia contenente quattro prodotti per riga.

Pagina del prodotto

Il codice di scelta rapida della pagina del prodotto consente di visualizzare una singola pagina del prodotto per ID o SKU. Supponiamo che si voglia visualizzare un prodotto il cui ID è 28.

Lo shortcode sarebbe:

[product_page id=”28″]

Se sei appassionato di scrivere post sul blog, usa questo shortcode per incorporare un prodotto specifico nel tuo post, consentendo ai tuoi lettori di accedervi facilmente.

Per trovare l’ID di un prodotto, accedete alla dashboard di amministrazione di WordPress e andate su “Prodotti” > “Tutti i prodotti”. Passando il mouse sul titolo di un prodotto specifico, si vedrà l’ID univoco del prodotto.

Tabella dei prodotti

Con WooCommerce Product Table è possibile aggiungere tabelle di prodotti al proprio negozio online e offrire ai clienti una piacevole esperienza di acquisto in una sola pagina. I clienti possono trovare i prodotti di cui hanno bisogno, selezionare le quantità desiderate e aggiungere i prodotti al carrello senza dover visitare diverse pagine.

Inoltre, questo plugin include tonnellate di opzioni di personalizzazione. Ad esempio, è possibile selezionare specifiche categorie di prodotti che si desidera mettere in mostra. Si può anche scegliere di visualizzare le varianti di prodotto tramite menu a tendina.

Infine, puoi visualizzare la tabella dei prodotti su qualsiasi sezione del tuo sito web utilizzando lo shortcode:

[cwpt_table]

Aggiungi al carrello

Lo shortcode add-to-cart consente di visualizzare il pulsante add-to-cart per un singolo prodotto. È una funzione utile quando non si desidera visualizzare tutti i dettagli del prodotto.

Un post del blog è un ottimo posto per utilizzare il pulsante aggiungi al carrello. Lo shortcode di WooCommerce per questo è:

[add_to_cart id=”99″]

Come risolvere i problemi degli shortcode di WooCommerce

Se dovessi riscontrare problemi durante l’utilizzo degli shortcode di WooCommerce, ecco una serie di suggerimenti utili che puoi utilizzare per risolverli.

• Controlla se hai incorporato lo shortcode tra <i pre> tag. In questo caso, vai all’editor di testo per rimuovere questi tag indesiderati.
• Assicurati che le virgolette siano dritte (“) e non curve (“).
• Utilizzare le parentesi quadre.
• Assicurarsi che ogni valore di attributo, che segue il segno di uguale, sia racchiuso tra virgolette.
• Usa l’ultima versione di WooCommerce.
• Passa a un tema diverso, poiché il tuo tema attuale potrebbe essere in conflitto con lo shortcode di WordPress che desideri utilizzare.
• Se sospetti che l’errore sia causato da un plug-in, disattiva ogni plug-in uno per uno e continua a testare lo shortcode per vedere se funziona.

Alternative agli shortcode di WooCommerce

Se stai cercando altri modi per mostrare i prodotti sul tuo sito web e personalizzare il tuo negozio, ecco alcune alternative agli shortcode WooCommerce che puoi utilizzare.

Blocchi WooCommerce

I blocchi WooCommerce sono un’ottima alternativa agli shortcode. Offrono diversi blocchi che puoi utilizzare per creare e personalizzare il tuo negozio di e-commerce.

Utilizzando i blocchi di WooCommerce, puoi visualizzare una griglia dei tuoi prodotti più venduti, evidenziare le recensioni di categorie specifiche, visualizzare tutti i prodotti del tuo negozio e consentire agli acquirenti di visualizzare i loro carrelli da qualsiasi pagina.

Plugin per shortcode WooCommerce

Vari plugin nel marketplace ti consentono di aggiungere shortcode al tuo sito web senza alcuna competenza tecnica. Intense è uno di questi plugin. Offre oltre 100 shortcode e 19 tipi di post personalizzati.

I tipi di post personalizzati consentono di espandere il marketing dei contenuti al di là dei soli post del blog. Questo plugin è reattivo per i dispositivi mobili ed è stato creato tenendo conto delle prestazioni del vostro sito web, aiutandovi a creare un’esperienza utente superiore.

Hosting WooCommerce di Bluehost: Alimentare il vostro negozio con facilità

Se siete alla ricerca di un modo semplice per creare e gestire il vostro negozio online, vale la pena considerare i piani di hosting WooCommerce di Bluehost. Progettati specificamente per le aziende di commercio elettronico, questi piani sono dotati di WooCommerce preinstallato, in modo da poter iniziare a vendere subito, senza dover affrontare problemi tecnici.

Inoltre, avrete un dominio gratuito per il primo anno, un certificato SSL gratuito per transazioni sicure e un’assistenza clienti 24/7 in caso di necessità. Che stiate lanciando il vostro primo negozio online o scalando una pagina di negozio esistente, Bluehost fornisce una solida base con prestazioni affidabili e strumenti integrati per rendere la gestione del negozio un gioco da ragazzi.

Volete concentrarvi sulla crescita della vostra attività invece di occuparvi dei problemi di hosting? L’hosting WooCommerce di Bluehost lo rende possibile.

Riflessioni finali

I codici brevi di WooCommerce consentono di evidenziare le caratteristiche e i vantaggi dei prodotti, di fornire un accesso rapido alle informazioni, di semplificare il processo di checkout e di raggiungere gli obiettivi aziendali. Questo livello di personalizzazione è difficile da battere.

In un panorama altamente competitivo come quello dell’e-commerce, è importante costruire la propria attività su basi solide. Per questo è necessario scegliere un provider di web hosting affidabile, come Bluehost.

I nostri piani di hosting WooCommerce sono dotati di strumenti e funzionalità che semplificano la creazione e la gestione del sito web. Inoltre, avrai accesso al supporto in tempo reale, in modo da ricevere sempre aiuto quando ne hai bisogno.

Contattaci oggi stesso per scoprire come possiamo aiutarti a far crescere il tuo negozio online.

Domande frequenti