Customize Number Of Columns In WooCommerce Shop

Last modified Sep 21, 2021
Difficulty Beginner
Language CSS
Category

Below you’ll find a quick Divi snippet that will help you customize the number of columns in your WooCommerce shop. Before beginning, we recommend making a backup of your site and make sure you have a child theme set up and running.

This feature, of changing the WooComerce column structure, as well as countless others, is also available in our plugin, Divi Shop Builder. If you’re looking for an easier way to customize your WooCommerce shop without touching a line of code, visit our store and purchase the Divi Shop Builder plugin.

 

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

6 Comments

  1. Shahid

    Worked like a charm.. Thanks

    Reply
  2. 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.

  3. 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.

Receive notifications about our new blog posts.

Next snippet Divi Mobile: Collapse Submenus With Clickable Parent Menu Items
Previous snippet Divi Mobile: Collapse Submenus