woocommerce 2 columns on mobile not working

somehow it doesn't add "wc-mobile-columns-2" class into the shortcode html

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 :)

Thanks for your reply but it is not working.

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

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

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?

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