嘿，我懂你想要实现的响应式产品列数需求——之前用固定的loop_shop_columns过滤器确实没法针对不同设备调整，太局限了。别发愁，给你两种靠谱的解决方案，直接就能搞定：

这种方法不用修改PHP代码，直接通过CSS针对不同屏幕宽度调整产品宽度，就能控制每行显示数量，兼容性和灵活性拉满，适合绝大多数场景。

假设你的产品容器类是.products，单个产品项类是.product（这是WooCommerce默认类名，要是你的主题有自定义类，替换成对应名称就行），把下面的CSS加到主题自定义CSS面板或者子主题的style.css里：

/* 默认：桌面端每行4个产品 */
.products .product {
    width: 25%;
    padding: 0 10px;
    box-sizing: border-box;
}

/* 笔记本/平板横屏（最大宽度1024px）：每行2个 */
@media (max-width: 1024px) {
    .products .product {
        width: 50%;
    }
}

/* 平板竖屏/移动端（最大宽度768px）：每行1个 */
@media (max-width: 768px) {
    .products .product {
        width: 100%;
    }
}

简单解释下：

• 桌面端默认25%宽度（加上内边距刚好4个一行）
• 屏幕宽度≤1024px时，改成50%宽度，每行2个
• 屏幕宽度≤768px时，100%宽度，每行1个

你完全可以根据自己的需求调整媒体查询的像素值和宽度比例，比如想在1200px的中等屏幕显示3个，就加一条@media (max-width: 1200px)规则，把宽度设为33.33%就行。

如果你的主题会根据loop_shop_columns的返回值给容器加类（比如columns-4这种），可以用PHP+JS的组合来动态修改列数：

第一步：修改PHP过滤器 #

先给过滤器设一个默认的桌面端列数：

add_filter('loop_shop_columns', 'custom_loop_columns');
function custom_loop_columns() {
    // 默认返回4，对应桌面端每行4个
    return 4;
}

第二步：添加JS代码动态调整类名 #

用JS检测屏幕宽度，在页面加载和窗口 resize 时修改容器的列数类：

function adjustProductColumns() {
    const productsContainer = document.querySelector('.products');
    if (!productsContainer) return;

    if (window.innerWidth <= 768) {
        productsContainer.classList.remove('columns-4', 'columns-2');
        productsContainer.classList.add('columns-1');
    } else if (window.innerWidth <= 1024) {
        productsContainer.classList.remove('columns-4', 'columns-1');
        productsContainer.classList.add('columns-2');
    } else {
        productsContainer.classList.remove('columns-2', 'columns-1');
        productsContainer.classList.add('columns-4');
    }
}

// 页面加载时执行
window.addEventListener('load', adjustProductColumns);
// 窗口缩放时实时调整
window.addEventListener('resize', adjustProductColumns);

最后配合对应的CSS规则：

.columns-1 .product { width: 100%; }
.columns-2 .product { width: 50%; }
.columns-4 .product { width: 25%; }

小提醒 #

• 要是用的是WooCommerce默认主题Storefront，它本身自带响应式列数，但你可以用上面的CSS覆盖默认样式
• 记得多在不同设备上测试，调整媒体查询的断点值，找到最适合你网站的布局效果
• 要是遇到产品间距问题，微调padding或者margin的值就能搞定

内容的提问来源于stack exchange，提问作者Rick