Gli Shortcode di WooCommerce: la lista completa

In questo articolo ti mostrerò alcuni shortcode di WooCommerce utilissimi per la realizzazione di uno shop. Potrai vedere come è aggiungere vari tipi di funzionalità alle pagine, posts, widget del tuo shop senza scrivere una riga di codice.

 

Uno shortcode in WordPress è un codice racchiuso tra parentesi quadre che permette di aggiungere in modo semplice e veloce files, immagini, moduli che di norma richiedono dei codici complicati e non facilmente implementabili.

WordPress in se racchiude già degli shortcode, basti pensare allo shortcode gallery che permette di aggiungere una galleria di immagini all’interno di una pagina o di un post.

Temi e plugin possono implementare i loro shortcode in modo da permettere al web designer, all’amministratore del sito o al content manager l’inserimento di moduli e funzionalità aggiuntive.

Anche WooCommerce ha la sua lista di shortcode, non è lunghissima ma riesce a coprire la maggior parte dei casi che si presentano quando si ha la necessità di inserire elementi dello shop in qualsiasi posizione del sito web.

Gli shortcode di WooCommerce

Gli shortcode di WooCommerce si dividono in categorie a seconda del contenuto che viene generato.

  1. Shortcode Pagina
  2. Shortcode Prodotti [products]
  3. Shortcode Categorie prodotto
  4. Shortcode Pagina Prodotto
  5. Shortcode Prodotti Correlati
  6. Shortcode Aggiungi al carrello
  7. Shortcode per mostrare notifiche in pagine non-WooCommerce

#1 – Shortcode Pagina

Durante la fase di installazione di WooCommerce vengono create automaticamente le pagine relative allo shop: carrello, checkout, shop, my account. All’interno di alcune di queste pagine troviamo già inseriti shortcode che appartendono a questa sezione:

  • [woocommerce_cart] – inserisce il contenuto della pagina carrello
  • [woocommerce_checkout] – mostra il contenuto della pagina cassa
  • [woocommerce_my_account] – crea all’interno della pagina una sezione dedicata all’utente registrato.
  • [woocommerce_order_tracking]  – mostra il form di tracciamento dell’ordine.

I primi tre sono molto comuni, e come scritto sopra vengono automaticamente inseriti da WooCommerce all’interno delle singole pagine create. L’ultimo [woocommerce_order_tracking] appartiene alla categoria degli sconosciuti o poco utilizzati, inserendo all’interno di una pagina questo shortcode di WooCommerce mostra un form all’interno del quale un utente inserendo l’ID dell’ordine e l’email di fatturazione viene aggiornato sullo stato di avanzamento dell’ordine.

 

stato di avanzamento ordine woocommerce

#2 – Shortcode prodotti [products]

Tra gli shortcode di WooCommerce quello più potente e versatile è sicuramente [products] che permette di mostrare prodotti per ID, SKU, categorie, attributi e tag supportando, inoltre, la paginazione e l’ordinamento. A partire dalla versione di WooCommerce 3.1 questo shortcode rimpiazza i seguenti:

[featured_products][sale_products][best_selling_products][recent_products][product_attribute], e [top_rated_products]

 

Le combinazioni possibili per la visualizzazione dei prodotti tramite questo shortcode è molto vasta così come è vasto il numero di attributi che WooCommerce mette a disposizione. Li elenco di seguito così come sono presentati nella documentazione del plugin.

 

Attributi di visualizzazione

  • limit – Il numero di prodotti da mostrare. Per default il suo valore è impostato a 12, puoi utilizzare -1 per visualizzare tutti i risultati.
  • columns – Il numero di colonne da visualizzare, il suo valore predefinito è 4.
  • paginate – Inserisce la paginazione viene di solito utilizzato con l’attributo limit. Per default il suo valore è false ma basta passare true per mostrare i risultati divisi per pagine.
  • page -tramite questo attributo possiamo definire la pagina di visualizzazione dei risultati.
  • orderby – Permette di scegliere la modalità di ordinamento. Può essere passata più di un’opzione tra quelle elencate di seguito, inserendo tra l’una e l’altra uno spazio:
    • date – Data di pubblicazione del prodotto.
    • id – Identificativo del prodotto.
    • menu_order – Mostra l’ordinamento come da pannello di amministrazione.
    • popularity – Ordina per numero di acquisti.
    • rand – Ordinamento casuale.
    • rating – Ordina i prodotti a seconda del’indice di gradimento degli utenti.
    • title – Questa è il valore predefinito di ordinamento e permette di ordinare i prodotti per titolo.
  • order – Utilizzato con l’attributo orderby permette di decidere se ordinare in modo ascendente (ASC) o discendente (DESC). Se non assegnato l’ordinamento sarà ascendente.
  • class – Aggiunge una classe a tutto il contenitore HTML, in modo da poterne personalizzare la grafica tramite CSS.

Attributi per contenuto

  • attribute – Mostra i prodotti che hanno un attributo specifico che deve essere passato utilizzando lo slug dell’attributo.
  • terms – utilizzando con l’attributo precedente permette di elencare quali valori dell’attributo si vuole visualizzare.
  • terms_operator – Operatore di comparazione dei termini:
    • AND – I prodotti visualizzati saranno quelli che appartengono a tutti i termini passati all’argomento “terms”.
    • IN – Mostra i prodotti il cui attributo “attribute” ha almeno uno dei termini elencanti in “terms”.
    • NOT IN – In questo caso lo shortcode mostrerà tutti i prodotti che non hanno l’attributo “attribute” elencato in “terms”.
  • visibility – Mostra i prodotti in base alla loro visibilità all’interno dello shop:
    • visible – Prodotti visibili all’interno dello shop e nei risultati di ricerca. Questa ovviamente è il valore di default.
    • catalog – In questo caso verranno mostrati i prodotti visualizzabili solamente nello shop e non nei risultati di ricerca.
    • search – Al contrario del precedente i prodotti mostrati saranno solo quelli visualizzabili solamente nei risultati di ricerca.
    • hidden – Prodotti nascosti accessibili solamente tramite URL.
    • featured – Prodotti che sono impostati come “prodotto in evidenza”.
  • category – se vogliamo visualizzare i prodotti di determinate categorie possiamo utilizzare questo attributo elencandole utilizzando gli slug separati da virgola.
  • cat_operator – Operatore di comparazione delle categorie:
    • AND – Mostra tutti i prodotti appartenenti a tutte le categorie elencate.
    • IN – Mostra prodotti appartenenti almeno a una delle categorie elencate in ‘category’. Questo è il suo valore predefinito.
    • NOT IN – Mostra tutti i prodotti che non appartengono a nessuna delle categorie elencate.
  • tag – Se vogliamo mostrare prodotti appartenenti ad uno o più tag possiamo utilizzare quest’attributo elencando i tag per slug separati da virgola.
  • ids – E’ possibile far visualizzare solamente determinati prodotti elencando gli ID del prodotto separati da virgola.
  • skus – Questo attributo permette di scegliere una lista di prodotti da mostrare per SKU, gli sku devono essere passati separati da virgola.

Attributi “Special”

Questi attributi non possono essere utilizzati con gli attributi per contenuto in quanto potrebbero venire fuori dei conflitti:

  • on_sale – Mostra i prodotti in saldo e non è possibile utilizzarlo con gli attributi best_sellingtop_rated.
  • best_selling – Mostra i prodotti più venduti e non può essere utilizzato insieme agli attributi on_sale o top_rated.
  • top_rated – Permette di visualizzare i prodotti più votati e non può essere utilizzando con gli attributi on_salebest_selling.

Proviamo a giocare un pò con lo shortcode products!

Esempio 1 – Visualizzare i prodotti in offerta

iniziando per esempio a mostrare i prodotti che sono in saldo all’interno dello shop. Nei periodi di saldi, o quando ci sono promozioni in corso può tornare utile avere una pagina dove visualizzare i prodotti in offerta.

Utilizziamo l’attributo “special” onsale e qualche attributo di visualizzazione

Il risultato sarà:

prodotti in offerta con shortcode

Esempio 2 – Visualizzare prodotti per attributi

Ti mostro ora come è possibile visualizzare i prodotti a seconda degli attributi. Supponiamo ad esempio di voler mostrare tutti i prodotti che sono disponibili nella tonalità del verde, e tutti i prodotti che non lo sono:

Come risultato avremo:

Prodotti visualizzati per attributo

 

Esempio 3 – Visualizzare i nuovi arrivi per una specifica categoria

Se nella home del nostro shop vuoi che l’utente veda i nuovi arrivi di una determinata categoria basta mettere insieme alcuni attributi di visualizzazione e di contenuto e il gioco è fatto!

 

 

Lo shortcode produrrà come risultato:

 

#3 Shortcode Categorie prodotto

Se vuoi visualizzare le categorie di prodotto all’interno di una pagina lo shortcode che WooCommerce mette a disposizione è

[product_categories]

tra gli attributi di questo shortcode troviamo

  • limit – Il numero di categorie da mostrare, per default il sui valore è impostato a -1 (visualizza tutto).
  • columns – Il numero di colonne da visualizzare 4 è il valore predefinito.
  • orderby – Permette di scegliere la modalità di ordinamento. Può essere passata più di una opzione tra quelle elencate di seguito, inserendo tra l’una e l’altra uno spazio:
    • name – Data di pubblicazione del prodotto.
    • id – Identificativo della categoria.
    • menu_order – Mostra l’ordinamento come da pannello di amministrazione.
    • parent – Ordina per categoria padre.
    • rand – Ordinamento casuale.
    • name – Titolo della categoria. Questa è l’opzione di default.
  • order – Utilizzato con l’attributo orderby permette di decidere se ordinare in modo ascendente (ASC) o discendente (DESC). Se non assegnato l’ordinamento sarà ascendente.
  • hide_empty – Nasconde le categorie che non hanno nessun prodotto assegnato. Per default è impostato a 1 (true).
  • ids – Lista degli id di categorie da visualizzare.
  • parent – Mostra le categorie figlie di una determinata categoria.  Utilizza 0 per visualizzare le categorie principali

Esempio – Visualizzare le categorie principali dello shop

mostrare le categorie principali dello shop

 

#4 – Shortcode pagina prodotto

[product_page] mostra una pagina singolo prodotto completa, accetta come parametri l’ID o lo Sku di un prodotto.

 

#5 – Shortcode Prodotti correlati

Lo shortcode [related_products] mostra i prodotti correlati all’interno della pagina di un singolo prodotto.
Se utilizzato in una pagina dove non è definito un global $product, non mostrerà alcun risultato.

Gli attributi disponibili sono:

  • limit – Numero di prodotti correlati da visualizzare
  • columns – Numero di prodotti per riga
  • orderby – Ordinamento dei prodotti (i cui valori sono uguali all’omonimo attributo dello shortcode products)

#6 – Shortcode Aggiungi al carrello

Per mostrare il prezzo di un prodotto e aggiungere il bottone “Aggiungi al carrello” puoi utilizzare lo shortcode add_to_cart.

Gli attributi che puoi utilizzare sono:

  • id – ID del prodotto da aggiungere al carrello
  • style – Codice CSS che verrà aggiungo al box che lo contiene.
  • sku – In alternativa all’id del prodotto puoi utilizzare lo sku.
  • show_price – Per default è impostato a “true” e mostra il prezzo del prodotto
  • class – Classe che viene associata al box
  • quantity – Numero di unità da aggiungere al prodotto. Per default è uguale a 1
  • order – Utilizzato con l’attributo orderby permette di decidere se ordinare in modo ascendente (ASC) o discendente (DESC). Se non assegnato l’ordinamento sarà ascendente.
  • hide_empty – Nasconde le categorie che non hanno nessun prodotto assegnato. Per default è impostato a 1 (true).
  • ids – Lista degli id di categorie da visualizzare.
  • parent – Mostra le categorie figlie di una determinata categoria.  Utilizza 0 per visualizzare le categorie principali.

Mostra URL per aggiungere un prodotto al carrello

Altro shortcode relativo all’inserimento di prodotti nel carrello è add_to_cart_url che stampa un semplice link per inserire un prodotto al carrello, accetta come parametri l’ID o lo Sku di un prodotto.

#7 – Shortcode per mostrare notifiche in pagine non-WooCommerce

Lo shortcode [shop-messages] ti permette di mostrare le notifiche WooCommerce anche nelle pagine che non appartengono a WooCommerce (shop, categorie prodotto, pagina singolo prodotto, carrello, checkout ..)

Compatibilità

Gli shortcode sopra elencati sono definiti a partire dalla versione 3.2 di WooCommerce.

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Articoli correlati

Inizia a scrivere il termine ricerca qua sopra e premi invio per iniziare la ricerca. Premi ESC per annullare.

Torna in alto