Customize Number Of Columns In WooCommerce Shop

Last modified Oct 6, 2020
Difficulty Beginner
Language CSS
Category

CSS

/* 1 columns on all devices  */

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

 
/* 1 columns on 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 columns on 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 columns on 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 columns on 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 columns on 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 columns on 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 columns on 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 columns on 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 columns on 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 columns on 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 columns on 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 columns on 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 columns on 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 columns on 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 columns on 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 columns on 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;
  }
}




 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.3.4 of the Divi Theme, the version: 3.9.3 of the Woocommerce plugin and Divi friendly hosting with PHP 7+.
If you think this code saved you time, we will be happy to receive a comment! ?

And subscribe to our youtube channel because there’s more to come!

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, and Woocommerce Plugin by Automatic modified by Divi Space, March 4, 2020. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

1 Comment

  1. Mas

    This is really helpful. It works perfectly.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.