响应式 Woocommerce 产品网格答案

【问题标题】：Responsive Woocommerce Product Grid响应式 Woocommerce 产品网格
【发布时间】：2020-05-03 16:54:49
【问题描述】：

我喜欢根据设备（基于最大像素宽度）为我的网站设置每行产品。在为每台设备设置最佳产品显示之前，我喜欢使用此设置。

例如：

移动设备上每行 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
    }
}

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

【问题讨论】：

标签： php html css woocommerce responsive

【解决方案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。

希望对您有所帮助。

【讨论】：