Shortcode WooCommerce: la guida definitiva per il 2021

Pubblicato: 2020-01-11

Se hai un'attività WooCommerce, probabilmente hai sentito parlare di shortcode. Sono piccoli frammenti che ti consentono di aggiungere e personalizzare diversi aspetti del tuo negozio online senza scrivere lunghe righe di codice. In questa guida, daremo un'occhiata a cosa sono gli shortcode WooCommerce, perché dovresti usarli e come sfruttarli al meglio .

Shortcode WooCommerce: tutto quello che devi sapere

Se lavori con WordPress, probabilmente conosci WooCommerce. Attualmente, il 93,7% di tutti i siti Web di eCommerce WordPress utilizza il famoso plug-in WooCommerce. Questa piattaforma open source completamente personalizzabile sviluppata da WooThemes è iniziata come qualsiasi altro componente aggiuntivo, ma presto è decollata con milioni di download, che hanno attirato l'attenzione della bacheca di WordPress. Ad oggi, è già stato scaricato 70 milioni di volte ed è diventato il principale plug-in di eCommerce, alimentando un totale del 28% dei negozi online.

Nonostante la sua grande reputazione e successo, il team di WooCommerce lavora continuamente per renderlo ancora migliore. Durante il suo percorso di sviluppo, ha distribuito più shortcode di vario tipo agli utenti per personalizzare i propri siti. Con tali codici brevi, possono trasformare i loro negozi e personalizzare l'interfaccia, il check-out, le funzionalità, il processo di elenco dei prodotti e altro ancora.

Quindi, per aiutarti a sfruttare al meglio gli shortcode, in questa guida daremo un'occhiata a:

  • Una breve spiegazione degli shortcode
  • Perché sono necessari per il tuo business
  • Un elenco di codici brevi WooCommerce
  • Come puoi sfruttarli appieno

Cosa sono gli shortcode WooCommerce?

Cominciamo con le basi. Gli shortcode WooCommerce sono piccoli snippet che ti aiutano a ottenere una funzionalità o a visualizzare contenuti sul tuo sito di eCommerce senza scrivere un lungo tratto di codice. In altre parole, sono macro che consentiranno un'interazione dinamica con il contenuto del tuo sito .

Puoi utilizzare codici brevi in ​​qualsiasi punto del tuo negozio per personalizzarlo, mostrare prodotti o semplicemente pulsanti di invito all'azione. E la parte migliore è che non hai bisogno di alcuna conoscenza di programmazione per iniziare a usarli. Hai solo bisogno di una passione ardente per il business online e una profonda comprensione di ciò che desideri per il tuo negozio. Gli shortcode faranno il resto in modo pulito e ordinato.

In poche parole, gli shortcode WooCommerce sono utili in tre modi:

  • Aiutano a risparmiare tempo perché non devi scrivere lunghe righe di codice, fornendoti più tempo per lavorare su altre cose.
  • Dal momento che non aggiungono un markup al contenuto del post, i proprietari dei negozi potranno modificare lo stile della pagina in un secondo momento.
  • Più flessibilità. Anche se questo dipenderà dai parametri impostati dall'utente, questi possono applicare lo stesso shortcode per diverse situazioni.

Perché hai bisogno degli shortcode WooCommerce?

Non sei ancora convinto? Ripensaci, gli shortcode di WooCommerce possono fare molto di più di quanto immagini.

In primo luogo, con gli shortcode, ti verrà concesso il pieno controllo del tuo sito . Ciò significa che puoi visualizzare liberamente i prodotti, aggiungere pulsanti di invito all'azione o pulsanti di qualsiasi tipo in qualsiasi punto del tuo negozio senza chiedere aiuto a nessuno sviluppatore. Significa anche che non devi nemmeno lavorare con tratti di codice lunghi e complessi.

Questo è perfetto per coloro che vogliono provare varie strategie nei loro negozi online. Ad esempio, invece di guidare i tuoi clienti attraverso un processo di vendita standard come qualsiasi altro negozio, potresti voler visualizzare un pulsante Aggiungi al carrello su uno dei tuoi post popolari per incoraggiare le conversioni. E la parte migliore è che gli shortcode ti consentono di scegliere tra molti pulsanti di invito all'azione che inserisci sul tuo sito.

Inoltre, gli shortcode di WooCommerce ti consentono di aggiungere prodotti alla home page, creare una griglia di articoli in vendita per mostrarli ai clienti e mostrare i tuoi prodotti popolari ovunque tu voglia. Anche la creazione di una pagina di tracciamento dell'ordine è possibile! E questa è la magia degli shortcode, ti offrono infinite opzioni per personalizzare il tuo negozio .

Quali tipi di codici brevi WooCommerce esistono?

Poiché è difficile dire quanti codici brevi offre WooCommerce, li elencheremo in base alla loro categoria. Ecco una rapida panoramica degli shortcode di WooCommerce che tratteremo in questa guida:

  • Shortcode di pagina
  • Product Shortcodes (questa è la categoria più robusta)
  • Shortcode della pagina del prodotto
  • Shortcode di prodotti correlati
  • Pulsante Aggiungi al carrello o shortcode URL

Come sfruttare al meglio gli Shortcode di WooCommerce ?

Ora, vediamo cosa può fare ogni tipo di shortcode e come sfruttarlo al meglio:

1. Shortcode di pagina

Normalmente, WordPress viene fornito con 4 pagine predefinite con gli shortcode inclusi, quindi non dovrai aggiungerli manualmente. Tuttavia, se per qualche motivo non fosse così, potresti ricreare le pagine con gli shortcode e chiarirli nelle impostazioni.

All'interno della pagina shortcode troverai:

Carrello

 [ woocommerce_cart ]

Viene utilizzato per la pagina del carrello e aiuta a mostrare il contenuto del carrello una volta che i clienti aggiungono prodotti al carrello. Inoltre, mostra anche l'interfaccia per codici coupon, pezzi e pezzi del carrello e altri elementi per una pagina carrello standard. Questo è un semplice shortcode, quindi non aggiungi altre condizioni o parametri ad esso.

Guardare

 [ woocommerce_checkout ]

Una volta che i tuoi clienti hanno raccolto tutti i prodotti/servizi che desiderano, faranno clic su check-out e questo è quando lo shortcode di checkout entra in azione. Mostrerà tutte le informazioni necessarie che l'acquirente deve vedere prima del checkout come metodo di pagamento, informazioni di fatturazione, informazioni di spedizione, ecc. Anche questo è un semplice shortcode che non accetta argomenti aggiuntivi.

Il mio account

 [ woocommerce_my_account ]

I clienti dovrebbero essere in grado di vedere e modificare i dettagli del proprio profilo, come nome, indirizzo e-mail, password, nonché i dettagli dell'ordine come l'indirizzo di spedizione e di fatturazione. Con questo shortcode, gli utenti potranno visualizzare, modificare e aggiornare tali dettagli. Inoltre, contiene un argomento che visualizzerà informazioni sull'acquirente corrente.

Modulo di monitoraggio dell'ordine

 [ woocommerce_order_tracking ]

A differenza dei precedenti shortcode di tre pagine, questo non viene generato automaticamente per impostazione predefinita ma puoi aggiungerlo in modo che i tuoi clienti possano vedere e tracciare lo stato dei loro ordini in corso. Se vogliono controllare lo stato di un ordine, gli acquirenti devono inserire i dettagli dell'ordine nel modulo di tracciabilità dell'ordine.

Puoi utilizzare questo shortcode WooCommerce per una singola pagina o combinarlo con altri shortcode per visualizzare il modulo di monitoraggio. Ad esempio, puoi utilizzare questo shortcode nella pagina Il mio account per consentire ai tuoi clienti di accedere al modulo di monitoraggio.

2. Shortcode del prodotto

Tieni presente che per utilizzare i Product Shortcode avrai bisogno di WooCommerce 3.2 e versioni successive. Queste versioni ti consentono di utilizzare lo shortcode del prodotto per tutti i tipi di visualizzazione del prodotto. Se hai una versione precedente, controlla questo documento perché dovrai utilizzare codici brevi diversi per ogni tipo di raggruppamento di prodotti.

 [ products ]

2.1 Attributi dello shortcode del prodotto

Quando utilizzi gli shortcode dei prodotti, dovrai specificare quali prodotti desideri visualizzare in base a condizioni diverse che ti consentiranno di filtrare i prodotti per ID articolo, SKU, categorie, attributi e così via. Supportano anche l'impaginazione, l'ordinamento casuale e i tag dei prodotti.

Esaminiamo alcuni shortcode di prodotto:

Limita la quantità di prodotto

Con l'attributo limit puoi stabilire un limite al numero di prodotti visualizzati. Ad esempio, puoi limitare il numero di prodotti da mostrare a 8 articoli con quanto segue:

 [ products limit="12" ]

. Si prega di notare che per impostazione predefinita, il limite è "-1", il che significa che verranno mostrati tutti i prodotti.

Modifica il layout del prodotto

Con gli shortcode WooCommerce puoi anche modificare il layout per diversificare la visualizzazione del prodotto. Basta scegliere tra i seguenti attributi a seconda delle preferenze dei tuoi clienti: colonne, pagina o orderby.

un. Colonne

Se vuoi impostare un certo numero di colonne, dovrai aggiungere l'attributo 'colonne' e chiarire il numero che desideri. Quindi, se desideri 6 colonne con un prodotto diverso in ciascuna di esse, puoi utilizzare lo shortcode:

 [ products limit="12" columns="4" ]

B. Impagina

Un altro esempio è l'attributo paginate, che divide i tuoi prodotti in diverse pagine. Con questo shortcode, puoi specificare il numero di elementi mostrati in ogni pagina.

Per usarlo, imposta paginate = "true", quindi inserisci il seguente shortcode:

 [ products limit="12" columns="4" paginate="true" ]

C. Ordina i prodotti con "orderby"

L'attributo orderby apre una vasta gamma di opzioni in quanto ti consente di ordinare i tuoi prodotti in base a più criteri per visualizzarli come desideri aggiungendo condizioni. Questi includono:

    • id: mostra i prodotti per ID prodotto.
    • popolarità : con questo attributo, i prodotti che vengono acquistati di più verranno mostrati per primi.
    • title : ordina i prodotti in base al titolo. Questo è l'ordine predefinito di orderby.
    • valutazione : un altro modo interessante per ordinare i prodotti si basa sul loro valore medio di valutazione.
    • data : per ordinare gli articoli in base alla data di pubblicazione. Per impostazione predefinita, viene mostrato per primo il prodotto più vecchio. Tuttavia, puoi modificarlo utilizzando l'attributo date.
    • rand : con questo attributo puoi modificare l'ordine dei prodotti quando la pagina viene ricaricata. Tuttavia, con i siti in cui è abilitata la memorizzazione nella cache e i prodotti vengono salvati in un ordine fisso, questo attributo potrebbe non funzionare.
    • menu_order : funzionerà solo quando hai impostato gli ordini di menu e mostrerà i prodotti in base a quell'ordine. Verrà mostrato per primo il numero più basso.

Se desideri una personalizzazione ancora maggiore, puoi fare un ulteriore passo avanti e combinare queste opzioni semplicemente aggiungendo uno spazio tra di loro. Ad esempio, potresti provare a mescolare gli shortcode per visualizzare sei colonne di prodotti in un ordine in base alla loro popolarità in questo modo:

 [ products limit="12" columns="4" orderby="popularity" ]

Più attributi del prodotto

Ci sono molti altri attributi del prodotto in WooCommerce che puoi usare combinandoli con lo shortcode " prodotti" . Alcuni dei principali sono:

    • SKU: puoi visualizzare i tuoi prodotti in base al loro SKU (stock-keeping unit). Se vuoi aggiungere più SKU, separali semplicemente con virgole.
    • on_sale : come suggerisce il nome, questo attributo mostrerà tutti i prodotti in vendita del tuo negozio.
    • categoria : È anche una buona idea mostrare i prodotti per categoria. Puoi avere più categorie che separano gli slug con virgole.
    • best_seller : questa è una buona opzione se vuoi mostrare prima i tuoi prodotti più popolari e più venduti.
    • top_rated : Seguendo la stessa logica, puoi anche mostrare i tuoi articoli più votati.
    • class : questo attributo ti aiuta a cambiare l'ordine usando CSS personalizzato aggiungendo una classe wrapper HTML.

Ad esempio, se vuoi mostrare i tuoi prodotti più venduti, quattro per riga, con un massimo di dodici articoli puoi utilizzare questo shortcode:

 [ products limit="12" columns="4" best_selling="true" ]

Visibilità

Questo attributo ti consente di visualizzare i prodotti in base alle impostazioni di visibilità. Alcune delle opzioni sono:

      • catalogo : Recupera i prodotti visibili solo nella pagina del negozio
      • ricerca: mostra i prodotti visibili solo nella pagina di ricerca
      • visibile: è una combinazione dei due precedenti in quanto recupera i prodotti visibili nella pagina del negozio e nei risultati di ricerca.
      • nascosto: mostra i prodotti a cui è possibile accedere solo tramite un URL diretto.
      • in primo piano : recupererà solo i prodotti contrassegnati come in primo piano

Ad esempio, se desideri visualizzare i tuoi prodotti in evidenza, quattro per riga, con un massimo di dodici articoli puoi utilizzare questo shortcode:

 [ products limit="12" columns="4" visibility="featured" ]

Attributi del prodotto contenuto

All'interno degli shortcode di prodotto, ci sono attributi di prodotto di contenuto che puoi utilizzare per recuperare i prodotti su una determinata pagina o post. Più specificamente, è possibile recuperare materiale in base all'attributo disponibile o ai termini dell'attributo (si tratta di variazioni di quell'attributo). Puoi farlo includendo lo slug, specificando i termini e combinandoli con gli attributi. Questo può creare un po' di confusione, quindi diamo un'occhiata più da vicino a ciascuno di essi:

    • attributo: aiuta a visualizzare i prodotti racchiudendo le lumache
    • termini: menziona i termini degli attributi separati da virgole
    • terms_operator: ti dà un maggiore controllo su come mostrare gli attributi. Gli operatori sono tre:
      • E : Mostrerà i prodotti di tutti gli attributi che hai scelto.
      • IN : Visualizza i prodotti che hanno l'attributo scelto.
      • NOT IN : Mostrerà i prodotti che non hanno gli attributi scelti.

Categorie

Seguendo la stessa logica degli attributi dei prodotti di contenuto, puoi anche visualizzare gli articoli in base alle loro categorie:

      • categoria: per scegliere la categoria che si desidera visualizzare
      • cat_operator: puoi applicare condizioni per mostrare gli elementi che desideri:
        • E: I prodotti visualizzati devono appartenere a tutte le categorie scelte
        • IN: I prodotti che vengono visualizzati devono essere in almeno una delle categorie scelte
        • NON IN: I prodotti visualizzati non devono necessariamente essere in nessuna delle categorie scelte
      • Puoi anche visualizzare i prodotti in base a un elenco separato da virgole di ID post o un elenco di SKU.
      • Ci sono molti altri shortcode/attributi che appartengono agli shortcode del prodotto: Attributi speciali, Categoria del prodotto e Categoria del prodotto. La logica è molto simile a quella che hai letto sopra, ma nel caso tu voglia dare un'occhiata, puoi dare un'occhiata.
      • Se vuoi saperne di più sugli shortcode, puoi visitare questa pagina e dare un'occhiata agli 8 scenari.

Ad esempio, se desideri visualizzare prodotti per categorie specifiche, quattro per riga, con un massimo di dodici articoli, puoi utilizzare questo shortcode:

 [ products limit="12" columns="4" category="hoodies, tshirts" ]

3. Shortcode della pagina del prodotto

Con questo tipo di shortcode WooCommerce, puoi mostrare diverse pagine di prodotto utilizzando due attributi: ID prodotto e SKU. Il codice per questo è .

È importante notare che puoi persino utilizzare entrambi i seguenti codici brevi:

 [ product_page ]

o

 [ product_page sku="hoodie" ]

4. Shortcode di prodotti correlati

Se hai utilizzato negozi di eCommerce come Amazon o Alibaba, probabilmente avrai notato che quando guardi un prodotto, ti mostrano altri articoli correlati. Ad esempio, se stai cercando una tenda, ti mostreranno altre tende e sacchi a pelo simili. Questo perché se hai bisogno di una tenda, probabilmente ti interesserà anche un sacco a pelo.

Di conseguenza, mostrare ai tuoi acquirenti i prodotti correlati è un'ottima idea per aumentare le tue vendite. In WooCommerce questo è possibile con lo shortcode dei prodotti correlati. Puoi indicare esattamente quanti prodotti vuoi che gli utenti vedano. Ad esempio, se vuoi mostrare 4 prodotti, lo shortcode dovrebbe essere:

 [ related_products limit="4" ]

5. Pulsante Aggiungi al carrello

Un pulsante Aggiungi al carrello è un altro ottimo modo per migliorare l'esperienza del cliente nel tuo negozio e aumentare il tasso di conversione. E la parte migliore è che è molto semplice.

Supponiamo che tu voglia visualizzare il prezzo di un prodotto e un pulsante Aggiungi al carrello su un post o una pagina, lo shortcode che devi utilizzare è

 [ add_to_cart sku="hoodie" ]

Gli shortcode WooCommerce ti consentono anche di reindirizzare i tuoi acquirenti a un altro URL invece di aggiungere un articolo al carrello. Per fare questo, devi scrivere

 [ add_to_cart_url ]

per il prodotto con ID 219.

Elenco di codici brevi utili per WooCommerce

Infine, ecco un elenco degli shortcode WooCommerce più utili che puoi utilizzare sul tuo sito.

  • Shortcode della pagina del carrello.
 [ woocommerce_cart ]
  • Dai un'occhiata alla pagina
 [ woocommerce_checkout ]
  • Account utente.
 [ woocommerce_my_account ]
  • Modulo di monitoraggio dell'ordine.
 [ woocommerce_order_tracking ]
  • Codice breve dei prodotti.
 [ products ]
  • Prodotti sponsorizzati.
 [ featured_products ]
  • Vendita prodotti.
 [ sale_products ]
  • I prodotti più venduti.
 [ best_selling_products ]
  • Prodotti recenti.
 [ recent_products ]
  • Attributo del prodotto.
 [ product_attribute ]
  • Prodotti più votati.
 [ top_rated_products ]
  • Categoria prodotto: per visualizzare i prodotti in una categoria specifica.
 [ product_category ]
  • Categorie di prodotti: mostra tutte le categorie di prodotti.
 [ product_categories ]
  • Messaggi negozio: per visualizzare i messaggi.
 [ shop_messages ]
  • Filtro prodotto: visualizza un filtro di ricerca prodotto.
 [ woocommerce_product_filter ]
  • Attributo filtro.
 [ woocommerce_product_filter_attribute ]
  • Categoria filtro prodotto.
 [ woocommerce_product_filter_category ]
  • Filtra prezzo.
 [ woocommerce_product_filter_price ]
  • Etichetta filtro prodotto.
 [ woocommerce_product_filter_tag ]
  • Classificazione del filtro.
 [ woocommerce_product_filter_rating ]
  • Product Filter Sale: mostra un filtro in tempo reale per i prodotti in vendita.
 [ woocommerce_product_filter_sale ]
  • Product Filter Reset: Visualizza un pulsante per cancellare tutti i filtri live.
 [ woocommerce_product_filter_reset ]

Shortcode WooCommerce: Conclusione

Tutto sommato, gli shortcode di WooCommerce ti aiuteranno a personalizzare il tuo negozio senza scrivere lunghe righe di codice. In questo modo puoi testare diversi layout e alternative per trovare quello giusto per il tuo negozio. Anche se all'inizio possono sembrare complicati, la verità è che con un po' di pratica ti semplificheranno la vita e ti aiuteranno a portare la tua attività al livello successivo.

Per ulteriori alternative per personalizzare il tuo negozio online, puoi consultare le nostre guide su:

  • Aggiungi al carrello funzione in modo programmatico in WooCommerce
  • WooCommerce Ajax aggiungi al carrello

Cosa ne pensi degli shortcode WooCommerce? Fateci sapere i vostri pensieri nei commenti qui sotto.