Di default, WooCommerce, mostra un numero di 4 prodotti per ogni riga nella versione Desktop, mentre dopo i 768px, ovvero Tablet verticale, si riduce a 2 per poi passare a 1 singolo prodotto sui dispositivi mobili.
Oggi vedremo sia la semplice regola PHP per andare a modificare il numero di colonne per riga, sia tutta la regola CSS adattativa.
Schema a 3 colonne
Inserite nel vostro file functions.php la seguente funzione che andrà a modificare il numero di colonne di default.
Ora dobbiamo sistemare il CSS nel seguente modo:
Schema a 2 colonne
Inserite nel vostro file functions.php la seguente funzione che andrà a modificare il numero di colonne di default.
Ora dobbiamo sistemare il CSS nel seguente modo:
Tutto qua. Come vedete è stato molto semplice andare a modificare il template di default di WooCommerce e renderlo più adatto ai nostri scopi. Nulla vi vieta comunque di modificare il CSS a seconda del vostro caso specifico.
questo funziona anche per iserire nuove colonne di mappatura per gli articoli inseriti con il CSV?
Ciao Giuseppe! No non credo funzioni. Ora poi WooCommerce ha adottato (finalmente!!), tramite il theme customizer la possibilità di stabilire tramite select quante colonne avere!
io ho impostato 3 colonne, ma dal pc mi fa visualizzare i prodotti su 1 colonna
Ciao Glenda, questo perché da ora WooCommerce ha introdotto di serie questa opzione. La trovi in Aspetto–Personalizza
Ciao miniMAC,WooCommerce ora da la possibilità di modificarle ma non per device.In mobile resta sempre 1.C’è qualche opzione che non trovo? Hai qualche soluzione?
Ciao WoodyP, per il momento l’unica soluzione possibile è quella di inserire un CSS personalizzato, appunto per la versione mobile. Dovrai lavorare con la proprietà columns ed applicarla a tutti gli elementi interessati!
Buon giorno e grazie per l’articolo anche se approdo qui a 2 anni dalla pubblicazione. La mia necessità è ottenere una visualizzazione a più colonne su mobile. Ho seguito le istruzioni e sono riuscita ad ottenere il ridimensionamento dei prodotti (48,5% come da css) ma la visualizzazione rimane a 1 sola colonna… Inoltre vorrei applicare questa proprietà anche all’anteprima dei prodotti sulla homepage (“prodotti in offerta / più venduti” che ho inserito nell’editor tramite blocco woo-commerce) ma sembra viaggiare indipendentemente. Sicuramente il tutto è molto banale e mi scuso ma sto imparando per esigenza, step by step :). Grazie in anticipo
Ciao Valentina, WooCommerce dalla versione 3 ha questa funzione integrata in Aspetto->Personalizza. Ti permette di scegliere dal Customizer di WP il numero di colonne.
Dovresti risolvere anche il tuo 2° problema! 😄
Sì, infatti ho impostato sia il numero di colonne che di righe e su pc e tablet non ci sono problemi ma su cellulare visualizzo sempre 1 colonna.
Mentre per il 2° problema sembra non esserci possibilità di personalizzazione 🙄
In realtà Valentina, puoi risolvere tutto tramite CSS, ma qui entra in gioco il tuo tema! Ti basta una regola con le media query e risolvi!