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

Home Forums Support Product Columns not obeying Customize settings on mobile/tablet

  • This topic has 11 replies, 2 voices, and was last updated 6 months ago by Leo.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1127423
    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

    #1127427
    Leo
    Staff
    Customer Support

    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.

    #1127429
    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.

    #1127438
    Leo
    Staff
    Customer Support

    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?

    #1127441
    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?

    #1127458
    Leo
    Staff
    Customer Support

    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/

    #1127635
    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..!

    #1128044
    Leo
    Staff
    Customer Support
    #1128254
    loadingartist

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

    #1128374
    Leo
    Staff
    Customer Support
    #1128455
    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;
        }
    }
    #1128469
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.