Homepage / Snippet / WooCommerce / Customize Number Of Columns In WooCommerce Shop

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/* 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;
}
}
/* 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; } }
/* 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.

Related Snippets

Change the “Sale!” Text of the WooCommerce Sale Badge

Change the “Sale!” Text of the WooCommerce Sale Badge

Change the WooCommerce Sale Badge to Display a Percentage Discount

Change the WooCommerce Sale Badge to Display a Percentage Discount

Add An “Add To Cart” Button To A WooCommerce Shop Module

Add An “Add To Cart” Button To A WooCommerce Shop Module

Your Comments

7 Comments

  1. Julia
    Julia on October 29, 2024 at 6:14 pm

    That was super useful, many thanks! Been looking for this to solve that by not affecting product grid! (Others I’ve tested did affect.) Many thanks! 🙂

    Reply
  2. Shahid
    Shahid on April 29, 2022 at 12:30 am

    Worked like a charm.. Thanks

    Reply
  3. Morten
    Morten on March 10, 2021 at 1:41 am

    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
    • <div class="apbct-real-user-wrapper"> <div class="apbct-real-user-author-name">Anna Kurowska</div> <div class="apbct-real-user-badge" onmouseover="apbctRealUserBadgeViewPopup('apbct_trp_comment_id_499870');" onmouseout="apbctRealUserBadgeClosePopup(event);"> <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img" style="align-self: center;"> <div class="apbct-real-user-popup apbct-trp-popup-desktop" id="apbct_trp_comment_id_499870"> <div class="apbct-real-user-title"> <p class="apbct-real-user-popup-header">The Real Person!</p> <div class="apbct-real-user-popup-content_row"> <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img"> <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span> </div> <div class="apbct-real-user-popup-content_row"> <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img"> <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span> </div> </div> </div> </div> <div class="apbct-real-user-popup apbct-trp-popup-mob" id="apbct_trp_comment_id_499870"> <div class="apbct-real-user-title"> <p class="apbct-real-user-popup-header">The Real Person!</p> <div class="apbct-real-user-popup-content_row"> <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img"> <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span> </div> <div class="apbct-real-user-popup-content_row"> <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img"> <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span> </div> </div> </div> </div>
      Anna Kurowska on March 12, 2021 at 1:04 pm

      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.

  4. Mas
    Mas on May 24, 2020 at 4:00 am

    This is really helpful. It works perfectly.

    Reply
    • Geoffrey Young
      Geoffrey Young on January 26, 2021 at 12:02 pm

      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?

    • <div class="apbct-real-user-wrapper"> <div class="apbct-real-user-author-name">Anna Kurowska</div> <div class="apbct-real-user-badge" onmouseover="apbctRealUserBadgeViewPopup('apbct_trp_comment_id_476458');" onmouseout="apbctRealUserBadgeClosePopup(event);"> <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img" style="align-self: center;"> <div class="apbct-real-user-popup apbct-trp-popup-desktop" id="apbct_trp_comment_id_476458"> <div class="apbct-real-user-title"> <p class="apbct-real-user-popup-header">The Real Person!</p> <div class="apbct-real-user-popup-content_row"> <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img"> <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span> </div> <div class="apbct-real-user-popup-content_row"> <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img"> <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span> </div> </div> </div> </div> <div class="apbct-real-user-popup apbct-trp-popup-mob" id="apbct_trp_comment_id_476458"> <div class="apbct-real-user-title"> <p class="apbct-real-user-popup-header">The Real Person!</p> <div class="apbct-real-user-popup-content_row"> <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img"> <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span> </div> <div class="apbct-real-user-popup-content_row"> <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img"> <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span> </div> </div> </div> </div>
      Anna Kurowska on January 26, 2021 at 4:22 pm

      Use 2 columns snippet without media queries

      Plain text
      Copy to clipboard
      Open code in new window
      EnlighterJS 3 Syntax Highlighter
      [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;
      }
      [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; }
       [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 *

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

A WordPress Development Company. Formerly Aspen Grove Studios and Divi Space.
Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

Join Our Mailing List

Newsletter (footer)