WooCommerce怎么在手机端一行显示两列产品

这个问题主要分两种情况,第一种是产品的分类页面,另一种是首页的产品展示,两种设置方法不太一样,我们分别看看。

视频教程

第一种. 产品类目页

这是商城的Casual这个类目下的产品展示页,电脑端一行四个产品很正常。

局部截取 20250510 111019

但是到了移动端就变成一行一个,有点浪费空间。

局部截取 20250510 111114

更改方法也很简单,选择左上角的Customize。

局部截取 20250510 111232

到了自定义页面之后,把展示样式调成手机端。

局部截取 20250510 111329

然后鼠标移动到产品图片上会有EDIT字样显示,点击。

左边会出现编辑区域,将列和行改成2.

局部截取 20250510 111415

这样在手机端一行就可以显示2个产品了。

局部截取 20250510 111547

第二种. 首页的展示产品

电脑端同样一行展示四个,没什么问题。

局部截取 20250510 112321

但是切换到手机端又变成一个了。

选中元素区域的产品集合,在右侧边栏编辑区域的区块下,响应式打开,这样手机端就可以展示一行两个产品了。

局部截取 20250510 112704

© 文章版权归白小菌所有,🫰欢迎转发分享。未经允许请勿抄袭转载。

订阅评论
提醒
guest
0 评论
最新
最旧 最多投票
现代响应式侧边栏
快捷菜单