php - 响应式 Woocommerce 产品网格

Question

我喜欢根据设备(基于最大像素宽度)为我的网站设置每行产品。我喜欢使用此设置，直到我为每个设备设置了最佳产品显示。

例如:

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

我尝试了以下方法:

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

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

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

Answer 1

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

您必须查看您的 woocommerce 样式表 (woocommerce/assets/css/) 以了解如何为不同的媒体屏幕设置列，只需搜索:

@media screen

您应该会看到任何与列显示相关的 css 样式，可能类似于此示例:

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

您基本上是在强制不同的屏幕分辨率具有不同的列数。您还可以为不同的屏幕分辨率做其他事情，例如隐藏某些元素，只需查看它的 css 代码即可。

现在，我不知道你从哪里得到你最初发布的代码，但如果该代码是 woocommerce 的核心 php 代码的一部分，那么你可能需要将它与 CSS 一起修改才能获得根据您的喜好出现和安排的产品。然而，为了布局的目的，暂时先乱用 CSS。

希望对您有所帮助。