WooCommerce: configurazione generale pagine prodotto, shop e immagini prodotto
Bentornato in questa guida per l’installazione e la configurazione di WooCommerce.
Nella scorsa lezione abbiamo visto insieme la prima tab della scheda “Products”, in questa affronteremo la seconda: “Display”.
Questa sezione della configurazione di WooCommerce si divide un due parti, Shop & Product Pages e Product Images. Cominciamo dalla prima:
Andiamo a vedere cosa indicano queste impostazioni:
- Shop Page – La pagina base del tuo negozio, dove si trova l’archivio dei prodotti.
- Shop Page Display – Scegli cosa visualizzare nella pagina del negozio, se i prodotti, le categorie o entrambi.
- Default Category Display – Scegli cosa visualizzare all’interno di una pagina categoria, se le sotto-categorie, i prodotti o entrambi.
- Default Product Sorting – Scegli in che ordine vuoi che vengano visualizzati i tuoi prodotti, se per nome/vendite/voto medio/più recenti/prezzo.
- Add to cart behaviour – Diviso in due opzioni:
- Redirect to the cart page after succesful addition – I clienti vengono reindirizzati al carrello una volta aggiunto un prodotto al carrello.
- Enable AJAX add to cart buttons on archives – Permette ai clienti di aggiungere i prodotti al carrello implementando la funzione AJAX nel pulsante, rimanendo nella pagina dell’oggetto senza bisogno di ricaricarla e così semplificando la navigazione.
Una volta finita la prima sezione, passiamo alla seconda:
In Product Images troviamo:
- Catalog Images – Dimensioni delle immagini usate nel catalogo dei prodotti.
- Single Product Image – Dimensione dell’immagine principale nella pagina del prodotto.
- Product Thumbnails – Dimensioni delle immagini nella galleria all’interno della pagina del prodotto.
Hard crop permette al sito di tagliare le immagini secondo le dimensioni stabilite.
- Product Image Gallery – Permette, nella pagina del prodotto, di aprire l’immagine come popup per vederla più nel dettaglio.
Per il sito che stiamo creando, che ti ricordo essere un venditore internazionale di vestiti per donna, è particolarmente importante che nelle foto i vestiti vengano mostrati nella loro interezza, quindi le immagini dovranno avere misure che ne incrementino l’altezza piuttosto che la larghezza.
Le misure potrebbero perciò essere queste:
In modo che i prodotti vengano così visualizzati:
Ecco fatto! Abbiamo fatto ancora un passo in avanti verso la realizzazione del nostro e-commerce con WooCommerce.
Leggi tutti gli articoli della GUIDA WOOCOMMERCE
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
47 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Ciao Andrea,
Bellissimo articolo, potresti aiutarmi su un piccolo problema che mi assilla da giorni?
Se entri nel mio sito vedrai che di default c’è scritto “tutti i progetti”! COme faccio per eliminare questa scritta? io ho categorizzato i miei prodotti ma rimane sempre questa scritta che non è una categoria! grazie. il sito è http://www.pastificiomonteleone.it
Spero tu mi possa aiutare perchè sono disperato
Ciao Alessio,
Da un punto di vista esterno, quel “tutti i progetti” sembrerebbe essere la voce di default di WooCommerce mentre “tutti i prodotti” è una vera e propria categoria.
Ti consiglio di verificare se le voci di WooCommerce sono state tradotte correttamente, ma comunque per sistemare l’errore dovresti accedere al tema, quindi ti invito a contattare gli sviluppatori del tuo tema :)
Articolo esauriente, grazie. Nella mia versione di prova di Woocommerce in italiano non c’è la “seconda sezione” per modificare le dimensioni immagini, ecc. Ma quello che più mi angoscia è che riesco a generare automaticamente le pagine 1,2,3, ecc. nella pagina prodotti. Grazie,
Grandi ragazzi adoro tutte le vostre guide non me ne perdo mai una. A proposito di questa però vorrei un aiuto se potete…. io ho eseguito tutta la vostra procedura ma le foto non cambiano di dimensione. Credo sia il tema che mi blocca questa modifica sapreste aiutarmi? Ho lo stesso problema con Show Attributes on Shop Pages “show them above the price” non appare nulla….Grazie infinitamente, continuate così!!!
Ciao Laura,
per le immagini prova a rigenerare tutte le thumbnail utilizzando un plugin gratuito come Regenerate Thumbnails.
Saluti,
Alessio.
Ciao Andrea,
tutto molto chiaro
solo che nel mio pannello manca l’opzione
Product Image Gallery
che è proprio quella di cui ho bisogno.
Puoi aiutarmi?
Grazie Pia
Per capirci io ho questo
http://www.dolci-artigianali.com/prodotto/baci-di-dama/
se clicco sull’immagine si apre l’immagine in una pagina separata. non resta all’interno del template in modo che io passa scorrere le immagini.
Ciao Pia,
il problema è relativo al mancato supporto del tema rispetto alla versione di WooCommerce in uso.
Saluti,
Alessio.
Ciao Pia,
scusa il ritardo nella risposta. Non trovi l’opzione perchè quasi sicuramente stai utilizzando una versione di WooCommerce pari o superiore alla 3.0.
Rispetto alle vecchie versioni infatti WooCommerce ha rimosso la possibilità di abilitare/disabilitare il lightbox. In compenso è stato aggiunto lo zoom magnifier sulle immagini del prodotto.
Saluti,
Alessio.
ciao,
vi è mai capitato su woocommerce questo problema?
Da quando è passato l’ultimo aggiornamento se non faccio visualizzare nel front end i prodotti fuori stock mi spariscono anche molti prodotti disponibili….e viceversa. Questo problema è veramente grave.
A presto
Ciao Michele,
credo il problema non sia strettamente legato a WooCommerce, ma bensì a qualcosa altro che sta agendo sul tuo sito. Prova a disattivare progresttivamente i plugin in uso o ad utilizzare un tema di default come Twentysixteen e verfiica se il problema persiste.
Saluti,
Alessio.
Buongiorno,io ho un problema. Come mai nel front office del mio sito non compare la descrizione del prodotto, mentre nel back office me la fa scrivere la descrizione? Attendo risposte.Grazie.
Ciao Alexia,
i problemi possono essere molteplici. Come ho detto a Michele, può trattardi di un bug del tema che stai utilizzando o un errore dovuto a qualche plugin. Prova a disattivare i plugin ad uno ad uno o cambiare il tema. In questo modo puoi verificare se il problema persiste e risalire alla causa dell’errore.
Saluti,
Alessio,
Ciao, anche io ho un problema con il mio sito: come posso ridurre lo spazio (in verticale) tra le immagini relative alle sottocategorie? Ritengo sia eccessivo, ma non so proprio come modificarlo.
Inoltre in ogni pagina mi appare una scritta: ”GUARDA:48/96/ TUTTI” che vorrei non apparisse, è possibile rimuoverla?
Grazie in anticipo
Buongiotno Giulia,
al fine di poter ridurre lo spazio tra le immagini dovresti agire via css intervenendo sullo stile del tema.
Per quanto riguarda invece la possibilità di rimuovere la scritta a cui fai riferimento, esistono due modi per farlo:
1) Inserire questa regola css all’interno del tuo foglio di stile
p.woocommerce-result-count { display: none; }2)Rimuovere via PHP l’action che mostra quel blocco inserendo questo codice custom nel file functions.php del tuo tema
Saluti,
Alessio Torrisi.
Buongiorno, ho inviato un commento con una domanda ma non mi appare nella pagina, possibile che io abbia sbagliato qualcosa? Grazie mille!
Ecco, visto che questo appare, vi chiedo scusa e provo a riproporre il mio commento qui.
Innanzitutto vi ringraziavo per il vostro lavoro: il vostro blog è la mia salvezza :-)
Di recente il mio sito ha deciso di non mostrarmi più correttamente le miniature di un prodotto, che prima si vedevano sotto l’immagine principale (in riga, un cm circa l’una) e sostituivano la stessa se le si selezionava. Ora invece, come potete vedere, si mostrano così grandi da apparire una sotto l’altra, e sta proprio male a mio avviso. Ho provato a modificare le dimensioni delle miniature, installare il plugin e ridimensionare le stesse, aggiornare tutti i plugin legati a woocommerce… niente. L’unica modifica che ho fatto di recente è stato aggiungere la pagina “corsi” inserendovi formulari di contatto e alcune fotografie a grandezza fissa, ma può questo aver sballato tutto il resto?
Grazie mille a chi saprà aiutarmi!
Buongiorno Claudia,
adesso vedo che le thumb si visualizzano correttamente.
Ad ogni modo quando si verifica un problema del genere, è possibile si tratti di un’incompatibilità tra WooCommerce ed il tuo tema.
Il tema che sta utilizzando potrebbe sovrascrivere dei template di WooCommerce ed essere questi a causare il problema, in quanto non aggiornati.
In casi del genere è sempre bene disattivare il tema corrente e provare un tema defaut di WordPress (Twentisixteen). Se il problema persiste, continua a disattivare uno per uno tutti i plugin attivi.
Saluti,
Alessio Torrisi.
Salve avrei bisogno di creare una sottocategoria “outlet” per prodotti in svendita all’interno della pagina Catalogo on line è possibile?
http://www.sbaccessories.com
Risolto problema nel mio post precedente, ma non riesco a far girare le categorie, nel senso che se selezionata la categoria dal menù a tendina non gira e non riporta alla categoria scelta.
Avrei urgenza di risolvere
Grazie
Buongiorno,
esiste un plugin o un modo per modificare l’aspetto (font, dimensione testo, colori) dei prodotti nella pagina shop?
Ciao,
avrei un problema sull’inserimento delle immagini nella creazioni di nuovi prodotti.
Nel momento di creazione di un nuovo prodotto, dopo aver spuntato la caselle virtuale e scaricabile, se vado su aggiungi file in “file scaricabili” e provo a caricare una nuova immagine non presente tra i media cliccando su aggiungi i file non mi fa visualizzare l’immagine. Mentre se aggiungo un immagine già presente tra i media funziona correttamente. Come posso fare? ti ringrazio in anticipo
Buongiorno,
la mia pagina prodotto ( dove puoi scegliere più alternative dal menu a tendina, es. colore, dimensione,…) visto da desktop risulta perfetta, mentre da mobile il menù viene tagliato. Sapete dirmi come posso risolvere questo problema? Grazie mille
Ciao e complimenti per questa guida.
C’è un problema.
Ho storefront come tema.
La casella lightbox non c’è più.
Tuttavia le immagini funzionano in maniera “grezza”, cioè viene visualizzata la jpg nel browser.
Qualcuno è in grado di dare un consiglio per storefront (o in generale)?
Grazie
Ciao Fabrizio,
dalla versione 3.0 WooCommerce ha rimosso l’opzione, quindi non si tratta di un problema legato al tema.
Saluti,
Alessio.
ciao a tutti ho un problema.. lo shop vorrei avesse delle sotto categorie che appaiono nel menu a tendina. ma nn riesco ad aggancciare le categorie woocommerce alle pagine del menu..come si fa?
Ciao Giuseppe,
nella parte sinistra della pagina di configurazione del menu, trovi la sezione Product Categories (come nello screenshot in allegato).
http://pix.toile-libre.org/upload/original/1517917620.png
Se non vedi la sezione, accertati che la stessa sia abilitata all’interno dell’area “Screen options”
http://pix.toile-libre.org/upload/original/1517917554.png
Saluti,
Alessio Torrisi
Ciao!
Io ho un problemino che proprio non capisco. Ho creato la pagina per lo shop di woo commerce, ho creato le categorie e i prodotti. Se nella sezione “Shop Page Display” seleziono categorie, allora mi appaiono le due categorie. Se seleziono prodotti sulla pagina non appare nulla. Voi avete un’idea di cosa può essere? Io le ho già provate tutte! Grazie! Francesca
Ciao caro, un quesito:
è possibile aggiungere una immagine di catalogo (jpg) personalizzata, all’inizio di
ogni pagina dedicata ad una categoria di prodotto? (pagine di woocommerce)
– es: pagina dedicata ai prodotti in alluminio – immagine catalogo dedicata a tali prodotti.
il mio template è storefront versione pro.
Grazie mille
Ciao Andrea,
l’articolo è molto interessante.
Sto facendo un sito con wordpress+woocommerce ed il cliente mi ha fatto due richieste specifiche. Intanto scrivo il percorso: sono nell’elenco prodotti, clicco sul pulsante acquista e compare il simbolo di spunta (accanto ad acquista) per indicare che il prodotto è nel carrello.
Queste le richieste del cliente:
1) invece di aggiungere il segno di spunta, sostituire (acquista + segno di spunta) con un’immagine;
2) una volta aggiunto il prodotto nel carrello, cambio pagina, se ritorno in quella precedente, i prodotti che sono nel carrello devono essere evidenziati perchè sono già acquistati.
In un sito in php l’ho fatto, mi servirebbe replicarlo anche qui.
Spero in un supporto,Grazie
Caterina
Salve, grazie per l’articolo, l’ho trovato molto esauriente. Mi chiedevo una cosa, a meno che non mi sia sfuggita tra gli altri commenti. E’ possibile creare sottoelementi alla pagina Shop? In modo da poter creare una pagina per ogni categoria di prodotti. Inoltre, a queste pagine poste sotto Shop si può avere il modulo dell’acquisto con i relativi pulsanti “Aggiungi al carrello” ecc??
Grazie mille
Matteo
Si è possibile, basta che dalle impostazioni di woocommerce metti una pagina per tutti i prodotti (es prodotti), la metti nascosta cosi nessuno potra vederla (poichè ci sono tutti i prodotti), e quando inserisci i prodotti gli metti la categoria; quando crei il menù al posto di aggiungere una pagina, aggiungi “categoria prodotto”, se l’utente apre quella pagina vedrà solo i prodotti di quella categoria.. per uanto riguarda il carrello scaricati il plugin “wp simple paypal shopping cart”
salve , ho realizzato un blog dove ho inserito nella home page gli articoli .
sotto gli articoli vorrei inserire il plugin woo ecommerce scaricato di recente.
come posso oltre a realizzare nel menù una voce che apra la pagina, far vedere l’eccomerce soto il blog nella homepage.
Fatemi sapere grazie.
Buongiorno Enrico,
dovresti inserire, esattamente dove vuoi mostrare i prodotti, uno shortcode che ti permetta di visualizzarli.
WooCommerce mette a disposizione il suo shortcode
[products]che permette di mostrare tutti o solo una parte dei prodotti registrati sul tuo store.Per esempio potresti utilizzare lo shortcode nella seguente maniera
[products columns="4" orderby="popularity" ]Trovi al seguente link la lista completa degli shortcode di WooCommerce
https://docs.woocommerce.com/document/woocommerce-shortcodes/
Saluti,
Alessio.
salve, ho scaricato wooecomerce non riesco ad agganciare in una pagina la pagina shop
dato che la pagina shop non ha un shortcode.
come posso fare?
Ciao Enrico,
cosa intendi per “non riesco ad aggiornare”?
Se ti riferisci alla possibilità di modificare la pagina Shop, bene puoi farlo sovrascrivendo i template di WooCommerce nel tema che stai utilizzando.
A questo link trovi la guida ufficiale su come sovrascrivere i template
https://docs.woocommerce.com/document/template-structure/
Il template principale del loop di WooCommerce lo trovi in woocommerce/templates/archive-product.php
Saluti,
Alessio
Ciao, bell’articolo. Io ho un problema da alcuni giorni, cioè non riesco ad inserire un immagine nell’header della pagina del negozio. Cioè il mio tema me la lascia inserire in tutte le pagine, ma solo nella pagina shop non è visibile, ma sono visibili solo i prodotti. Come mai?
Grazie.
Ciao Vincenzo,
ti riferisci all’immagine in evidenza della pagina?
https://www.screencast.com/t/lcChzQqrtce
In quel caso, difficilmente i temi la utilizzano nella pagina Shop. Se vuoi mostrarla, dovresti inserirla come contenuto della pagina. In questo modo dovrebbe essere mostrata prima dei prodotti.
Saluti,
Alessio
salve,
vorrei disattivare lo zoom perchè rende la navigazione su mobile praticamente impossibile (toccando lo schermo si attiva lo zoom sull’immagine ma non si riesce a scrollare in giù).
Come potrei fare?
Grazie
Buongiorno, ottimo articolo intanto! Avrei necessità di un aiuto per quanto riguarda la disposizione delle immagini nella scheda prodotto, che appaiono in sequenza sotto l’immagine principale e si vanno a sovrapporre alla descrizione dell’articolo (da mobile si sovrappongono al menù tendina della selezione della taglia, quindi un bel problema).
C’è modo di inserire uno slider a scorrimento o spostare la descrizione? Ho provato con la modifica del css ma ho difficoltà..Grazie mille intanto!
Ciao, una domanda veloce… ho installato woocommerce versione 3.6, ma le voci descritte nel tuo ottimo articolo non ci sono (ad esempio la pagina “display”). Siccome avrei necessità di personalizzare la dimensione delle thumbnail della galleria di ogni singolo prodotto, come posso fare, visto che non trovo da nessuna parte la funzione da te descritta. Grazie per il tuo aiuto!!
Ciao Andrea grazie delle chiarissime spiegazioni. Ho un problemone però i miei menu di woocommerce sono differenti, con meno voci. A cosa può essere dovuto? Grazie
Buongiorno, qualcuno sa dirmi se con woocommerce esiste la possibilità di inserire quella casellina dove l’utente può decidere se visualizzare 10,20,50,100 prodotti ecc??? Grazie
Ciao, nelle impostazioni di Woocommerce manca nelle impostazioni lo shop Display. Potresti aiutarmi a far apparire questa funzione. grazie
Avrei lo stesso problema, nelle impostazioni di Woocommerce manca nelle lo shop Display.
Soluzioni? grazie
Ciao! sto impazzendo con un problema su WooCommerce, dopo averci lavorato ore oggi… La pagina catalogo prodotti mi fa vedere tutte le immagini. Quando clicco sul singolo prodotto, sembra che vada in palla tutto e non mi carica più l’immagine…continua a caricare, vedo i prezzi…le immagini galleria…ma l’immagine principale non carica. Cosa può essere? problemi con gli attributi? le pagine pesano max 80kb/120kb…
Salve , complimenti davvero per l’articolo , purtroppo ho un problema , utilizzo ocean wp + elementor e quando navigo sul mio sito(che non è ancora pubblicato ) sul lato mobile , il layout si sposta verso destra se lo muovo e non resta quindi fisso , l’esperienza è davvero negativa , come riesco a risolvere questo problema? grazie mille :)