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

【问题标题】：Change the number of products per row, depend on screen size Woocommerce更改每行的产品数量，取决于屏幕大小 Woocommerce
【发布时间】：2018-01-30 18:22:27
【问题描述】：

我想根据屏幕大小更改每行（类别页面）的产品数量。

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

我有另一个想法，如果我可以将产品数量作为类名的参数传递，它将解决问题 - return apply_filters('storefront_loop_columns', X);

我不知道我能不能做到，有什么想法吗？

【问题讨论】：

尽可能使用媒体查询，并隐藏您不想看到的额外产品。
我的 CSS 没问题，我想更改 PHP...
如果你想在用户调整屏幕大小的时候改变产品的数量，你需要ajax来获取你想要的产品的数量并放到页面中。
不要试图解决服务器端的显示问题。将所有产品（一页）传递给用户，让 CSS 根据设备宽度处理正确的宽度。我建议您查看 flexbox 和/或媒体查询。 php 决定列的事实可能是 CRM 为无法编写代码的人提供选项的原因
我的问题是我无法阻止 Woocommerce 页面的默认行为，是否可以“解决服务器端显示问题”，我无法控制 CSS 中的连续产品数量.. .

标签： php wordpress woocommerce

【解决方案1】：

这是如何使用三列，在 600 像素或更小的视口上减少到两列；

@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 像素编写另一组，这样我就可以在手机上每行有一个产品。这个 CSS 来自 woo commerce 的 CSS（或使用 !important）

【讨论】：

就个人而言，在这个时代，我认为使用 .last 和 .first（或伪等价物）有点麻烦。
只是说，您不需要任何 Javascript。这一切都适用于 woo commerce 的默认输出。