Question

我喜欢根据设备（基于最大px宽度）为我的网站设置每行产品。我喜欢使用此设置，直到我为每台设备设置了最佳产品显示。

例如：

移动设备上每行1个产品，平板电脑上有2款产品笔记本电脑和更大的4种产品。

我尝试了以下内容：

N1。足够，不能为不同的设备设置

//将每行的数量或产品更改为3

add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
    function loop_columns() {
        return 3; // 3 products per row
    }
}

找到style.less文件，但最新版本的wordpress文件不再存在。

一些帮助将不胜感激？

Answer 1

我不再使用woocommerce，但通常这是使用@media屏幕在css中完成的事情

你必须查看你的woocommerce样式表（woocommerce / assets / css /），看看如何为不同的媒体屏幕设置列，只需搜索：

@media screen

你应该看到任何css样式的相关列显示可能看起来像这个例子：

@media screen and (min-width:1218px) {
.col2-set .col-1
},

您基本上强制不同的屏幕分辨率具有不同的列数。你也可以为不同的屏幕分辨率做其他事情，比如隐藏某些项目，只需查看它的css代码。

现在，我不知道你从哪里获得了你最初发布的代码，但如果该代码是woocommerce的核心php代码的一部分，那么你可能需要与CSS一起改变它，如果是这样的话，那就得到了产品出现并按您的喜好排列。但是，暂时将CSS弄乱为布局目的。

希望有所帮助。

响应式Woocommerce产品网格

1 个答案: