You know it’s the little things in life that highlight our great successes. I have been looking for this for literally hours.. What I wanted to do was edit the number of product columns that are shown in the default grid view homepage. It’s set to 4 and I wanted 3. Not hard right? Sadly it was but the solution was a two liner! Let me explain…
Woocommerce, by default, doesn’t work from a shortcode (it can do but not by default), instead it will show the shop page content using it’s own template system. It will look for arguments/parameters attached to the shortcode in order to augment the number of columns on any product listing page. I know I know, I just said that we aren’t using a shortcode but it’s looking for one anyway? Almost.. here is the solution:
global $woocommerce_loop; $woocommerce_loop['columns'] = 3;
There we have it, two lines. Either a sign of my genius or incompetence. I suspect the latter but for the moment I am fairly proud of this achievement. Essentially $woocommerce_loop contains the settings for the product page and by default the columns argument isn’t set leaving it up to the shortcode to populate (if used) or to fall back to it’s standard setting.. 4!
So after hours of trawling through code trying to find a WordPress Filter I can hook onto, I thought I would try this little gem (added to my theme functions.php) and magically it worked. This post can now hopefully help the next person to have to deal with this or indeed for someone to point out my stupidity and show me how it should have been done.
Do you want to be notified whenever I post something new for you to read? Just enter your email address below... 
Gday Sean
there are so many hours that I too put into trying to work these things out. I think you’re being hard on yourself with the incompetent bit, and your post will no doubt help a lot of people in the same predicament. Thanks for sharing it, I’m sure to need it one day.
I’m hearin ya
cheers
Darryl
Hi Darryl,
Thanks for the feedback. Hope you found it useful! It was certainly fun figuring it out. Got another blog post scheduled for my next little WooCommerce trick too so keep an eye out.
cheers
S
Many thanks for that bit of code – searching for it for a little while. Appreciate you sharing. Worked perfectly
Great piece of code! Thanks a lot. Works like a charm.
Thank you so much! After struggling with this for awhile I was going to give up. This saved me!
You can achieve, using add_filter function:
https://gist.github.com/1601658
Thanks palPalani, you couldn’t do this at the time of writing but this is indeed the correct method moving forward.
ta
S
Hello!
Thanks a lot for your solution. it’s great.
But. what about main page? It’s not work on it
thanks a lot
Hi Alex,
It seems to work ok for me. Any more information you can give me to debug it would be great.
ta
S
IIn page [recent_products per_page="12" columns="4"] short code
Hi Rusty,
Thanks.. this existed at the time of writing and you are right to mention it but my change works sitewide whereas this will work for a single page. So it’s good to know but my way still supersedes it.
ta
S
dude you rock!
would these work on all the woo ecommerce themes? or just an specific one?
Thanks.
No problem. Thanks for the feedback
Should work on all as they all use the same templating engine. Let me know if you find one you cant do and I shall write a snippet for you.
ta
S
Hi Sean
I’m currently re-designing my website and am already using the ’3 column code’ for my product pages where I have a sidebar then the page content.
My home page is full width and I wanted to display 4 columns of recent products instead by using the following code: [recent_products per_page="4" columns="4"].
To your knowledge, will the 3 column code override this 4 column shortcode and always try to display 3 columns?
Thanks =)
Hey Gemma,
I don’t know to be honest. One way to find out. But if you wrap my code in if (!is_home() && !is_front_page()) { … } then it should fix it so it doesn’t show on the homepage.
ta
S
I have searching for the answer to this for days!!!! Thank you so so so much!
So now I would like catagory pages to show 2 columns and shop to show 3.
My shop shows 3 columns using the code you provided but on my catagory pages where only 2 columns will fit it shows 2 images then 1 image, then 2 images then 1 image.
You can view it here on my test site:
http://perfectlyimperfectme.com/product-category/teacher-templates/
Any ideas?
Thanks for the code. Might be a long shot, by any suggestions on how to centre the grid after changing it to 2 columns? Thanks.
You could center the grid by fixing the width and using margin: 0 auto; in the css. It’s the standard way of centering things.
ta
S
Hi Sean, thanks for your work
btw , do you know some way to remove the product count displayed on product categories?, this is the website I’m working on http://xn--blumediseo-19a.com/tienda/?page_id=119, I dont wanna that number, I tried editing the css file with this
mark {
display: none;
}
ul.products .count { display:none !important; }
but no luck… do you have any solution? thanks in advance
Hi all,
Sean i have a problem with your code. Some time ago i edited my functions.php with remove_action( ‘woocommerce_sidebar’, ‘woocommerce_get_sidebar’, 10); to remove the annoying sidebar. I expected that the content will auto center after that but it didnt. After that i used your code, it works when i make it to 3. Unfortunately i need 6, i need only 1 row with 6 categories. Can you help me for that ? http://agrohol.com/?product_cat=%D1%82%D1%80%D0%B0%D0%BA%D1%82%D0%BE%D1%80%D0%B8
Hi Vlado, no the site won’t auto center although I can give you some simple CSS to do that if you prefer? It looks like the code is showing 6 columns but your site styling is breaking it..
You need to change #content-woocommerce to be 100% wide and also ul.products li.product to have a width of around 12%. then it will work.
thanks
Sean
Thank you SO much for posting this. I’m a fan of WooCommerce but NOT their documentation. Had no idea they had a 4-column default until I ran into a strange layout problem I could not correct. Your post saved me. THANK YOU! (I added your 2 lines into my Genesis child theme’s functions.php and it worked like a charm.)
Thanks, it did the trick! I was getting 3 columns and this little piece of code switched it to four.
Thanks a lot for this, you truely have saved me hours of work. Thanks again.
GENIUS!
THANK YOU!
Thx, I’m creating my first e-commerce website with woo-commerce and I always find the solution of my problems in your blog ! Thank you very much !
Hi Sean,
i’m sorry but i’m quite a rookie in programming, and i will make a very basic question: WHERE precisely do i have to paste the code?
In function.php? Ok, that’s clear, but where? (i need something like a simple drawing for a child)
Thank you very much
Hi Gaia,
Yup just add it to the bottom before the ?> tag.. on the previous line. That should work.
thanks
Sean
Thank you very much, just the ticket!