Customize Number Of Columns In WooCommerce Shop

Last modified Mar 16, 2020
Difficulty Beginner
Language CSS
Category

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.

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;
  }
}




 

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.

Before You Start

Build a Child Theme

Child themes are incredibly important for the overall look, feel, and navigation of your website, so we encourage you to take the time to get to know the content. This will help your web design and development processes tremendously. That’s why we’ve made it super easy to build a child theme for Divi or Extra in seconds!

Generate Child Theme

How to Add Java Script and jQuery to Divi

There are four ways you can add JavaScript or jQuery to a Divi website: use the code module, the Divi Theme Options console, enqueue scripts using the functions.php file, or using a plugin.

Read More

How to Add CSS to Divi

Divi users can choose between five different methods to add custom CSS to their websites. Read more about these various methods you can use to add custom CSS to your Divi theme, as well as better understand the pros and cons of each method.

Read More