更改每行产品数量，取决于屏幕大小Woocommerce

Question

我想改变每一行产品的数量(类别页)，取决于屏幕大小。

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

我使用这个jQuery来改变可能列的数量，我也需要改变产品的数量，

现在我正在对产品的数量进行硬编码

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

我有另一个想法，如果我可以将产品的数量作为一个参数从类名中传递出来，那么它将修复这个问题--返回apply_filters(‘StopremeL循环_columns’，X )；

我不明白我是否能做到，有什么想法吗？

Answer 1

这是如何与三列，减少到两个在一个600 on或更少的视口；

@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 */
}

显然，您必须根据不同的列数或断点进行调整。我要为480 on再写一套，这样我就可以在手机上每行生产一种产品。此CSS是在woo commerce的CSS (或使用!important)之后出现的。