我喜欢根据设备(基于最大像素宽度)为我的网站设置每行产品。我喜欢使用此设置,直到我为每个设备设置了最佳产品显示。
例如:
- 在移动设备上每行 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 文件已不存在。
最佳答案
我不再使用 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。
希望对您有所帮助。
关于php - 响应式 Woocommerce 产品网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49982692/