0

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.

0

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.

  • 1
    Thanks Pekka, I will give that a shot when I get home. I have never used the nth-child` in CSS so not 100% sure how it works but from what I have seen it could be a good option – SupGen Apr 26 '18 at 11:37
  • You're welcome. If you run into trouble adjusting the CSS, post the HTML structure that the widget gives to the browser – Pekka 웃 Apr 26 '18 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.