5 semplici modi per visualizzare i prodotti su un negozio online wordpress

La visualizzazione di prodotti su un negozio online di WordPress può davvero essere un incubo per un principiante di e-commerce. Quando ho iniziato a costruire il mio negozio online, ho pensato che sarebbe stato un gioco da ragazzi inserire i miei articoli nella home page del mio sito web. Ma l'intero compito è stato piuttosto arduo!

Secondo la mia esperienza, far apparire i prodotti sul tuo sito web può richiedere molto del tuo tempo, soprattutto se sei nuovo nell'e-commerce. Sono venuto a sapere che è un'attività che richiede una buona conoscenza di WordPress.

Prodotti visualizzati su un negozio online

Di Jan Saints (Opera propria): CC-BY-2.0

Se stai creando un negozio online WordPress per la prima volta, devi assolutamente imparare come configurare un sito Web generale con questo sistema di gestione dei contenuti. È inoltre necessario acquisire dimestichezza con cose come plug-in di e-commerce, widget e codici brevi. Inoltre, se utilizzi WooCommerce, devi conoscere le opzioni di visualizzazione del prodotto disponibili e comprendere le impostazioni generali del plug-in. Questa semplice guida su come creare un negozio online ed esporre oggetti (di Riccardo Andronaco) spiega tutto questo e l'ho trovato molto utile.

In questo articolo, parlerò di cinque modi per visualizzare e organizzare i prodotti su un sito Web di e-commerce WordPress. Continua a leggere per scoprire come visualizzare gli elementi sulle pagine del tuo sito Web e come disporli di conseguenza.

Cinque modi per visualizzare e disporre gli articoli su un negozio online di WordPress

1. Il metodo automatico
2. Widget
3. Plugin
4. Codici brevi
5. Sliders

1. Utilizzo del metodo automatico

Come suggerisce il nome, non devi fare nulla per far apparire i prodotti nella pagina del negozio. Gli elementi vengono visualizzati man mano che vengono aggiunti dalla dashboard. Sono disposti automaticamente in ordine alfabetico o in modo casuale con o senza categorie a seconda delle impostazioni di visualizzazione di WooCommerce.

La homepage può contenere solo un certo numero di prodotti, il che significa che se hai un numero elevato di prodotti, alcuni di essi verranno inseriti nelle pagine 2, 3, 4 e così via.

Questo metodo rende difficile per i tuoi clienti conoscere tutti i tipi di prodotti nel tuo negozio poiché non include categorie e alcuni articoli sono nascosti in altre pagine.

Potrebbe essere necessario evitare questo metodo se è possibile utilizzare metodi migliori (descritti di seguito) per visualizzare gli elementi. Ma se hai un numero di elementi che possono stare in una pagina, ad esempio la home page, puoi adottare questo metodo.

Prodotti visualizzati in modo casuale

Di Jan Saints (Opera propria): CC-BY-2.0

2. Utilizzo dei widget

Come forse saprai, un widget in WordPress è un piccolo blocco di contenuto che può essere posizionato nelle sezioni della barra laterale e del piè di pagina. Fornisce un modo semplice e facile per personalizzare un sito web. Alcuni widget comuni includono: post recenti, casella di ricerca, categorie e menu a piè di pagina.

In un sito Web di e-commerce, i widget possono essere utilizzati per visualizzare le categorie di prodotti nella barra laterale o nel piè di pagina. Possono quindi essere un ottimo modo per potenziare il metodo automatico (discusso sopra) che non include categorie di prodotti.

Alcuni fantastici widget forniti con i temi di eCommerce WordPress includono prodotti popolari, prodotti recenti, prodotti più venduti, prodotti più votati e prodotti in primo piano. Questi widget sono personalizzabili, il che significa che puoi rinominarli con le categorie effettive dei tuoi articoli. Puoi anche trascinarli e rilasciarli per ottenere un arrangiamento adatto al tuo stile.

Poiché i widget possono visualizzare solo i prodotti sulle barre laterali e sui piè di pagina, la maggior parte dei proprietari di negozi online li trova indesiderabili. Il posto migliore per visualizzare gli elementi è sulla barra principale di una pagina, cosa che non può essere ottenuta con i widget.

Prodotti visualizzati su una barra laterale con l'aiuto di un plugin

Di Jan Saints (Opera propria): CC-BY-2.0

3. Utilizzo di plugin

In WordPress, un plugin è un insieme di programmi che contiene un gruppo di funzioni, caratteristiche o servizi. In questo sistema di gestione dei contenuti ci sono decine di migliaia di plugin (sia gratuiti che premium) adatti a un'ampia gamma di esigenze. Esistono plug-in per tutti i tipi di siti Web, ad esempio, ci sono plug-in per eCommerce (come WooCommerce), directory, blog, piattaforme di rivendita e prenotazione.

Quando si tratta di visualizzare e disporre gli articoli su un negozio online, ci sono una miriade di plugin che puoi utilizzare per eseguire questa operazione. Ma la maggior parte dei plugin non sono abbastanza efficaci, quindi è necessario scegliere quelli che hanno dimostrato di funzionare.

I plugin più consigliati per la visualizzazione di articoli su un negozio online WordPress sono Ultimate Product Catalog e WooCommerce Product Sort and Display.

Il plug-in di ordinamento e visualizzazione funziona meglio con un altro plug-in chiamato Endless Scroll che ti consente di visualizzare un gran numero di articoli sulla tua pagina del negozio. Dopo aver installato e attivato i due plugin, è necessario accedere alle categorie di prodotti e trascinare e rilasciare le categorie per ottenere la visualizzazione corretta. È quindi possibile impostare il numero di prodotti da mostrare per categoria con collegamenti per visualizzare tutti.

Per quanto riguarda l'ordinamento, il plug-in viene fornito con l'ordinamento predefinito e l'ordinamento per popolarità, novità, prezzo (da basso ad alto e viceversa), in vendita e in primo piano. Alcune di queste funzionalità vengono fornite con la versione premium del plug-in, quindi si consiglia di utilizzare questa versione.

L'altro plugin, Ultimate Product Catalog, è un po 'complesso. Dopo aver installato e attivato il plug-in, è necessario aggiungere tutti i prodotti e le categorie su di esso per ottenere ID che è possibile utilizzare negli shortcode per visualizzare i propri articoli. Devi anche creare dei piccoli cataloghi per i tuoi articoli.

Ad esempio, il seguente shortcode mostrerà i prodotti sul catalogo con ID "x".

o

Il plug-in è ricco di funzionalità come layout di catalogo personalizzabili, prezzi di vendita, importazione di prodotti, simbolo di valuta, breadcrumb, condivisione sui social media, recensione e valutazioni del prodotto, integrazione SEO by Yoast e un gran numero di opzioni di impostazione.

Gli stili del catalogo prodotti inclusi nel plug-in includono: layout minimalista, a blocchi, al passaggio del mouse e a schede. Alcuni di questi stili e anche alcune delle funzionalità sopra descritte sono disponibili con la versione premium del plug-in.

Prodotti visualizzati in uno stile di blocco con l'aiuto di un plugin

Di Jan Saints (Opera propria): CC-BY-2.0

4. Utilizzo di shortcode

Se stai utilizzando WooCommerce per il tuo negozio online, puoi trovare gli shortcode per essere il modo più semplice per visualizzare i prodotti sulla tua pagina del negozio. Gli shortcode funzionano con ID prodotto e categoria e SKU e possono essere semplicemente copiati e incollati nella pagina del negozio per visualizzare gli articoli. Vedi gli shortcode di seguito.

- mostra l'elenco delle categorie.

- mostra un numero specifico di categorie e funziona bene con i seguenti argomenti. Nota: questi argomenti possono funzionare anche con questo shortcode.

• number = "null" - per mostrare il numero di categorie.
• orderby = "nome" - per mostrare le categorie quando ordinate per nome. Nota: il valore "nome" può essere sostituito con data, rand (casuale), modificato e nessuno.
• order = "asc" - per mostrare le categorie se ordinate in ordine crescente. Nota: il valore "asc" può essere sostituito con "desc" per ordinare in ordine decrescente.
• colonne = "x" - per mostrare le colonne "x" di una categoria.
• hide_empty = "1" - per nascondere le categorie.
• hide_empty = "0" - per mostrare le categorie.
• parent = "0" - per visualizzare le categorie di primo livello.
• ids = "x" - per mostrare la categoria con id "x".
• categoria = "x" - per mostrare la categoria "x".

• categories_limit - per mostrare un numero limitato di categorie.
• archive_template - per mostrare un modello di archivio specifico per un particolare elenco.
• design_scheme - per mostrare un colore o una dimensione specifica.
• sort = "0" - per disabilitare il selettore di ordinamento del prodotto.
• sort = "1" - per abilitare il selettore di ordinamento del prodotto.
• = "1" - per abilitare lo shortcode.
• post_type - per mostrare le voci di un diverso tipo di post.
• per_row - per mostrare i prodotti per riga.
• vuoto - per mostrare un determinato testo quando non ci sono prodotti da visualizzare.

• - visualizza gli elementi "y" della categoria "x" visualizzati nelle colonne "z" e disposti in ordine decrescente a seconda della data in cui sono stati pubblicati.
• - mostra l'elenco dei prodotti.
• - mostra il nome del prodotto. Nota: il valore "nome" può essere sostituito con altri valori per formare più codici brevi. Alcuni di questi valori includono: prezzo, descrizione, breve descrizione, tabella attributi, SKU, spedizione, galleria e categorie correlate.
• - mostra le categorie per la pagina di elenco dei prodotti corrente.
• - mostra i prodotti per la pagina di elenco dei prodotti corrente.
• - mostra il pangrattato.
• - mostra un numero limitato di prodotti.
• - mostra un URL di ritorno ai prodotti che punta alla pagina di elenco dei prodotti principale.
• - mostra i prodotti attualmente in vendita.
• - mostra il prodotto con ID "x".
• - mostra i prodotti con ID "x", "y" e "z".
• - mostra il prodotto con SKU "xyz"
• - mostra il prodotto con SKU "abc", "def" e "ghi".
• - mostra il prezzo e il pulsante Aggiungi al carrello per un prodotto con ID "x".
• - mostra il prezzo e il pulsante aggiungi al carrello per un prodotto con SKU "x".
• - Visualizza il massimo "x" elementi.
• - visualizza i prodotti con un certo attributo, ad esempio l'attributo "colore" e il colore è "nero".

• - visualizza "x" prodotti recenti visualizzati in colonne "y" e disposti in ordine decrescente a seconda della data in cui sono stati pubblicati.
• - mostra "x" prodotti in evidenza visualizzati in colonne "y" e disposti in ordine decrescente a seconda della data in cui sono stati pubblicati.
• - mostra "x" prodotti popolari visualizzati in colonne "y" e disposti in ordine decrescente a seconda della data in cui sono stati pubblicati.
• - mostra "x" i prodotti più votati visualizzati in colonne "y" e disposti in ordine decrescente a seconda della data in cui sono stati pubblicati.
• - mostra "x" i prodotti più venduti visualizzati in colonne "y" e disposti in ordine decrescente a seconda della data in cui sono stati pubblicati.
• - visualizza i prodotti correlati "x" visualizzati nelle colonne "y" e disposti in ordine decrescente a seconda della data in cui sono stati pubblicati.
• - mostra l'elenco dei prodotti con il modello di elenco classico. Nota: altri modelli come "griglia" e "predefinito" possono essere utilizzati al posto di "elenco".
• - mostra i prodotti della categoria con ID "x" e con il classico modello di elenco.

Nota: se sei bravo nella codifica, puoi modificare questi codici brevi per ottenere una migliore visualizzazione e disposizione del prodotto.

Uno Shortcode Incollato Su Una Pagina

Di Jan Saints (Opera propria): CC-BY-2.0

5. Utilizzo dei cursori

Nel caso in cui non lo sapessi, uno slider è un elemento della pagina web che viene utilizzato per evidenziare un gruppo di post selezionati. È come una presentazione, il che significa che visualizza un post alla volta, passando da uno all'altro automaticamente o facendo clic.

Per visualizzare i prodotti con i cursori, devi sostituire i post con i tuoi prodotti. Quando si tratta di creare uno slider di prodotto, è necessario un plug-in di scorrimento reattivo come Soliloguy. Dopo aver installato e attivato il plug-in, è necessario aggiungere un nuovo dispositivo di scorrimento e puoi farlo utilizzando foto, collegamenti e altri dettagli necessari dei tuoi elementi. Il passaggio successivo consiste nel salvare o pubblicare il dispositivo di scorrimento per ottenere uno shortcode e un tag modello.

Infine, devi copiare e incollare lo shortcode sulla tua home page o su qualsiasi altra pagina per visualizzare i prodotti. Il tag del modello può visualizzare elementi nella sezione dell'intestazione del tema. Devi solo copiare il tag, aprire il tuo header.php e incollarlo nella pagina codificata.

WooCommerce ha un plugin chiamato Products Slider che è su misura per l'eCommerce. Funziona come un tipico plug-in di scorrimento, ma presenta alcune altre impostazioni e opzioni. Ti incoraggio a vedere se può aiutarti con la visualizzazione e la disposizione degli articoli.

Prodotti visualizzati su un dispositivo di scorrimento

Di Jan Saints (Opera propria): CC-BY-2.0

Conclusione

La visualizzazione e la disposizione degli elementi sul tuo sito Web di e-commerce WordPress è abbastanza semplice e facile con questi cinque metodi. Se hai avuto difficoltà a visualizzare e organizzare i prodotti nel tuo negozio online, dovresti iniziare a eseguire queste due attività con molta facilità. Scegli un metodo che ritieni possa funzionare per te e inserisci quei prodotti sulla tua home page in modo più intelligente.

Riferimenti

1. Mening. R. Come costruire un negozio online con WordPress e WooCommerce. websiteetup.org . Sito Web SetUp. (2017).
2. Andronaco R. Come creare un negozio online utilizzando WooCommerce e Wordpress: guida semplice alla configurazione perfetta di un sito Web di e-commerce. (2017).
3. Rastaurius E., Etoile Web Design. Catalogo dei prodotti eCommerce per WordPress. wordpress.org. implecode. (2017).
4. WooCommerce. Codici brevi inclusi con WooCommerce. docs.woocommerce.com . WooCommerce. (2016).
5. Truman S., Tuan N., Ar3rev Software. WooCommerce Product Sort and Display Plugin. wordpress.org. Software Ar3rev. (2013).
6. YiThemes. Yith Infinite Scrolling Plugin. wordpress.org. YITHEMES. (2017).
7. Razzak S. Una guida esclusiva per il plug-in Slider dei prodotti WooCommerce. cloudways.com. Cloudways Ltd. (2016).
8. Balkhi S. Come creare facilmente uno slider WordPress reattivo con Soliloquy. wpbeginner.com . WPBeginner. (2014).

© 2017 Januaris Saint Fores