woocommerce Shortcodes - Change display between mobile and Desktop

Question

Currently, on my website homepage, I am using woocommerce shortcodes to display products from certain categories and have opted to show 5 products on Desktop which fits in well with the screen width...

However, on mobile devices, the shortcode also causes 5 products to be displayed which looks messy.

I was wondering if there was a way to alter the shortcode so that it may show 5 on Desktop but only 2 products on mobile devices?

I have tried putting all 5 in a line with overflow hidden but depending on the width of the mobile screen, there is sometimes some of the 3rd product shown which doesnt look very professional.

my shortcodes are of the form:

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

• Shows featured products on home screen...

I also have sale products as well as a few different categories products displayed, all using a similar shortcode.

Answer 1

One easy way that comes to mind is to hide the elements in the mobile view via CSS using the nth-child selector.

That way, all five elements are still rendered in the source code, but only two of them are visible on devices below a certain resolution.

Example code assuming your product items are elements of the class item inside a container with the class 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 */
    }
 }

You can extend this code (using combinations of min-width and max-width) to adjust the number of items for very narrow and very large screens, too.

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));
}
}
}