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

5 Comments

  1. Morten

    I pasted the 1 column snippet to my child theme style.css and it works great on the frontpage.

    But on the shop page and product category page (designed in the Divi Builder) it’s still 2 column default.

    I even saved my frontpage section to the library and tried that on my templates – still 2 column default.

    Any suggestions?

    Reply
    • Anna Kurowska

      Hello, it’s working on my end, I can check what’s happening on your site if you can send me a link.
      But if the page is designed with Divi Builder, you can also try to change the number of columns in the module settings.

  2. Mas

    This is really helpful. It works perfectly.

    Reply
    • Geoffrey Young

      So, what do you put in the .css file if all you want is two columns on all devices?
      and, is that the only file that gets adjusted?

    • Anna Kurowska

      Use 2 columns snippet without media queries

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

Submit a Comment

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

Receive notifications about our new blog posts.