[Resolved] Product Columns not obeying Customize settings on mobile/tablet

[loadingartist]

Hi there!

I’m using GP Premium with Woocommerce and I have noticed a strange bug? In my Customizer I have set my Product Columns to be 3 for Desktop, 2 for tablet, and 1 for mobile. It looks fine and working in the category pages, but whenever I go to a custom page the tablet/mobile versions are ALWAYS 2 columns (no matter what setting I have set in Customizer).

For my custom pages I am using Sections. Even if I try force columns in my Woocommerce shortcodes, it is still always 2 columns on tablet/mobile.

I have tried deactivating all non GP plugins, but it doesn’t affect it. I don’t have any caching plugins at the moment, and I have also tried viewing it in another browser.

I have included my bypass link in this thread’s URL, and here is a custom page example: https://store.loadingartist.com/code-cat-collection/

Thank you for your time!
Gregor

[Leo]

Hi there,

GP’s customizer settings don’t control the shortcodes columns unfortunately.

It only controls the columns in the default archive (shop, category etc) pages.

[loadingartist]

Hi Leo, thanks for the reply.

I see, but if I don’t include any columns specification in the shortcode, should it not be following the customizer settings? E.g. [products limit="4" tag="hoodie"]

And even if I do include columns in the shortcode, mobile/tablet is still always 2 columns no matter what.

[Leo]

The customizer should have nothing to do with the shortcodes.

Looks like the default would be 4 if you don’t set the columns in the shortcode:
https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-7

Doesn’t look like they included the mobile column selection unfortunately.

I noticed that when building Prime too:
https://gpsites.co/prime/

Are you looking for just 1 column on mobile?

[loadingartist]

Oh I see..! So it’s Woocommerce lacking the mobile option with their shortcodes.

Yeah I’m looking to have just 1 column on mobile, and 2 on tablet, ideally. Is that something that can be overwritten via CSS?

[Leo]

They are using the breakpoint 768px which is pretty standard.

Give this a shot:

@media (max-width: 768px) {
    .site-content .woocommerce ul.products[class*=columns-] li.product, 
    .site-content .woocommerce-page ul.products[class*=columns-] li.product {
        width: 100%;
        float: none;
        clear: none;
        margin: 0 0 2.992em;
    }
}

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

[loadingartist]

Hey Leo thanks for the reply. I tried adding that via SimpleCSS but noticed no change unfortunately..! Even adding a display:none; has no effect, but..

@media (max-width: 768px) {
    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product {
        width: 100%;
        float: none;
    }
}

Doing this code, while still not affecting anything to do with columns, the display:none; does hide everything (so I know it’s at least running). Odd..!

[Leo]

Can you try the edited code?
https://generatepress.com/forums/topic/product-columns-not-obeying-customize-settings-on-mobile-tablet/#post-1127458

[loadingartist]

Hmm still nothing..! 🤔 Even adding a display:none; as a test doesn’t change anything either.

[Leo]

Edited the CSS again:
https://generatepress.com/forums/topic/product-columns-not-obeying-customize-settings-on-mobile-tablet/#post-1127458

[loadingartist]

Awesome, that works! Thank you so much, Leo!

My final code (to also get it to 2 columns for tablet) is:

@media (max-width: 768px) {
    .site-content .woocommerce ul.products[class*=columns-] li.product, 
    .site-content .woocommerce-page ul.products[class*=columns-] li.product {
        width: 100%;
        float: none;
        clear: none;
        margin: 0 0 2.992em;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .site-content .woocommerce ul.products[class*=columns-] li.product, 
    .site-content .woocommerce-page ul.products[class*=columns-] li.product {
        width: 50% !important;
        float: left !important;
        clear: none;
        margin: 0 0 2.992em;
    }
}

[Leo]

No problem 🙂

[Author]

Posts