Change the number of products per row, depend on screen size Woocommerce

Question

I want to change the number of products per row (category page), depend on screen size.

jQuery(window).resize(function(){
   var width = jQuery(window).width();

   if(width >= 1000 && width <= 1200){
     jQuery('.sentry-product').removeClass('columns-4').addClass('columns-3');
     }
   else{
     jQuery('.sentry-product').removeClass('columns-3').addClass('columns-4');
     }
})
.resize();

I'm using this jQuery to change the number of possible columns, I need to change the number of product as well,

Now I'm hardcoding the number of products

        function storefront_product_columns_wrapper() {
        $columns = storefront_loop_columns();
        echo '<div class="sentry-product columns-' . intval( $columns ) . '">';
    }
}

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
    }
}

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 );

I don't understand if I can do it, Some ideas?

Answer 1

This is how to do it with three columns, reducing to two on a viewport of 600px or less;

@media screen and (max-width: 600px) {

.woocommerce.columns-3 ul.products li.product, .woocommerce-page.columns-3 ul.products li.product {
   width: 45%; /* was 30.75% */
}

.woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {
  width: 45%; /* for category pages */
}

.woocommerce ul.products li.first, .woocommerce-page ul.products li.first {
  clear: none; /* was both */
}

.woocommerce ul.products li.last, .woocommerce-page ul.products li.last {
  margin-right:3.8%; /* was 0 */
}

Obviously you'll have to adjust for a different number of columns or breakpoint. And I'm about to write another set for 480px so I can have one product per row on phones. This CSS comes after woo commerce's CSS (or use !important )