Francisco Francisco - 1 year ago 129
CSS Question

Products per row Woocommerce

i have this Woocommerce site and i want to display 6 products per row. I try adding some code to functions.php and changing li width with css. Here is the website: Too i tried WooCommerce Product Archive Customizer plugin but not work.

My functions.php file:

// Display 24 products per page. //working
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 9;' ), 20 );

// Change number or products per row to 3 //not working
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 6; // 3 products per row

Thank you

Answer Source

I have made 6 products to display per row using the CSS style itself. I will provide you with the style how i have changed it.

Stylesheet 1:

Hide the line that i have mentioned below

.woocommerce ul.products li.product:nth-child(4n+1) {
    /*clear: both !important;*/

And in the same file change the style of selector to this

.woocommerce ul.products li.product {
  clear: none !important;
  margin: 2% !important;
  width: 12% !important; /* you have given here it as 15% */

And final one is to apply the style for the UL class .products and you can paste this anywhere you want but if is not been applied put it under important tag.

.products {
  float: left;
  width: 100%;

Here is the screen shot that have made by applying the style that i have sent to you.

Hope this solution helps you.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download