Archived topic
Mobile Layout Of WooCommerce Shop Has Changed
14 replies · Started by Mary Pearson on July 25, 2021
Re the WooCommerce shop on one of my websites https://beestea.ca/shop/
Computer layout is sidebar/content with 4 columns
Mobile layout is 1 column.
All has been good for years, until tonight when my client noticed that the mobile layout now has 4 columns, so the product titles are now showing broken words on several lines. Example:
Pack
age 3
With
Infus
er
Mug
All looks good in Customizer view and on responsinator.com, but on my iPhone and her Android phone there are 4 columns instead of 1.
I contacted WooCommerce support and they said "The mobile layout is not controlled by WooCommerce but is mostly controlled by the theme the site is using" so I installed Twenty-Seventeen theme, and the layout on mobile works fine. It is just one column, as it should be. When I put it back to GeneratePress_child, it uses four columns again.
I must emphasize that you won't see the problem on a computer. It looks as it should on computer (mobile view). It must be viewed on an actual phone.
Recently updated to WP 5.8
WooCommerce V5.5.2
GP Premium V2.0.3
GeneratePress theme V 3.0.4
PS: I tried adding CSS but it didn't help
@media screen and (max-width: 600px) {
.woocommerce ul.products li.product {
float: none !important;
width: auto !important; }
}Would appreciate your input. Thank you.
Hi Mary,
Can you check on Appearance > Customizer > Layout > WooCommerce and check this setting - https://share.getcloudapp.com/WnuxoDB6 - if it is set to 4 on mobile as well?
Thank you Elvin. Yes, it is set to 1 column on mobile.
Hi there,
shot in the dark, but can you try adding this PHP Snippet to your site:
add_action( 'after_setup_theme', function() {
remove_action( 'wp_head', 'generate_add_viewport' );
add_action( 'wp_head', 'generate_add_viewport', 1 );
} );YES David! That worked. Thank you so very, very much!!!!
Awesome - glad to be of help.
That will part of the next theme update - so once GP 3.1 is out and you update you can remove it.
Sounds good - although I probably won't remember. LOL
We'll try and remind you if we can :)
That would be wonderful!!!! Thank you!
Hi David,
I'm on GP Premium 2.0.3 and noticed that I still have to use this add_action( 'after_setup_theme' in order for the product pages to appear correctly on mobile. Is that expected or was this intended to be fixed in this version?
Thanks!
Hi Randy,
This was added on GeneratePress 3.1.0 (a beta version) as shown here - https://github.com/tomusborne/generatepress/blob/a1340a4d0eb72057b78efdd5dc5477c921fc9241/inc/structure/header.php#L370-L380
You're likely using the current official version which is 3.0.4 which doesn't have this update yet.
You can download the beta version if you want on your accounts page in GeneratePress - https://generatepress.com/account/
I'm on GP Premium, so which is the equivalant version that will contain this update? Also, is it safe to download for production yet or should I wait?
Hi there,
Its not GP Premium related. Its the Free theme, version 3.1 is in final stages of Beta Testing. I reckon it will be live in the next week maybe 2 maximum. I would wait for the update and just the code i provided in the meantime
Hi David,
Can you clarify this please. When I go to my installed plugins, I have GP Premium, Generate Blocks and Generate Blocks Pro.
I am using a child theme of Generate Blocks.
So how does that work in terms of when feautures/fixes get pushed to the free theme, do they then show up automatically in the child theme?
Also, related to this, is there a way to actually know if I'm using all three plugins, or for example, if I have Generate Blocks Pro activated do I really need Generate Blocks plugin also activated.
Not totally clear on the interplay among all these.
Sorry if its a stupid question...
Can you please open a new topic for the separate questions?
Thanks!
