Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] GP 1.4 Woocommerce responsive columns

Home Forums Support GP 1.4 Woocommerce responsive columns

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #362516
    David
    Staff
    Customer Support

    Hi Tom, great update but regrettably the mobile columns aren’t working for Woo. Using the pre-build woo shop and category pages, no EL or short codes.
    Whatever the setting i only get one column, with a diminishing size ratio. I can live with singles for the time being but there is an awkward tablet breakpoint where a single column doesn’t cover the width.

    I have disabled the old CSS fix. And even putting it back in doesnt seem to fix it.

    Link here

    GeneratePress 1.3.48
    GP Premium 1.4.1
    #362823
    Tom
    Lead Developer
    Lead Developer

    Grr, WC mobile columns are going to be the end of me.

    Mind doing some testing with me?

    In gp-premium/woocommerce/functions/css/woocommerce-mobile.css, near the top, replace:

    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product, 
    .woocommerce-page[class*=columns-] ul.products li.product,
    .woocommerce[class*=columns-] ul.products li.product {
    	width: 100%;
    	float: none !important;
    	clear: both;
    	margin: 0 0 2.992em;
    }

    With:

    .woocommerce-page[class*=columns-] ul.products li.product,
    .woocommerce[class*=columns-] ul.products li.product {
    	width: 100%;
    	float: none !important;
    	clear: both;
    	margin: 0 0 2.992em;
    }

    Regular pages fixed? Shortcode pages still good?

    Thank you!

    #363052
    David
    Staff
    Customer Support

    1. Before changing CSS i added a Short Code page. All mobile are displayed as single 100% columns regardless of the setting.
    2. Changed CSS in plugin folder. Mobile columns are now 100% as per the Short code. Customiser doesn’t change it.
    3. Noticed that Minified CSS was being used so disabled this.
    3.1 Result was the same for all customiser settings > 2 x one third columns. One floated left the other floated right.
    3.2 Also the Nav Search and Checkout basket crashed into each other.
    4. Put back original CSS and switched on minified again. Now if in the inspector i disable the Float None:

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce-page[class*="columns-"] ul.products li.product, .woocommerce[class*="columns-"] ul.products li.product {
        width: 100%;
        /* float: none !important; */
        clear: both;
        margin: 0 0 2.992em;
        }
    }

    It now WORKS! on the normal shop / category pages. So now added into CSS style sheet.
    It doesnt work on the short code, this still displays only a single item. and messes up the column gaps and left padding on the related/upsell products on single product page. The latter one i can probably fix.

    The issue does seem to be related to the floating of products. I had a little success with floating columns left and right but couldnt get it to stick and required a lot more code to be changed…..

    Oh and just to cover Elementor Woo products acts the same as Short Codes which is good. Not that i need it.

    Getting somewhere.

    David

    #363264
    Tom
    Lead Developer
    Lead Developer

    I think I have the solution.

    Replace the original block of CSS I mentioned with this:

    .woocommerce[class*=columns-] ul.products li.product {
    	width: 100%;
    	float: none !important;
    	clear: both;
    	margin: 0 0 2.992em;
    }
    
    .woocommerce[class*=columns-] ul.products {
    	margin-left: 0;
    }

    You mentioned the cart/search icon clashing. Can you link me to a page where that’s happening?

    #363285
    David
    Staff
    Customer Support

    Fingers Crossed Tom – ill give it a go. I’m gonna run 1.4.1 update first as didnt want this interfering.
    Sorry dont worry about the cart/search clash – this only happened when i removed the minified CSS in testing. I assume the cart styling is in the woo css,

    #363319
    Tom
    Lead Developer
    Lead Developer

    You can add this into wp-config.php to make your installation use the non-minified versions of the scripts:

    define('SCRIPT_DEBUG', true);

    In my tests, these tweaks seem to have fixed it 🙂

    #363391
    David
    Staff
    Customer Support

    Hi Tom,

    thanks for the debug script – saved me mucking around and with the minify out of the way and the new code…..

    IT WORKS!!!!

    Just to note – Short codes and Elementor still force the columns to 1 on mobile. But that’s doesnt bother me.

    I spent a while examining my own code this morning to make sure there wasn’t any margin/padding that was causing the issue.
    I’ll leave the debug on until the new patch with new minify comes out.

    Thanks Tom

    #363686
    Tom
    Lead Developer
    Lead Developer

    Forcing 1 on mobile is likely a necessary unfortunately, at least until I figure out how to efficiently add the GP WC classes to shortcode pages.

    Glad it’s working now 🙂

    #363850
    David
    Staff
    Customer Support

    Thanks Tom – i assume this will be patched soon?

    #364011
    Tom
    Lead Developer
    Lead Developer
    #364023
    David
    Staff
    Customer Support

    Thats brilliant news. Great stuff.

    #367003
    richpags

    Looks like I’ve run into a similar issue when upgrading to 1.4.

    Via mobile, my Woo / Elementor home page would display 2 columns of images.

    After update, its displaying the 1 column.
    Can I roll back if I there’s no current fix?

    Site: reelmovieposters.com.au

    Cheers
    Richie

    Richard Pagliaro
    Reel Movie Posters
    https://reelmovieposters.com.au

    #367264
    Tom
    Lead Developer
    Lead Developer
    #367291
    richpags

    Hey Tom.

    Cheers for getting in touch.
    Yep, upgraded to GP Premium 1.4.2 today.

    I can provide temp admin back end logins if required.

    Richie

    Richard Pagliaro
    Reel Movie Posters
    https://reelmovieposters.com.au

    #367372
    Tom
    Lead Developer
    Lead Developer

    Ah, you’re using the WC shortcode.

    GP doesn’t have any mobile control over products displayed with shortcodes – we can only control the shop page/archives.

    For pages built with shortcodes, the mobile view will go to one column. This can be adjusted with CSS if needed: https://generatepress.com/forums/topic/still-having-woo-shortcode-issues/#post-366339

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.