woocommerce短代码.移动和桌面之间的更改显示

Question

目前，在我的网站主页上，我正在使用woocommerce的代码来显示来自某些类别的产品，并选择在桌面上显示5种产品，这些产品与屏幕宽度非常吻合。

然而，在移动设备上，该短代码也会导致5种产品显示，看起来很混乱。

我想知道是否有一种方法来修改这些短代码，以便它可以在桌面上显示5，而在移动设备上只显示2种产品？

我试着把所有的5条线与溢出隐藏，但取决于移动屏幕的宽度，有时有一些第三产品显示，看起来不太专业。

我的短代码的形式如下：

[products limit="5" columns="5" visibility="featured" ]

• 在主屏幕上展示特色产品..。

我也有销售产品以及几个不同类别的产品显示，所有使用类似的短代码。

Answer 1

想到的一个简单方法是使用nth-child选择器通过CSS隐藏移动视图中的元素。

这样，所有五个元素仍然在源代码中呈现，但只有两个元素在低于一定分辨率的设备上可见。

假设产品项是带有类item的容器中的类products的元素的示例代码：

@media (max-width: 480px) /* replace with whatever mobile threshold the rest of your
                             CSS is using */
 {

   .products .item { display: none } /* Hide all elements by default */

   .products .item:nth-child(1),   /* Selectively re-enable 1st and 2nd element */
   .products .item:nth-child(2)
    { 
      display: block; /* Or whatever the elements' original display value is */
    }
 }

您也可以扩展此代码(使用min-width和max-width的组合)来调整非常窄和非常大屏幕的项目数。

Answer 2

@media (max-width: 544px) {
.woocommerce ul.products:not(.elementor-grid).columns-3, .woocommerce-page ul.products:not(.elementor-grid).columns-3 {
    grid-template-columns: repeat(2,minmax(0,1fr));
}
}
}