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.