Personalizza su tutti i dispositivi le colonne del negozio WooCommerce

Colonne Shop

Disposizione delle colonne del modulo Negozio

Il seguente codice va usato in Divi > Opzioni tema > Codice CSS.
Chiaramente copiate solo il frammento di codice che corrisponde al numero di colonne che desiderate.
Scegliere quante colonne si vedono nello shop su tutti i dispositivi porta a molti vantaggi per il tuo negozio.

Opzioni tema Divi

/* 1 colonna su tutti i dispositivi */
[class*=woocommerce] ul.products li.product, [class*=woocommerce] ul.products li.product:nth-child(n) {
width: 100%!important;
margin-right: 0!important;
}

/* 1 colonna sul desktop */
@media all and (min-width:1024px) {
[class*=woocommerce] ul.products li.product, [class*=woocommerce] ul.products li.product:nth-child(n) {
width: 100%!important;
margin-right: 0!important;
}
}
/* 1 colonna su tablet */
@media all and (min-width: 768px) and (max-width: 1024px) {
[class*=woocommerce] ul.products li.product, [class*=woocommerce] ul.products li.product:nth-child(n) {
width: 100%!important;
margin-right: 0!important;
}
}
/* 1 colonna su mobile */
@media all and (max-width: 768px) {
[class*=woocommerce] ul.products li.product, [class*=woocommerce] ul.products li.product:nth-child(n) {
width: 100%!important;
margin-right: 0!important;
}
}
/* 2 colonna su desktop */
@media all and (min-width:1024px) {
[class*=woocommerce] ul.products li.product {
width: 48%!important;
margin: 0 3.8% 2.992em 0!important;
clear: none!important;
}
[class*=woocommerce] ul.products li.product:nth-child(2n) {
margin-right:0px!important;
}
[class*=woocommerce] ul.products li.product:nth-child(2n+1) {
clear: both!important;
}
}
/* 2 colonne su tablet*/
@media all and (min-width: 768px) and (max-width: 1024px) {
[class*=woocommerce] ul.products li.product:nth-child(n) {
width: 48%!important;
margin: 0 3.8% 2.992em 0!important;
clear: none!important;
}
.woocommerce ul.products li.product:nth-child(2n) {
margin-right:0px!important;
}
.woocommerce ul.products li.product:nth-child(2n+1) {
clear: both!important;
}
}
/* 2 colonne su mobile */
@media all and (max-width: 768px) {
[class*=woocommerce] ul.products li.product:nth-child(n) {
width: 48%!important;
margin: 0 3.8% 2.992em 0!important;
clear: none!important;
}
.woocommerce ul.products li.product:nth-child(2n) {
margin-right:0px!important;
}
.woocommerce ul.products li.product:nth-child(2n+1) {
clear: both!important;
}
}

/* 3 colonne su desktop */
@media all and (min-width:1024px) {
[class*=woocommerce] ul.products li.product {
width: 30.6%!important;
margin: 0 3.8% 2.992em 0!important;
clear: none!important;
}
[class*=woocommerce] ul.products li.product:nth-child(3n) {
margin-right:0px!important;
}
[class*=woocommerce] ul.products li.product:nth-child(3n+1) {
clear: both!important;
}
}
/* 3 colonne su tablet */
@media all and (min-width: 768px) and (max-width: 1024px) {
[class*=woocommerce] ul.products li.product:nth-child(n) {
width: 30.6%!important;
margin: 0 3.8% 2.992em 0!important;
clear: none!important;
}
[class*=woocommerce] ul.products li.product:nth-child(3n) {
margin-right:0px!important;
}
[class*=woocommerce] ul.products li.product:nth-child(3n+1) {
clear: both!important;
}
}
/* 3 colonne su mobile */
@media all and (max-width: 768px) {
[class*=woocommerce] ul.products li.product:nth-child(n) {
width: 30.6%!important;
margin: 0 3.8% 2.992em 0!important;
clear: none!important;
}
[class*=woocommerce] ul.products[class*=columns-] li.product:nth-child(2n) {
float:left!important;
}
[class*=woocommerce] ul.products li.product:nth-child(3n) {
margin-right:0px!important;
}
[class*=woocommerce] ul.products[class*=columns-] li.product:nth-child(3n+1) {
clear: both!important;
}
}

/* 4 colonne su desktop */
@media all and (min-width:1024px) {
[class*=woocommerce] ul.products li.product {
width: 22.1%!important;
margin: 0 3.8% 2.992em 0!important;
clear: none!important;
}
[class*=woocommerce] ul.products li.product:nth-child(4n) {
margin-right:0px!important;
}
[class*=woocommerce] ul.products li.product:nth-child(4n+1) {
clear: both!important;
}
}

/* 4 colonne su tablet */
@media all and (min-width: 768px) and (max-width: 1024px) {
[class*=woocommerce] ul.products li.product:nth-child(n) {
width: 22.1%!important;
margin: 0 3.8% 2.992em 0!important;
clear: none!important;
}
[class*=woocommerce] ul.products li.product:nth-child(4n) {
margin-right:0px!important;
}
[class*=woocommerce] ul.products li.product:nth-child(4n+1) {
clear: both!important;
}
}
/* 5 colonne su desktop */
@media all and (min-width:1024px) {
[class*=woocommerce] ul.products li.product {
width: 16.96%!important;
margin: 0 3.8% 2.992em 0!important;
clear: none!important;
}
[class*=woocommerce] ul.products li.product:nth-child(5n) {
margin-right:0px!important;
}
[class*=woocommerce] ul.products li.product:nth-child(5n+1) {
clear: both!important;
}
}

/* 5 colonne su tablet */
@media all and (min-width: 768px) and (max-width: 1024px) {
[class*=woocommerce] ul.products li.product:nth-child(n) {
width: 16.96%!important;
margin: 0 3.8% 2.992em 0!important;
clear: none!important;
}
[class*=woocommerce] ul.products li.product:nth-child(5n) {
margin-right:0px!important;
}
[class*=woocommerce] ul.products li.product:nth-child(5n+1) {
clear: both!important;
}
}

/* 6 colonne su desktop */
@media all and (min-width:1024px) {
[class*=woocommerce] ul.products li.product {
width: 13.5%!important;
margin: 0 3.8% 2.992em 0!important;
clear: none!important;
}
[class*=woocommerce] ul.products li.product:nth-child(6n) {
margin-right:0px!important;
}
[class*=woocommerce] ul.products li.product:nth-child(6n+1) {
clear: both!important;
}
}

/* 6 colonne su tablet */
@media all and (min-width: 768px) and (max-width: 1024px) {
[class*=woocommerce] ul.products li.product:nth-child(n) {
width: 14.75%!important;
margin: 0 2.3% 2.992em 0!important;
clear: none!important;
}
[class*=woocommerce] ul.products li.product:nth-child(6n) {
margin-right:0px!important;
}
[class*=woocommerce] ul.products li.product:nth-child(6n+1) {
clear: both!important;
}
}
/* 7 colonne su desktop */
@media all and (min-width:1024px) {
[class*=woocommerce] ul.products li.product {
width: 12.57%!important;
margin: 0 2% 2.992em 0!important;
clear: none!important;
}
[class*=woocommerce] ul.products li.product:nth-child(7n) {
margin-right:0px!important;
}
[class*=woocommerce] ul.products li.product:nth-child(7n+1) {
clear: both!important;
}
}

Dove aggiungere il codice PHP personalizzato?

Esistono molti modi per aggiungere codice CSS personalizzato al tuo sito WordPress con tema Divi. Leggi questo articolo per maggiori informazioni.

Questo codice funziona ancora?

Fateci sapere nei commenti se tutto ha funzionato come previsto. Abbiamo testato questo codice con la versione: 4.7.0 del tema Divi, la versione: 4.1 del plugin Woocommerce e l’hosting Siteground e WPEngine con PHP 7.5+.
Se questo codice ti ha fatto risparmiare tempo, saremo felici di ricevere un commento.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Divi Design Studio rende semplice l’evoluzione digitale di aziende ambiziose.

Chi sono

Mi chiamo Riccardo Bertolini e sono un web designer freelance appassionato del web e di tecnologie digitali.
P.IVA 04891580237 – Divi Design Studio © 2023