title: Change the number of products per row, depend on screen size Woocommerce
body: <p>I want to change the number of products per row (category page), depend on screen size.</p>
  
  <pre><code>jQuery(window).resize(function(){
     var width = jQuery(window).width();
  
     if(width &gt;= 1000 &amp;&amp; width &lt;= 1200){
       jQuery('.sentry-product').removeClass('columns-4').addClass('columns-3');
       }
     else{
       jQuery('.sentry-product').removeClass('columns-3').addClass('columns-4');
       }
  })
  .resize();
  </code></pre>
  
  <p>I'm using this jQuery to change the number of possible columns,
  I need to change the number of product as well,</p>
  
  <p>Now I'm hardcoding the number of products</p>
  
  <pre><code>        function storefront_product_columns_wrapper() {
          $columns = storefront_loop_columns();
          echo '&lt;div class="sentry-product columns-' . intval( $columns ) . '"&gt;';
      }
  }
  
  if ( ! function_exists( 'storefront_loop_columns' ) ) {
      /**
       * Default loop columns on product archives
       *
       * @return integer products per row
       * @since  1.0.0
       */
      function storefront_loop_columns() {
          return apply_filters( 'storefront_loop_columns', 4 ); // 4 products per row
      }
  }
  </code></pre>
  
  <p>I have another idea,
  If I can pass the number of product as a parameter from the class name it will fix the issue - return apply_filters( 'storefront_loop_columns', X );</p>
  
  <p>I don't understand if I can do it, Some ideas?</p>