[Resolved] initially 4 product columns on mobile

[Henry Bowman]

On mobile phone devices when you select a product category it displays four columns on any initial selection. if you then tell it to sort by price or any other sorting option it changes and displays correctly with one column. We have triple checked the settings In customizer it displays correctly there with one column initially and there after.

After thinking about this, about three years ago we asked about having more than one column displayed in our blog and we were told to add this to our child theme’s function.php file:

add_filter( ‘generate_blog_get_column_count’,’tu_search_column_count’ );
function tu_search_column_count( $count ) {
if ( is_search() ) {
return 33;
}

return $count;
}

add_filter( ‘option_generate_blog_settings’, ‘lh_search_columns’ );
function lh_search_columns( $options ) {
if ( is_search() ) {
$options[‘column_layout’] = true;
}

return $options;
}

Could this be messing with the way the mobile version is initially displaying the products?

[Leo]

Hi there,

Can you do this first so I can inspect the code better?
https://www.screencast.com/t/RWODcs6c5L

Thanks 🙂

[Henry Bowman]

oy.. with the WP-Rocket Cache off, it displays correctly. Any idea why it would display the products like that with the cache on?

[Leo]

Unfortunately not.

You can try turning some options within WP Rocket on/off to test.

Their support might have an idea as well 🙂

[Henry Bowman]

The only thing that worked was turning off the mobile cache in WP Rocket. I’ll wait to see what the Google AI thinks before messing with it any more. Thanks for your help! 🙂

[Leo]

No problem 🙂

[Ethan]

This was a fix for me too, thanks Henry. However it’s strange, now with the mobile cache is off I am afraid that my page load times will go up in mobile 🙁 Please update here if you find any solution.

Thanks

[Henry Bowman]

I did get a bit farther with this. The real issue is the “minify CSS files” and the “Optimize CSS” delivery”

What i’ve done currently is re enable the mobile cache, have seperate mobile cache turned on, and uncheck the “minify CSS files” and the “Optimize CSS” in the file optimization section.

It lowers the overall desktop score, but its still passable and so is the mobile score.

The solution would be to have seperate CSS settings for the desktop and mobile in these cache programs….or have the CSS written to work for both displays minified and optimized.

[Author]

Posts