Jump to content

Platform 5 & WooCommerce Shop Page Mobile

Recommended Posts



I've been working on my site running Platform 5 & WooCommerce.  On my shop page I modified the default 4 column product display to show 3 columns instead.  I used this article as reference, see here.  

I added the following code to my functions.php file:

// Change number or products per row to 3
add_filter( 'loop_shop_columns', create_function(  '$columns','return 3;' ) );

I then added the following CSS

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 29.5%;

My main shop page at, http://www.christina-lombardi.com/shop/, is displaying well on computers and laptops but I don't like the way it's displaying on mobile phones.  If you compare this shop page display to a custom page I created with WooCommerce short codes at, http://www.christina-lombardi.com/shop/booties/, you will notice on a mobile phone the main shop page is displaying with small products and much space between them.  I'd like the mobile formatting on the shop page to dispaly as it does on my page at http://www.christina-lombardi.com/shop/booties/.

Does anyone have any suggestions on how to adjust the code on the main shop page for a better mobile display?

Thank you - chules

Share this post

Link to post
Share on other sites

If anyone has the time to look at this post it would be much appreciated.  Just trying to see how I can improve the layout of my shop page on a mobile device.


Thank you


Share this post

Link to post
Share on other sites

You'll need to look into media queries if you want different css on mobile and desktop.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now