Personalizza su tutti i dispositivi le colonne del negozio WooCommerce
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.
/* 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.