Il mondo dell'e-commerce si basa sulla flessibilità. Un negozio online di successo deve essere in grado di cambiare, adattarsi e mettere in evidenza prodotti specifici in qualsiasi momento. Molti proprietari di negozi pensano che ciò richieda uno sviluppatore, ma in realtà un potente strumento integrato in WooCommerce semplifica il processo: lo shortcode prodotto di WooCommerce. Questo strumento semplice ma versatile permette di visualizzare i prodotti, creare griglie personalizzate e realizzare pagine dinamiche senza scrivere una sola riga di codice.
Questa guida completa ti insegnerà a padroneggiare lo [prodotti] . Imparerai a utilizzare i suoi attributi per creare visualizzazioni di prodotto personalizzate e accattivanti per qualsiasi pagina, post o area widget. Che tu sia un principiante che desidera aggiungere alcuni prodotti alla tua homepage o un utente avanzato che ha bisogno di creare una landing page complessa e filtrabile, questo articolo è il tuo riferimento completo.
Le basi: l'elenco essenziale degli shortcode WooCommerce
Prima di addentrarci nello [products] , cerchiamo di capire cosa sono gli shortcode e il loro ruolo in WordPress. Uno shortcode è un piccolo frammento di codice racchiuso tra parentesi quadre, come [shortcode]. WordPress lo sostituisce come segnaposto con contenuti o funzionalità dinamiche quando la pagina viene visualizzata. È possibile utilizzare gli shortcode ovunque sia possibile aggiungere testo, inclusi l'editor classico, i blocchi di Gutenberg e i page builder come Elementor.
Sebbene la nostra attenzione sia rivolta allo [prodotti] , WooCommerce offre un elenco completo di shortcode per le pagine essenziali del negozio. Questi shortcode vengono solitamente inseriti nelle pagine che WooCommerce crea automaticamente durante la configurazione:
[woocommerce_cart]– Visualizza il contenuto della pagina del carrello.[woocommerce_checkout]– Mostra il modulo di pagamento.[woocommerce_my_account]– Visualizza la dashboard dell'account del cliente.[woocommerce_order_tracking]– Fornisce un modulo che consente ai clienti di tracciare i propri ordini.
Lo [products] è il più versatile di tutti. È la chiave per visualizzare i prodotti su pagine e post diversi dalla pagina principale del negozio. La sua struttura di base è semplicemente [products]. Di per sé, questo shortcode visualizzerà una griglia con i tuoi prodotti più recenti. La vera potenza, tuttavia, risiede nei suoi attributi.
Scopri di più: Come configurare un carrello acquisti WordPress per vendite online senza intoppi
Trasforma le tue pagine prodotto con potenti codici abbreviati
Dai vita al tuo negozio WooCommerce con layout dinamici ed esperienze di acquisto fluide.
L'anatomia dello [prodotti] shortcode
La vera flessibilità dello shortcode di prodotto di WooCommerce risiede nei suoi attributi. Gli attributi sono parametri che si aggiungono tra parentesi quadre per controllare quali prodotti vengono visualizzati e come appaiono. Potete considerarli come comandi che forniscono istruzioni specifiche per lo shortcode.
Ecco una rapida panoramica degli attributi più comuni che utilizzerai. Questo è l'elenco essenziale degli shortcode dei prodotti WooCommerce.
| Attributo | Funzione | Valori possibili |
limite | Imposta il numero di prodotti da visualizzare. | Qualsiasi numero intero positivo (ad esempio, 8, 12) |
colonne | Imposta il numero di colonne nella griglia. | 1 A 6 |
ordina per | Specifica come vengono ordinati i prodotti. | data, titolo, id, popolarità, valutazione, rand |
ordine | Imposta l'ordine di ordinamento. | ASC (Ascendente) o DESC (Discendente) |
ID | Visualizza prodotti specifici per ID. | Elenco separato da virgole degli ID prodotto (ad esempio, "1,2,3") |
SKU | Visualizza prodotti specifici per SKU. | Elenco di codici prodotto (SKU) separati da virgole (ad esempio, "felpa-01, maglietta-02") |
categoria | Filtra per slug o ID della categoria di prodotto. | Elenco di slug di categoria separati da virgole (ad esempio, "abbigliamento,accessori") |
in_vendita | Visualizza i prodotti attualmente in saldo. | VERO |
visibilità | Filtri per visibilità del prodotto. | visibile, catalogo, ricerca, in evidenza |
paginare | Abilita la suddivisione in pagine per un elenco di prodotti. | VERO |
classe | Aggiunge una classe CSS personalizzata alla griglia. | Qualsiasi nome di classe CSS (ad esempio, "my-custom-grid") |
Ricorda di utilizzare sempre le virgolette dritte (") attorno ai valori degli attributi. Un errore comune è quello di usare le virgolette curve, che interromperanno il funzionamento dello shortcode.
Leggi anche: Come risolvere il problema dei prodotti WooCommerce che non vengono visualizzati nella pagina del negozio: soluzioni rapide
Padroneggiare la selezione dei prodotti: casi d'uso pratici e avanzati di shortcode
Ora, guarda esempi concreti di shortcode per prodotti WooCommerce e impara a usarli in modo efficace. Questi esempi ti aiuteranno a creare sezioni prodotto dinamiche e personalizzate su qualsiasi pagina.
Visualizzazione dei prodotti in evidenza
Lo shortcode "Prodotti in evidenza" di WooCommerce è un ottimo modo per mettere in mostra i tuoi articoli più venduti o in promozione sulla homepage. Per utilizzarlo, devi prima contrassegnare i prodotti come "in evidenza" nella dashboard di WooCommerce. Vai su "Prodotti", passa il mouse su un articolo e clicca sull'icona a forma di stella. La stella diventerà blu, a indicare che il prodotto è in evidenza.
Shortcode: [products visibility="featured"]
Questo shortcode mostra tutti i prodotti che hai contrassegnato come in evidenza. Puoi combinarlo con altri attributi per perfezionare la visualizzazione.
Esempio: Visualizza 8 prodotti in evidenza in una griglia a 4 colonne, ordinati in modo casuale. [products visibility="featured" limit="8" columns="4" orderby="rand"]
Prodotti specifici per ID o SKU
A volte è necessario mostrare uno o due prodotti specifici, ad esempio in un post del blog o in una landing page. È qui che entra in gioco lo shortcode per gli ID prodotto di WooCommerce. È possibile utilizzare l' ids con un elenco di ID prodotto separati da virgole.
Shortcode: [products ids="12, 35, 78"]
Puoi anche utilizzare gli SKU dei prodotti, che possono essere più facili da ricordare.
Shortcode: [products skus="shirt-01, pants-02"]
Come trovare ID e SKU: Nella dashboard di WordPress, vai su WooCommerce → Prodotti. L'ID del prodotto appare in una piccola colonna accanto al nome del prodotto. Puoi anche passare il mouse sopra il titolo del prodotto per visualizzare l'ID nell'URL. Lo SKU si trova nella pagina di modifica del prodotto, nella sezione "Dati prodotto".
Filtraggio per categoria
Lo shortcode per le categorie di prodotto di WooCommerce è uno degli attributi più potenti. Permette di creare sezioni dedicate a una specifica tipologia di prodotto, come la sezione "Nuove magliette" o la pagina "Accessori".
Shortcode: [products category="t-shirts"]
Per trovare lo slug di una categoria, vai su WooCommerce → Prodotti → Categorie. Lo slug è un nome che identifica la categoria in modo leggibile negli URL.
Esempio: Visualizza 9 prodotti delle categorie "felpe con cappuccio" e "t-shirt" in 3 colonne. [products category="felpe con cappuccio, t-shirt" limit="9" columns="3"]
Visualizzazione dei prodotti in saldo e più venduti
Creare una pagina dedicata alle vendite è un'ottima strategia di marketing. Puoi farlo facilmente con uno shortcode.
Shortcode per i prodotti in offerta: [products on_sale="true"]
Allo stesso modo, puoi mettere in mostra i tuoi prodotti più performanti.
Shortcode per i più venduti: [products best_selling="true"]
Combinazione di filtri per visualizzazioni personalizzate
La vera magia avviene quando si combinano più attributi. Questo permette di creare griglie di prodotto precise e coinvolgenti.
Esempio: Visualizza i 12 prodotti più popolari e in offerta della categoria "abbigliamento" in 4 colonne. [products category="clothing" on_sale="true" orderby="popularity" limit="12" columns="4"]
Questo controllo dettagliato ti consente di creare un'esperienza di acquisto unica che mantiene i clienti coinvolti.
Opzioni di visualizzazione avanzate: impaginazione, ordinamento e stile personalizzato
Lo shortcode del prodotto WooCommerce seleziona i prodotti e ne controlla l'aspetto e il comportamento su una pagina.
Impaginazione per elenchi di prodotti di grandi dimensioni
Per le pagine con molti prodotti, è necessaria la paginazione per evitare lunghi tempi di caricamento e un'esperienza utente. L' paginate gestisce perfettamente questo aspetto.
Shortcode: [products paginate="true" per_page="12"]
L' per_page interagisce con paginate per specificare quanti articoli appaiono su ogni pagina. Questo è un elemento cruciale dello shortcode dei prodotti WooCommerce con funzionalità di paginazione.
Ordinamento e smistamento
Puoi dettare l'ordine dei tuoi prodotti utilizzando gli orderby e order .
orderby="price": Ordina i prodotti in base al loro prezzo.orderby="rating": Ordina in base alla valutazione media dei clienti.orderby="popularity": ordina in base al numero di acquisti.orderby="rand": Mescola i prodotti in modo casuale ad ogni caricamento della pagina.
L' order definisce la direzione dell'ordinamento. order="ASC" per l'ordinamento crescente (ad esempio, dal prezzo più basso al più alto) e order="DESC" per l'ordinamento decrescente (ad esempio, dal prezzo più alto al più basso).
Esempio: Mostra 10 prodotti ordinati dal punteggio più alto al più basso. [products limit="10" orderby="rating" order="DESC"]
Stile personalizzato con classi
Per designer e sviluppatori, l' `class` è uno strumento potente per la personalizzazione dello shortcode dei prodotti WooCommerce. Consente di aggiungere una classe CSS univoca al contenitore della griglia dei prodotti. Questo permette di applicare uno stile personalizzato all'output dello shortcode senza influenzare le altre griglie di prodotti presenti sul sito.
Shortcode: [products class="hero-products"]
Quindi, nel tuo CSS personalizzato, puoi scegliere come target questa classe: .hero-products .product { background-color: #f5f5f5; border: 1px solid #ccc; }
Suggerimenti sulla compatibilità
Lo shortcode dei prodotti WooCommerce funziona con l'editor classico, con l'editor a blocchi Gutenberg (utilizzando un blocco "Shortcode" dedicato) e con la maggior parte dei principali page builder. È inoltre progettato per essere responsive, ovvero si adatta a schermi di diverse dimensioni. Tuttavia, testa sempre gli shortcode su desktop e dispositivi mobili per assicurarti che vengano visualizzati correttamente.
Casi d'uso strategici: dove e perché utilizzare gli shortcode dei prodotti
Conoscere la sintassi è una cosa, usarla strategicamente è un'altra. Ecco alcune idee per migliorare il tuo negozio utilizzando lo shortcode dei prodotti di WooCommerce.
- Pagina iniziale: crea sezioni dedicate per "Nuovi arrivi", "Prodotti più venduti" e "In offerta" per indirizzare immediatamente i visitatori verso i tuoi prodotti più importanti.
- Articoli del blog: incorpora un singolo prodotto o una piccola griglia di prodotti in un articolo del blog. Se scrivi un articolo sullo stile di una nuova giacca, usa uno shortcode per visualizzare quella giacca specifica e altri prodotti complementari direttamente sotto l'articolo.
- Landing page per categoria: crea landing page personalizzate per una categoria specifica. Puoi aggiungere un testo univoco e quindi utilizzare uno shortcode per visualizzare solo i prodotti di quella categoria.
- Pagine di destinazione di marketing: per una nuova campagna, puoi creare una pagina di destinazione che presenta prodotti con un tag specifico o di una nuova collezione, utilizzando uno shortcode di prodotto WooCommerce personalizzato per generare conversioni.
Per saperne di più: Come aggiungere un'opzione per la mancia nella pagina di checkout di WooCommerce
Procedure consigliate per la risoluzione dei problemi e l'ottimizzazione
Anche con uno strumento semplice come uno shortcode, possono sorgere problemi. Ecco come risolvere i problemi più comuni e garantire il buon funzionamento del tuo sito.
- Controlla gli errori di battitura: una parentesi mancante, un errore di battitura nel nome di un attributo o virgolette errate possono far sì che lo shortcode venga visualizzato come testo normale. Controlla attentamente il codice.
- Trova ID e slug: assicurati di utilizzare gli ID prodotto, gli SKU e gli slug di categoria corretti. Il modo più semplice per verificarli è tramite la dashboard di WordPress.
- Caching e prestazioni: visualizzare troppi prodotti con un singolo shortcode può rallentare il sito. Utilizza gli
limitepaginateper controllare il numero di prodotti. Utilizza un buon plugin di caching per velocizzare i tempi di caricamento delle pagine.
- Esigenze avanzate: se hai bisogno di filtri dinamici, paginazione AJAX o altre funzionalità complesse, potresti aver bisogno di un plugin dedicato. Strumenti come WooCommerce Product Table o WooCommerce Product Filters possono estendere significativamente le funzionalità dello shortcode.
Conclusione: il tuo kit di strumenti per la visualizzazione dinamica dei prodotti WooCommerce
Lo shortcode dei prodotti di WooCommerce è una vera e propria svolta per i proprietari di negozi. Offre un modo semplice ma efficace per creare visualizzazioni di prodotti dinamiche, coinvolgenti e altamente personalizzate sul tuo sito web. Padroneggiando lo [prodotti] e i suoi attributi, puoi trasformare le tue pagine statiche in strumenti di merchandising accattivanti.
Inizia dalle basi, come una sezione dedicata ai prodotti in evidenza sulla tua homepage, e poi sperimenta combinazioni più avanzate per creare landing page uniche e integrare strategicamente i prodotti nei contenuti del tuo blog. Questo shortcode ti permette di creare un negozio online professionale e intuitivo senza dover modificare alcun codice. Aggiungi questa guida ai preferiti e inizia subito a creare una presentazione dei prodotti migliore!
Domande frequenti sullo shortcode dei prodotti WooCommerce
Cos'è uno shortcode WooCommerce?
Uno shortcode WooCommerce è un piccolo pezzo di testo racchiuso tra parentesi quadre (ad esempio, [prodotti]). WordPress lo sostituisce con contenuti dinamici dal tuo negozio WooCommerce, come elenchi di prodotti, contenuti del carrello o moduli di pagamento.
Come si usa l'elenco degli shortcode dei prodotti WooCommerce?
Puoi utilizzare l'elenco degli shortcode dei prodotti WooCommerce aggiungendo lo [prodotti] e i suoi attributi a qualsiasi pagina, post o area widget del tuo sito WordPress. Ogni attributo ti consente di filtrare o personalizzare la visualizzazione dei prodotti.
Come posso visualizzare i prodotti di una categoria specifica?
È possibile utilizzare l' category all'interno dello [products] . Ad esempio, [products category="clothing"] visualizzerà tutti i prodotti della categoria "clothing". Questo è lo shortcode della categoria di prodotto di WooCommerce.
Posso mostrare i prodotti di un tag o attributo specifico utilizzando uno shortcode?
Sì. Lo [products] supporta il filtraggio tramite slug dei tag (tag="new-collection") e persino tramite attributi personalizzati e i relativi termini. Questo offre un livello di controllo molto elevato sui prodotti visualizzati.
Come si usa uno shortcode per i prodotti in evidenza di WooCommerce?
Per utilizzare lo shortcode dei prodotti in evidenza di WooCommerce, prima contrassegna i prodotti come in evidenza facendo clic sull'icona a forma di stella accanto a essi nell'elenco dei prodotti. Quindi, utilizza lo shortcode [products visibility="featured"] su qualsiasi pagina o articolo.
