[Resolved] GP 1.4 Woocommerce responsive columns

[David]

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

[Tom]

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!

[David]

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

[Tom]

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?

[David]

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,

[Tom]

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 🙂

[David]

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

[Tom]

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 🙂

[David]

Thanks Tom – i assume this will be patched soon?

[Tom]

Today 🙂

[David]

Thats brilliant news. Great stuff.

[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

[Tom]

Are you running 1.4.2?

[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

[Tom]

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

[Author]

Posts