WooCommerce shortcodes consentono di visualizzare le informazioni dal tuo negozio in modi nuovi ed emozionanti. WooCommerce viene pre-costruito con codici brevi, ed è possibile installare i plugin per aggiungere più. Se si desidera elencare i prodotti in una tabella, visualizzare il carrello ovunque sul tuo sito, o qualcos’altro-sei arrivato nel posto giusto!
Probabilmente avete incontrato codici brevi prima, se siete nuovi a WordPress o sono stati in uso per qualche tempo. Shortcodes sono, come suggerisce il nome, brevi pezzi di codice che svolgono una sorta di funzione. Gli shortcode WooCommerce, ad esempio, ti consentono di aggiungere funzioni relative a WooCommerce a pagine, post, barre laterali e aree widgetizzate di WordPress sul tuo sito web.
Se siete alla ricerca di un modo per semplificare l’esperienza di acquisto può farlo utilizzando codici brevi WooCommerce. Possono aiutarti a migliorare i flussi di acquisto degli utenti e ottimizzare il tuo negozio online per le conversioni.
Ad esempio, puoi utilizzare i codici brevi WooCommerce per:
- Visualizzare un elenco dei tuoi prodotti più votati sulla tua home page.
- Vetrina prodotti correlati ogni volta che un cliente esprime un interesse per un prodotto.
- Evidenziare prodotti in vetrina in blocchi Gutenberg, barre laterali, altre aree widgetized.
Con questo in mente, in questa guida completa, spiegheremo come è possibile utilizzare i codici brevi WooCommerce per offrire esperienze utente migliori e far crescere la vostra linea di fondo. Lungo la strada, spiegheremo anche quando (e perché) si dovrebbe usare ogni shortcode. Vedremo i codici brevi che vengono con WooCommerce stesso, e codici brevi che è possibile aggiungere con altri plugin.
Come usare i codici brevi WooCommerce
I codici brevi sembrano e suonano un po ‘ tecnici, ma in realtà sono progettati per chiunque. Non hai bisogno di alcuna abilità di codifica.
Basta inserire il codice in qualsiasi editor di testo all’interno di WordPress, o per un “Shortcode” blocco se si utilizza Gutenberg o una pagina builder come Elementor o Visual Composer:
È possibile combinare codici brevi e visualizzare più codici brevi in una singola pagina. Ad esempio, è possibile combinare lo shortcode di monitoraggio dell’ordine con lo shortcode dell’account utente. Tutto quello che dovete fare è inserire entrambi i codici brevi sulla stessa pagina. Sarebbe simile a questo:
prodotto WooCommerce elenco codici funzione
Ci sono anche i codici brevi per elenco prodotti in modi diversi nel tuo negozio. Questi aggiungono ulteriore flessibilità, quindi non sei bloccato con le visualizzazioni limitate che ottieni nelle pagine del negozio e delle categorie. Invece, puoi utilizzare i codici brevi WooCommerce per elencare uno o più prodotti letteralmente ovunque sul tuo sito WordPress, in una griglia o in una vista elenco basata su tabelle.
WooCommerce products shortcode
WooCommerce ha un shortcode che consente di elencare prodotti specifici in un layout a griglia:
. È inoltre possibile aggiungere altri parametri ad esso (come orderby e colonne) per personalizzare l’aspetto front-end.
È possibile scegliere il numero di prodotti da elencare per riga. Ad esempio, se si desidera visualizzare sei prodotti in tre colonne ordinate per data in ordine crescente, utilizzare lo shortcode: . Allo stesso modo, per visualizzare i prodotti in ordine decrescente, è sufficiente sostituire ASC con DESC.
WooCommerce quick view shortcode
Il shortcode funziona perfettamente con il WooCommerce Quick View Pro plugin. Questo aggiunge i pulsanti di visualizzazione rapida all’elenco dei prodotti come un modo rapido per consentire alle persone di effettuare l’acquisto senza lasciare la pagina corrente:
Tutto quello che dovete fare è installare il WooCommerce Quick View Pro plugin per il tuo sito WordPress e sarà automaticamente aggiungere pulsanti di visualizzazione rapida al front-end. In questo modo, i clienti possono vedere gli attributi e le variazioni del prodotto e aggiungere prodotti al carrello senza passare alla pagina del singolo prodotto.
Leggi la nostra guida completa al WooCommerce Quick View Pro shortcode.
WooCommerce tabella dei prodotti shortcode
Mentre il built-in prodotti WooCommerce shortcode è piuttosto flessibile, consente solo di visualizzare in un layout a griglia. Non è l’ideale per i negozi che desiderano mostrare più prodotti per pagina, ad esempio se stai creando un modulo d’ordine rapido di una pagina o un negozio all’ingrosso. In tal caso, si potrebbe essere meglio con un shortcode tabella dei prodotti.
Mentre WooCommerce stesso non ha un shortcode tabella dei prodotti, si può facilmente aggiungere uno con il plugin Tabella dei prodotti WooCommerce. Lo shortcode di base è ed è possibile configurare questo utilizzando oltre 50 opzioni shortcode.
Visualizza l’elenco completo delle opzioni shortcode che ottieni con la Tabella dei prodotti WooCommerce.
WooCommerce aggiungi al carrello shortcode
WooCommerce viene fornito con un built-in shortcode che consente di inserire un pulsante aggiungi al carrello per un prodotto specifico ovunque ti piace. Basta aggiungere l’ID e / o SKU del prodotto che si desidera visualizzare il pulsante Aggiungi al carrello per:
Se si desidera includere il prezzo del prodotto, quindi utilizzare:
Per i prodotti semplici, questo mostrerà un pulsante aggiungi al carrello.
Per i prodotti variabili, mostrerà un pulsante ‘Seleziona opzioni’:
Personalmente, non mi piace perché i clienti devono visitare la pagina del singolo prodotto per scegliere le loro varianti. È preferibile utilizzare la Tabella dei prodotti WooCommerce per elencare uno o più prodotti variabili in una tabella, completa di menu a discesa di variazione:
In questo modo, i clienti possono selezionare le opzioni e aggiungere al carrello dalla pagina in cui
Categoria di prodotto shortcode
La categoria di prodotto shortcode elenca i prodotti di una categoria specifica in un layout di griglia standard.
Questo è il shortcode per:
Se non ti piace il layout della griglia, o se si desidera un maggiore controllo su quali informazioni visualizzare su ogni prodotto, quindi è possibile utilizzare il Prodotto WooCommerce Tabella shortcode, invece. Il plugin Tabella prodotto WooCommerce è dotato di un’opzione categoria shortcode, che è possibile utilizzare per elencare i prodotti da categorie specifiche solo:
a Differenza di built-in shortcode che viene fornito con WooCommerce, è possibile scegliere quali colonne di informazioni da visualizzare su ogni prodotto, e consentire ai clienti di selezionare varianti e scegli quantità direttamente dal prodotto tavolo. Questo rende lo shopping molto più veloce e aumenta il tasso di conversione.
WooCommerce categorie di prodotti shortcode
Le categorie di prodotti shortcodes elenca le categorie di prodotti, invece dei prodotti al loro interno. Biru:
elencherà qualsiasi 4 delle tue categorie WooCommerce, ordinate per nome.
Diamo un’occhiata ad alcuni degli attributi e dei codici brevi che vanno con le categorie di prodotti:
- limite controlla il numero di categorie che vengono visualizzate.
- orderby controlla l’ordinamento; “nome” e “data” sono opzioni valide.
- l’ordine rappresenta l’ordine delle categorie di prodotti, ad esempio “ASC” o “DESC”.
- le colonne mostrano il numero di colonne in cui sono disposte le categorie.
- hide_empty viene utilizzato per nascondere categorie di prodotti senza prodotti.
- parent ti consente di mostrare solo le categorie di prodotti di alto livello.
- Gli ID rappresentano che gli ID di categoria possono essere impostati in base solo ai risultati specificati in uscita.
Prodotti recenti
Il WooCommerce Prodotti recenti shortcode visualizza i prodotti che hai recentemente aggiunto al tuo negozio online.
Questo è il shortcode per prodotti recenti:
Tuttavia, se si desidera visualizzare l’effettiva data in cui il prodotto è stato aggiunto al tuo store online, o se si vuole più controllo, quindi è possibile utilizzare il Prodotto WooCommerce Tabella plugin, invece.
Basta ordinare la tabella dei prodotti per data in ordine decrescente e utilizzare il numero limite del prodotto per controllare il numero di prodotti da includere:
Se si include una data colonna della tabella, quindi, i clienti possono facilmente vedere quali prodotti sono stati aggiunti recentemente all’archivio.
Prodotti in vetrina
Lo shortcode dei prodotti in vetrina per WooCommerce ti consente di elencare i prodotti in vetrina separatamente dal resto del tuo negozio. Usalo per elencare i prodotti in vetrina ovunque ti piace, ad esempio nei post del blog o in altre pagine.
I prodotti in vetrina sono prodotti WooCommerce che hanno un’icona a stella blu accanto a loro nella pagina Tutti i prodotti:
Questo è lo shortcode per mostrare i prodotti in vetrina: . L’output dovrebbe essere simile a questo:
di Nuovo, se non ti piace l’immagine della griglia, quindi è possibile elencare i prodotti in vetrina utilizzando il WooCommerce Prodotto Tavolo shortcode plugin invece:
Questo è un elenco di prodotti in vetrina in un layout di tabella, con qualsiasi colonne di informazioni si è scelto il plugin nella pagina delle impostazioni.
WooCommerce prodotti di vendita shortcode
I prodotti di vendita shortcode consentono di mostrare i prodotti attualmente in vendita. È possibile visualizzare facilmente utilizzando il codice:
Bestseller di prodotti shortcode
Utilizzare il seguente WooCommerce shortcode per visualizzare i tuoi migliori di tutti i tempi di vendita di prodotti in una griglia:
Il quick view appariranno i pulsanti sul fronte-fine, se avete il WooCommerce Quick View Pro plug-in installato per il vostro sito WordPress.
Se preferisci un layout di tabella, puoi anche elencare i prodotti più venduti o popolari con lo shortcode della tabella dei prodotti WooCommerce come questo:
Leggi il nostro tutorial completo su come elencare i prodotti popolari con la Tabella dei prodotti WooCommerce.
I prodotti più votati
È possibile utilizzare il Top Rated shortcode prodotti insieme a WooCommerce built-in recensioni e valutazioni caratteristica per mostrare i vostri prodotti più votati. Usa lo shortcode:
È possibile anche un elenco di top rated prodotti in una tabella utilizzando il WooCommerce Prodotto Tavolo shortcode:
prodotti Correlati shortcode
prodotti Correlati sono un elenco di prodotti che sono simili al prodotto che il cliente è la navigazione. Questi verranno visualizzati direttamente sotto il prodotto principale nella pagina del singolo prodotto, ma è possibile utilizzare il WooCommerce prodotti correlati shortcode per elencare i prodotti correlati altrove.
Usa lo shortcode per visualizzare i prodotti correlati ovunque sul tuo sito WordPress.
Aggiungi al carrello pulsante shortcode
Il WooCommerce shortcode consente di mostrare il prezzo e aggiungere al carrello pulsante per un singolo prodotto in base al suo ID. Ecco come appare sul front-end:
Potresti considerare di aggiungere questo a un’area widgetizzata sul tuo negozio online o un post sul blog.
Questo codice funziona con il WooCommerce Quick View Pro plugin. Quando si utilizzano entrambi i plugin insieme, i pulsanti di visualizzazione rapida appariranno accanto ai pulsanti Aggiungi al carrello. Questo è l’ideale se stai visualizzando prodotti variabili o se vuoi che i clienti possano modificare la quantità prima di aggiungerla al carrello. I clienti possono visualizzare informazioni aggiuntive sul prodotto, scegliere quantità e variazioni e aggiungere al carrello da una lightbox quick view. Questo li mantiene sulla pagina originale invece di portarli a una pagina di prodotto separata.
Se preferisci visualizzare i pulsanti Aggiungi al carrello per più prodotti, o se non ti piace il formato predefinito con l’immagine grande, puoi invece utilizzare WooCommerce Product Table.
Scegli le colonne che desideri includere nella tabella dei prodotti (assicurati di includere la colonna aggiungi al carrello!) e utilizzare il shortcode per inserirlo ovunque ti piace. Utilizzare l’opzione includi per scegliere quali prodotti includere, ad esempio:
Posso mostrare codici brevi all’interno di codici brevi?
A volte, si potrebbe desiderare di codici brevi nido – per esempio, per aggiungere il WordPress audio player shortcode in modo che aggiunge un lettore musicale incorporato alla lista dei prodotti.
Normalmente non puoi annidare i codici brevi WooCommerce. Tuttavia, è possibile ottenere questo risultato utilizzando il prodotto WooCommerce Tabella shortcode per elencare i prodotti, e aggiungere altri codici brevi ai campi che si sta visualizzando all’interno della tabella dei prodotti.
Ad esempio, diciamo che si desidera elencare 8 prodotti, con un lettore audio incorporato per ciascuno di essi. È possibile aggiungere il lettore audio ai campi descrizione breve o lunga del prodotto e visualizzarli come colonne nella tabella. Si utilizza quindi lo shortcode della tabella dei prodotti WooCommerce per elencare quei prodotti specifici, inclusa la colonna descrizione breve o lunga che contiene i lettori audio.
Per far funzionare i codici brevi da altri plugin all’interno della tabella dei prodotti, assicurati di abilitare l’opzione ‘Codici brevi’ nella pagina delle impostazioni della tabella dei prodotti WooCommerce:
shortcodes pagina WooCommerce
Iniziamo dando un’occhiata ad alcuni dei più comuni shortcodes pagina WooCommerce. Questi creano automaticamente intere pagine, come il carrello o il checkout.
WooCommerce carrello
Il WooCommerce carrello shortcode – – consente di visualizzare il carrello della spesa del cliente sul front-end del tuo sito WordPress. Puoi aggiungerlo a pagine o post di WordPress o visualizzarlo in aree widgetizzate (come la barra laterale).
Sarà simile a questo sul front-end:
Quando installi e attivi WooCommerce sul tuo sito web WordPress, crea automaticamente alcune pagine per te, inclusa la pagina del carrello, che utilizza questo shortcode. Puoi utilizzare lo shortcode per aggiungere il carrello a parti aggiuntive del tuo sito.
WooCommerce checkout page
Puoi utilizzare lo shortcode WooCommerce checkout – – per generare una pagina di checkout completa sul tuo sito di e-commerce. Questa pagina viene creata automaticamente per te quando installi WooCommerce. È inoltre possibile utilizzare lo shortcode per inserire il checkout altrove (ad esempio, sotto una tabella di prodotto per creare uno shopping di una pagina).
Lo shortcode di checkout di WooCommerce include i dettagli di fatturazione, i dettagli dell’ordine e la possibilità di spedire a un indirizzo diverso.
WooCommerce order tracking
WooCommerce consente ai proprietari dei negozi di creare una pagina di tracciamento degli ordini utilizzando shortcode. Anche se questa pagina non viene fornito con WooCommerce fuori dalla scatola, si può semplicemente creare una nuova pagina e inserire lo shortcode nell’editor di testo per creare il proprio. Dovrebbe essere simile a questo sul front-end:
Pagina dell’account utente WooCommerce
WooCommerce crea automaticamente una pagina My Account quando la installi per la prima volta sul tuo sito web. Questo viene fatto utilizzando il shortcode. È possibile utilizzare lo shortcode per inserire l’area account in posizioni aggiuntive in tutto il sito.
Il mio account shortcode funge anche da login e modulo di registrazione per gli utenti disconnessi. Di conseguenza, puoi anche usarlo come shortcode di accesso WooCommerce.
Aggiungi WooCommerce shortcode più facilmente con un pulsante della barra degli strumenti
Mentre è possibile trovare tutti i tipi di WooCommerce plugin shortcode sul web, si consiglia di utilizzare la connessione WooCommerce Shortcode plugin da WooThemes. Una volta installato e attivato, questo plugin aggiunge un TinyMCE pulsante a discesa per l’editor di testo WordPress per darvi un facile accesso a tutti i built-in codici brevi WooCommerce. Ciò consente di risparmiare dover copiare e incollare i codici brevi.
Dopo aver attivato il plugin WooCommerce Shortcodes, vedrai un nuovo pulsante shortcode nel tuo editor di testo WordPress. Una volta che si clicca su questo pulsante, una discesa verrà visualizzato un elenco contenente tutti gli standard WooCommerce shortcode:
Risoluzione dei problemi WooCommerce codici funzione
a Volte, si incolla il corretto WooCommerce shortcode nel editor di testo, ma non viene visualizzato l’output corretto. In questo caso, controlla di non aver accidentalmente incorporato lo shortcode all’interno dei tag <pre>. È possibile rimuovere questi tag andando nell’editor di testo HTML.
Best WooCommerce shortcodes for Product Table
Prima di finire, ecco una rapida ripartizione dei più utili built-in WooCommerce shortcodes che è possibile utilizzare con il WooCommerce Product Table plugin e il WooCommerce Quick View Pro plugin:
| Plugin Required | Shortcode name | WooCommerce shortcode | Description |
| None | Shopping Cart | Displays a shopping cart on the front-end of the website | |
| None | Checkout Page | Displays a complete checkout page. | |
| None | Order Tracking | Displays an order tracking form for your e-commerce website. | |
| Nessuno | Pagina account utente | Visualizza una pagina ‘Il mio account’ per gli utenti | |
| WooCommerce Product Table | Product Price/Cart Button | Aggiunge un prezzo del prodotto (o aggiungi al carrello) pulsante per la tabella dei prodotti. | |
| WooCommerce Quick View Pro | Prodotti multipli Shortcode | Visualizza più prodotti (selezionati) su una pagina o post con pulsanti di visualizzazione rapida. | |
| WooCommerce Quick View Pro | Categoria di prodotto | Visualizza specifiche categorie di prodotti sul front-end del sito. | |
| WooCommerce Quick View Pro | Categoria di prodotto di Slug | Visualizza i prodotti di una specifica categoria di prodotto insieme ai pulsanti di visualizzazione rapida. | |
| WooCommerce Quick View Pro | Prodotti recenti | Visualizza un elenco dei prodotti più recenti che hai aggiunto al tuo negozio online insieme ai pulsanti di visualizzazione rapida. | |
| WooCommerce Quick View Pro | Prodotti in vetrina | Visualizza un elenco dei prodotti in vetrina con i pulsanti di visualizzazione rapida. | |
| WooCommerce Quick View Pro | Prodotto in vendita | Visualizza un elenco di tutti i prodotti in vendita con i pulsanti di visualizzazione rapida. | |
| WooCommerce Quick View Pro | Prodotto più venduto | Visualizza un elenco dei prodotti più venduti con i pulsanti di visualizzazione rapida. | |
| WooCommerce Quick View Pro | Prodotto più votato | Visualizza un elenco dei prodotti più votati con i pulsanti di visualizzazione rapida. | |
| WooCommerce Quick View Pro | Prodotto correlato | Visualizza un elenco di prodotti correlati con pulsanti di visualizzazione rapida su singole pagine di prodotto. | |
| WooCommerce Quick View Pro | Visualizza un pulsante ‘Aggiungi al carrello’ su un singolo prodotto, utilizzando l’ID prodotto |
Sovralimentare il tuo negozio WooCommerce con codici brevi!
I codici brevi WooCommerce sono piccoli frammenti di codice che ti consentono di aggiungere funzionalità pulite al tuo negozio online. Puoi aggiungerli alle pagine del negozio, ai post o alle aree widgetizzate del tuo sito web (come la barra laterale). Alcuni codici brevi WooCommerce supportano anche i parametri che è possibile utilizzare per personalizzare l’output.
Tuttavia, non tutti i codici brevi WooCommerce offrono una buona esperienza utente. Invece di incollarli così come sono, potresti considerare di usarli insieme al plug-in WooCommerce Product Table o al plug-in WooCommerce Quick View Pro.
Ad esempio, è l’unico modo per consentire ai clienti di scegliere quantità e variazioni al di fuori della pagina del prodotto e consente di mostrare informazioni aggiuntive su ciascun prodotto e controllare le dimensioni dell’immagine. Se vuoi una maggiore flessibilità, puoi installare WooCommerce Product Table e iniziare a sperimentare con le sue opzioni shortcode 50+. Questo vi darà un aspetto più ordinato e organizzato sul front-end, garantendo nel contempo il vostro sito migliora l’esperienza di acquisto del cliente.
Per ricapitolare, codici brevi WooCommerce consentono di migliorare il viaggio del compratore, vedere più prodotti in una sola volta, e rende facile per i clienti di navigare rapidamente attraverso il processo di checkout. Puoi anche provare altri plugin WooCommerce shortcode (come WooCommerce Coupon Shortcodes) che ti permettono di sfruttare funzionalità avanzate come l’aggiunta di codici promozionali al tuo negozio online.