[Resolved] Woocommerce product colums on mobile (archives)

[Jarno]

On mobile the woocommerce shop shows only one column, however I want to change this at least for tablet devices to more columns than 1. Let’s say that I want 3 or 2 columns on tablet portrait mode. Are there any standard settings in GP to do this?

Thanks!

[David]

Hi, you may find this topic of use Tom has provided CSS for 2 columns in portrait tablet mode

https://generatepress.com/forums/topic/column-shop-layout-in-desktop-ipad-mobile/#post-470371

[Jarno]

I will look into to it. For now I will mark this one as resolved.

Thanks again!

[David]

Glad to be of help.

[Jarno]

So I added the CSS from the topic mentioned by you. However nothing is happening and I don’t understand why.
Used code is below. I added this to the extra CSS.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    .woocommerce .wc-mobile-columns-1 ul.products li.product, 
    .woocommerce-page .wc-mobile-columns-1 ul.products li.product {
	width: 46.2%;
        clear: none !important;
    }

    .woocommerce .wc-mobile-columns-1 ul.products li.product:nth-child(2n+1), 
    .woocommerce-page .wc-mobile-columns-1 ul.products li.product:nth-child(2n+1) {
	clear: both !important;
    }
}

[David]

Hi Jarno, ok you’re using Elementor. That changes things a bit. Can you try this code instead:

@media (max-width: 768px) and (min-width: 420px) {
    .elementor-widget-container .woocommerce .wc-columns-4 ul.products li.product, 
    .elementor-widget-container .woocommerce-page .wc-columns-4 ul.products li.product, 
    .elementor-widget-container .woocommerce-page.columns-4 ul.products li.product, 
    .elementor-widget-container .woocommerce.columns-4 ul.products li.product {
        width: 48%;
        margin-left: 2%;
        float: left !important;
    }
}

[Jarno]

Nope, doesn’t work either. Nothing changes.
Just to let you know, I also run CSSHero on this website.

[David]

I updated the code above, give that a try…..

[Jarno]

Yes! This worked.

Thank you very much!

[David]

Phew…. at last lol! Glad it worked!

[Author]

Posts