WooCommerce change products per row based on screen size

  • Lots of help on the web about how to change the number of products per row, as well as how to do the CSS for row widths, etc.

    What I haven’t been able to solve is how to dynamically change the number of products per row based on the user’s device.

    For example, I’d like 4 per row for desktop, 3 per row for tablets, and 2 per row for smartphones.

    Again, I have the CSS for these three configurations, but the problem is the “first” and “last” classes. Those are being assigned to the appropriate products, based on the “loop_columns” quantity set in WooCommerce.

    So I may be able to change the CSS for the columns from 4 per row to 3 per row, but the row is still ending at the 4th product because the quantity per row in WC is still set at 4.

    Because PHP is server side and doesn’t know the browser size, I can’t write a function to dynamically change the “loop_columns.”

    With CSS I can add “first” and “last” classes to the first and last products of a new row width, but don’t know how to get rid of the ones that WC placed.

    What am I missing here?

Viewing 1 replies (of 1 total)
  • zeidanbm

    (@zeidanbm)

    What you’re saying is 100% correct you can’t use php for this. You need to use javascript. I ran into same problem. I think a clean solution would be to create an api call that will run a php code that runs the filter to adjust the rows. And then call it using ajax on screen resize.

    Another quick solution is to adjust the css based on screen resize.
    1) detect what screen size you want the rows to break from 3 into 2
    2) write the javascript code (i’m using jquery)
    3) make some calculations to determine how you gonna add the first and last classes ( in the code below it works for me cause i have 3 rows on large screens and 2 rows on smaller and then 1 row on mobile screens) you might need to change the modules numbers if you have 4 rows on large screens….

     $( window ).on("resize", function() {
      var windowWidth = $(window).width();
      if(windowWidth < 850){ // this is my screen size break point for the rows
        adjustProductRows(); // call the function to adjust add last and first classes
      } else {
        defaultProductRows(); // else if large screen size then get everything back to defalut
      }
    }); 

  function defaultProductRows(){
    var products = $('ul.cat-products li.type-product');
      products.each(function(idx, li) {
    	 var product = $(li);
         // remove all classes we added
  	 $('ul.cat-products li.adjusted-row.first').removeClass('adjusted-row first');
         $('ul.cat-products li.adjusted-row.last').removeClass('adjusted-row last');
      if(idx == 0) { // make sure first li tag gets first class
        	product.addClass('first');
      }
      else if((idx+1) % 3 == 0) //this will make sure we have 3 rows by adding last classes after each 3 products
      {
       	product.addClass('last');
      }
      else if(idx % 3 == 0)
      {
        product.addClass('first'); // make sure all products divided by 3 will have first       class
      }
      else
      {
        console.log(idx); // just checking for the index
      }

   		 
		});
  }
  
  function adjustProductRows() {
      
       var products = $('ul.cat-products li.type-product');
	products.each(function(idx, li) {
    	var product = $(li);
  
      if(idx % 2 == 0) // we are even
      {
        product.addClass('adjusted-row first');
        product.removeClass('last');
      }
      else // we are odd
      {
        product.addClass('adjusted-row last');
        product.removeClass('first');
      }

   		 
		});
    
  }
Viewing 1 replies (of 1 total)
  • The topic ‘WooCommerce change products per row based on screen size’ is closed to new replies.