[Support request] woocommerce 2 columns on mobile not working

[jasond]

Hello

Can you advise why on Shop page 2 columns mobile working when setting it in Customize, but on the homepage when using Woocommerce shortcode it displays in 1 column only

Thank you

[jasond]

somehow it doesn’t add “wc-mobile-columns-2” class into the shortcode html

[Leo]

Hi there,

That’s the expected behavior actually – the customizer options don’t apply to shortcode currently.

I had a chat with Tom recently about it and apparently it’s a bit tricky to do.

Give this CSS a shot though:

@media (max-width: 768px) {
    .woocommerce[class*=columns-] ul.products li.product {
        width: 50%;
        float: left !important;
        clear: both !important;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[jasond]

Thanks for your reply but it is not working.

It seems woocommerce-mobile.min.css’s important value take control of everything

[David]

Hi there,

try making the selectors very specific like so:

@media (max-width: 768px) {
    .woocommerce.columns-4 ul.products.columns-4 li.product {
        width: 50%;
        float: left !important;
    }
}

[jasond]

thanks it is working. only 1 issue is that there are some rows display only 1 product. the clear: none important setting in plugins/gp-premium/woocommerce/functions/css/woocommerce-mobile.min.css?ver=1.7.8 it should be clear both. How do i fix that?

[David]

Try including this within the media query CSS i gave you above:

.woocommerce.columns-4 ul.products.columns-4 li.product.first {
    clear: both !important;
}

[Author]

Posts